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

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:

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:

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:

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

Contributing

• Run the docs/demo locally:

npm install
npm run dev

• Build the library:

npm run build

• Lint:

npm run lint

Please open issues and PRs for bug fixes or improvements.

License

MIT © Contributors