open-index/open-npm huggingface dataset:
npm package: @sinval.junior/react-components
Description: A React Component library
Latest version: 2.0.11

# @ac-ui/react-components

A React Component library

## Installation
- Install as a npm dependency `npm i @ac-ui/react-components`
- Import component
    - ```jsx harmony
      import { Subheader } from '~@ac-ui/react-components';
      
      const Example = () => <Subheader title={"Subheader example"}/> 
      ```

## Contribution

Everyone is encouraged and welcome to contribute to @ac-ui/react-components! This library is built (being built) for 
Avenue Coders to use, and to develop. To maintain usability, keep code consistent, and to ensure a quality product,
linting and pre-commit hooks have been added in to the repository.

**How do I make a component?**
- Run `$ npm run component:stub`
- Rename component to desired name, and update all references
- Make component exportable by adding it to `src/index.js`
- Preview components in styleguidist using `npm run styleguide`

**What does a component need to have**
- A component only needs to have:
    - `index.js` (with the following content `export{ default as ComponentName } from './ComponentName' `)
    - `ComponentName.jsx`
- As nice to haves
    - `ComponentName.md` to enhance component in Styleguidist
    - `ComponentName.spec.js` because unit testing is always smart
    - `ComponentName.scss` to style things

**How do I style a component?**
- Completely custom element?
    - Import the variables, mixins, and helpers all in one go
        - (`@import "~@ac-ui/design-system/src/base";`)
- Is it built around a [TWBS Component](https://getbootstrap.com/docs/4.1/components)
    - Import the 'bridge', which imports variables, helpers, and utility classes for the component
        - (`@import "~@ac-ui/design-system/src/bridge/buttons";`)
- Always style using variables, and TWBS where possible!
    - A variable doesn't exist? 
        - Is there one close to it? Use that.
        - Is it going to be used only in this component? Initiate variable there
        - Is it only going to be used in many files? Add it to `@ac-ui/design-system`
npm package: @sinzxc/ots-ui-kit
Description: A modern React UI Kit with Tailwind CSS.
Latest version: 0.1.29

# Your UI Kit

A modern React UI Kit with Tailwind CSS.

## Features

- 🎨 Built with Tailwind CSS
- 📦 Tree-shakeable exports
- 💪 Written in TypeScript
- 🎭 Storybook documentation
- ⚡ Powered by Vite

## Installation

```bash
npm install @your-org/ui-kit
```

## Usage

1. Add the UI Kit's Tailwind preset to your `tailwind.config.js`:

```javascript
module.exports = {
  content: [
    ***
    './node_modules/@sinzxc/ots-ui-kit/dist/**/*.js',
  ],
  // ... your config
}
```

2. Import and use components:

```jsx
import { Button } from '@your-org/ui-kit'

function App() {
  return (
    <Button variant="primary">
      Click me!
    </Button>
  )
}
```

## Documentation

Visit our Storybook documentation at [link-to-your-storybook]

## Available Components

- `Button` - Versatile button component with multiple variants and states
- `ErrorBoundary` - React error boundary for graceful error handling

## Documentation

For detailed documentation and examples, run the Storybook locally:

```bash
npm run storybook
```