\n\nAI-first React UI component kit for production-grade application interfaces.\n\nRapidKit gives teams beautifully designed, accessible, typed, enterprise-ready components that are already themed and built for AI-assisted development. It is designed to make production-grade code generation easier with predictable APIs, contract-aligned documentation, and AI-friendly tooling.\n\nIt is built on top of proven technologies including shadcn/ui, Radix UI, Zod, RTK Query, TanStack, and Tailwind CSS.\n\n[](https://www.npmjs.com/package/@rapidset/rapidkit)\n[](https://github.com/RapidSet/RapidKit/blob/main/LICENSE)\n\n## Why RapidKit\n\n- Reusable, domain-neutral components designed for package consumers.\n- Strong TypeScript APIs and accessibility-first interaction patterns.\n- Theme-ready styling with semantic tokens.\n- AI-friendly docs and contracts for predictable code generation.\n\n## Installation\n\nInstall RapidKit alongside its required peers:\n\n```bash\npnpm add @rapidset/rapidkit react react-dom @reduxjs/toolkit @tanstack/react-table react-redux react-hook-form zod tailwindcss\n```\n\n```bash\nnpm install @rapidset/rapidkit react react-dom @reduxjs/toolkit @tanstack/react-table react-redux react-hook-form zod tailwindcss\n```\n\n```bash\nyarn add @rapidset/rapidkit react react-dom @reduxjs/toolkit @tanstack/react-table react-redux react-hook-form zod tailwindcss\n```\n\n### Optional peers (only install if you use the matching components)\n\n| Component | Install when using |\n| ------------ | --------------------------- |\n| `Chart` | `recharts` |\n| `DatePicker` | `react-day-picker date-fns` |\n| `Toast` | `sonner` |\n\n```bash\n# Example: app that uses DatePicker and Toast but not Chart\npnpm add react-day-picker date-fns sonner\n```\n\nThese are declared as optional peer dependencies so package managers won't auto-install them — apps that don't render the matching components carry no extra install or bundle cost.\n\n## Compatibility\n\n- React: 19\n- React DOM: 19\n- Tailwind CSS: 4\n- Zod: 4\n- Recharts: 3 (optional, only when using `Chart`)\n- TypeScript declarations included in package output\n\n## Included Components\n\n- Autocomplete\n- Avatar\n- BaseModal\n- BaseTable\n- Button\n- Chart\n- Checkbox\n- Chip\n- DatePicker\n- DetailsCard\n- DropDown\n- Form\n- FormField\n- FormSubmit\n- Icon\n- Image\n- Logo\n- NavMenu\n- Input\n- Page\n- Search\n- SideBar\n- StatCard\n- Text\n- TextArea\n- Toast\n- Toggle\n\n## Included Hooks\n\n- useDebounce\n- useFormHandlers\n- useFormMutation\n- useSearchPagination\n\n## Quick Start\n\n```tsx\nimport { Button, Input } from '@rapidset/rapidkit';\nimport '@rapidset/rapidkit/styles.css';\nimport '@rapidset/rapidkit/themes/default.css';\n\nexport function Example() {\n return (\n
\n {}} />\n
\n );\n}\n```\n\n## Hook Quick Start\n\n```tsx\nimport { useFormHandlers } from '@rapidset/rapidkit';\n\ntype LoginValues = {\n email: string;\n remember: boolean;\n};\n\nconst form = useFormHandlers({\n initialValues: {\n email: '',\n remember: false,\n },\n validate: (values) => (values.email ? {} : { email: 'Email is required' }),\n onSubmit: async (values) => {\n console.log(values);\n },\n});\n```\n\n## AI Import Contract\n\nTo keep AI-generated code reliable and consistent, use exactly this import model:\n\n- Import all components as named exports from `@rapidset/rapidkit`.\n- Import package styles from `@rapidset/rapidkit/styles.css`.\n- Import one theme from `@rapidset/rapidkit/themes/*`.\n\nAllowed:\n\n```tsx\nimport { Button, Input, TextArea } from '@rapidset/rapidkit';\nimport '@rapidset/rapidkit/styles.css';\nimport '@rapidset/rapidkit/themes/default.css';\n```\n\nNot allowed:\n\n```tsx\nimport { Button } from '@rapidset/rapidkit/dist/index.js';\nimport { Button } from '@rapidset/rapidkit/components/Button';\nimport { Button } from '@rapidset/rapidkit/src/components/Button';\n```\n\n## Documentation\n\n- Components: https://rapidset.github.io/RapidKit/components/\n- Access Control: https://rapidset.github.io/RapidKit/ACCESS_CONTROL\n- Flows: https://rapidset.github.io/RapidKit/flows/\n- Hooks: https://rapidset.github.io/RapidKit/hooks/\n- Theming: https://rapidset.github.io/RapidKit/THEMING\n- Architecture: https://rapidset.github.io/RapidKit/ARCHITECTURE\n\n## Packages\n\n- `@rapidset/rapidkit`: publishable React UI component library\n\n## License\n\nMIT\n","readmeFilename":"README.md"}
![\"RapidKit\"](\"https://raw.githubusercontent.com/RapidSet/RapidKit/main/public/rapidkit.svg\")
\n