open-index/open-npm huggingface dataset:
npm package: @peppermint-design/devreadykit
Description: A lightweight, modern React component library built with TypeScript. Ships tree-shakeable ESM and type definitions. Works with Vite, Next.js, and other modern bundlers.
Latest version: 0.2.2

# DevReady Kit — react component library

A lightweight, modern React component library built with TypeScript. Ships tree-shakeable ESM and type definitions. Works with Vite, Next.js, and other modern bundlers.

## Features
- **Typed**: Full TypeScript support and IntelliSense
- **Tree-shakeable**: ESM-first with CJS fallback
- **Composable**: Headless-friendly patterns and utility-first classes
- **Framework-friendly**: Works with Vite, Next.js, CRA (legacy)

## Installation

```bash
npm i @peppermint-design/devreadykit
```

### Peer dependencies
Make sure your app has:
- `react` >= 18
- `react-dom` >= 18

### Styling
Components are styled using Tailwind utility classes. You can use them without Tailwind, but we strongly recommend enabling Tailwind for consistent styling.

## Usage
Named imports:
```tsx
import { Button, Input } from '@peppermint-design/devreadykit';

export default function Form() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "20px", padding: "20px",}}>
      <Input placeholder="Amount" type="number" startIcon="$"/>
      <Button variant="filled" color="primary">Submit</Button>
    </>
  );
}
```

## Available components

- `Button`
- `UserBold`
- `Badge`
- `Checkbox`
- `Chip`
- `ContextMenu`
- `Dialog`
- `Dropdown`
- `Input`
- `Progress`
- `RadioButton`
- `Slider`
- `RangeSlider`
- `Textarea`
- `Toggle`

Import as:
```ts
import { Button, Input } from '@peppermint-design/devreadykit';
```

## Bundlers and SSR

- ESM entry: `dist/index.mjs`
- CJS entry: `dist/index.cjs`
- Types: `dist/types/index.d.ts`

The package marks `react` and `react-dom` as peer dependencies and won’t bundle them.

### Next.js
Works out of the box. Import components in server or client components as needed. Mark client components with `"use client"` when interactivity is required.

### Vite
No extra config needed. Ensure your project includes the global CSS that pulls Tailwind (if you use Tailwind).

## Theming
DevReady Kit uses composable props and Tailwind classes. You can theme by:
- Passing `className` to components
- Extending Tailwind config (colors, radius, spacing)
- Wrapping primitives with your own design tokens

Example:
```tsx
<Button className="bg-indigo-600 hover:bg-indigo-700 text-white">Save</Button>
```

## Contributing
- Run the docs/demo locally:
```bash
npm install
npm run dev
```
- Build the library:
```bash
npm run build
```
- Lint:
```bash
npm run lint
```

Please open issues and PRs for bug fixes or improvements.

## License
MIT © Contributors