@rapidset/rapidkit

AI-first React UI component kit for production-grade application interfaces.

RapidKit 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.

It is built on top of proven technologies including shadcn/ui, Radix UI, Zod, RTK Query, TanStack, and Tailwind CSS.

Why RapidKit

• Reusable, domain-neutral components designed for package consumers.
• Strong TypeScript APIs and accessibility-first interaction patterns.
• Theme-ready styling with semantic tokens.
• AI-friendly docs and contracts for predictable code generation.

Installation

Choose your package manager:

pnpm add @rapidset/rapidkit react react-dom @reduxjs/toolkit @tanstack/react-table react-redux react-hook-form zod tailwindcss

npm install @rapidset/rapidkit react react-dom @reduxjs/toolkit @tanstack/react-table react-redux react-hook-form zod tailwindcss

yarn add @rapidset/rapidkit react react-dom @reduxjs/toolkit @tanstack/react-table react-redux react-hook-form zod tailwindcss

Compatibility

• React: 19
• React DOM: 19
• Tailwind CSS: 4
• Zod: 4
• TypeScript declarations included in package output

Included Components

• Autocomplete
• Avatar
• BaseModal
• BaseTable
• Button
• Checkbox
• Chip
• DatePicker
• DetailsCard
• DropDown
• Icon
• Image
• Logo
• NavMenu
• Input
• Page
• Search
• SideBar
• Text
• TextArea
• Toggle

Included Hooks

• useDebounce
• useFormHandlers
• useSearchPagination

Quick Start

import { Button, Input } from '@rapidset/rapidkit';
import '@rapidset/rapidkit/styles.css';
import '@rapidset/rapidkit/themes/default.css';

export function Example() {
  return (
    <div className="space-y-3">
      <Input name="email" label="Email" value="" onChange={() => {}} />
      <Button label="Continue" onClick={() => {}} />
    </div>
  );
}

Hook Quick Start

import { useFormHandlers } from '@rapidset/rapidkit';

type LoginValues = {
  email: string;
  remember: boolean;
};

const form = useFormHandlers<LoginValues>({
  initialValues: {
    email: '',
    remember: false,
  },
  validate: (values) => (values.email ? {} : { email: 'Email is required' }),
  onSubmit: async (values) => {
    console.log(values);
  },
});

AI Import Contract

To keep AI-generated code reliable and consistent, use exactly this import model:

• Import all components as named exports from @rapidset/rapidkit.
• Import package styles from @rapidset/rapidkit/styles.css.
• Import one theme from @rapidset/rapidkit/themes/*.

Allowed:

import { Button, Input, TextArea } from '@rapidset/rapidkit';
import '@rapidset/rapidkit/styles.css';
import '@rapidset/rapidkit/themes/default.css';

Not allowed:

import { Button } from '@rapidset/rapidkit/dist/index.js';
import { Button } from '@rapidset/rapidkit/components/Button';
import { Button } from '@rapidset/rapidkit/src/components/Button';

Documentation

• Components: https://rapidset.github.io/RapidKit/components/
• Access Control: https://rapidset.github.io/RapidKit/ACCESS_CONTROL
• Flows: https://rapidset.github.io/RapidKit/flows/
• Hooks: https://rapidset.github.io/RapidKit/hooks/
• Theming: https://rapidset.github.io/RapidKit/THEMING
• Architecture: https://rapidset.github.io/RapidKit/ARCHITECTURE

Packages

• @rapidset/rapidkit: publishable React UI component library

License

MIT