Effortless by design.

Simplify your workflow with an AI-ready component bundle. Sync designer-led variants via CLI for full type-safety—accessible, props-driven, and ready to ship with zero complexity.

pnpm add @components-kit/react
compound.tsx
1
2
3
4
5
6
7
8
9
10
<Alert>
  <InfoIcon />
  <AlertTitle>Update available</AlertTitle>
  <AlertDescription>
    A new version is ready to install.
  </AlertDescription>
  <AlertAction>
    <Button variant="outline">Install</Button>
  </AlertAction>
</Alert>
props-driven.tsx
1
2
3
4
5
6
<Alert
  icon={<InfoIcon />}
  heading="Update available"
  description="A new version is ready to install."
  action={{ children: "Install", variant: "outline" }}
/>

Props-Driven API

Eliminate wrapper hell with a flat, props-driven API. By using direct prop control and Slot composition, you get a cleaner DOM and high-performance structures that AI agents can generate with surgical precision.

package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "name": "@components-kit/react",
  "dependencies": {},
  "peerDependencies": {
    "react": "^18.0.0 || ^19.0.0",
    "react-dom": "^18.0.0 || ^19.0.0"
  },
  "peerDependenciesMeta": {
    "@floating-ui/react": { "optional": true },
    "@tanstack/react-table": { "optional": true },
    "downshift": { "optional": true },
    "sonner": { "optional": true }
  }
}

Zero Forced Dependencies

Zero bloat, zero conflicts. React is our only required peer dependency. Modular logic for tables or dropdowns is strictly opt-in, ensuring you only ship the code your application actually needs.

DevTools
StylesComputedLayout
:root {
--color-primary-50:
#EFF6FF;
--color-primary-100:
#DBEAFE;
--color-primary-200:
#BEDBFF;
--color-primary-300:
#8EC5FF;
--color-primary-400:
#51A2FF;
--color-primary-500:
#2B7FFF;
--color-primary-600:
#155DFC;
--color-primary-700:
#1447E6;
--color-primary-800:
#193CB8;
--color-primary-900:
#1C398E;
--color-primary-950:
#162456;
--color-gray-0:
#FFFFFF;
--color-gray-50:
#F8FAFC;
--color-gray-100:
#F1F5F9;
--color-gray-200:
#E2E8F0;
--color-gray-300:
#CAD5E2;
--color-gray-400:
#90A1B9;
--color-gray-500:
#62748E;
--color-gray-600:
#45556C;
--color-gray-700:
#314158;
--color-gray-800:
#1D293D;
--color-gray-900:
#0F172B;
--color-gray-950:
#020618;
}

Automated Style Sync

Design shifts, your code adapts. Our global CSS bundle delivers designer-managed styles and semantic tokens instantly, allowing you to update visual themes across your entire app without a single redeploy.

terminal
1
2
3
4
5
$ ck generate

Fetching component variants from https://api.componentskit.com...
Found 21 components with 45 variants
Generated types/components-kit.d.ts
components-kit.d.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Auto-generated by @components-kit/cli
// Do not edit manually

declare module "@components-kit/react" {
  interface ComponentsKitVariants {
    alert: "default" | "destructive" | "success" | "warning";
    badge: "default" | "destructive" | "outline" | "secondary";
    button: "destructive" | "ghost" | "outline" | "primary";
    checkbox: "default";
    select: "default";
    switch: "default";
    text: "body1" | "body2" | "body3";
  }
}

Dynamic Type Generation

Type safety, delivered from the cloud. Our CLI fetches your design system’s metadata directly from our servers to generate global Module Augmentations—instantly syncing your remote variants into first-class TypeScript interfaces for your IDE.

llms.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# @components-kit/react

> Headless, accessible React components styled via
> data attributes. Bi-directional Figma design system
> sync — CSS ships instantly, no code, no redeploy.

## Components

- Alert: Contextual feedback messages
- Badge: Small status indicator, supports asChild
- Button: Polymorphic button with loading, icons
- Checkbox: Boolean selection with indeterminate
- Combobox: Searchable select with filtering
- Heading: Polymorphic heading (h1-h6)
- Input: Text input with type variants
- MultiSelect: Multi-value select with tags
- Select: Dropdown with keyboard navigation
- Table: Data table with sorting, pagination
- Tabs: Accessible tabs for content
- Text: Polymorphic text element
- Toast: Notification function (Sonner-based)

Agent-First Documentation

Built for Copilots. Standardized llms.txt manifests provide machine-readable maps of your library, helping AI agents understand your architecture and generate error-free UI code out of the box.

Alert
Badge
Button
Checkbox
Combobox

Accessible by Default

WAI-ARIA compliance baked in. From focus trapping to roving tabindex, we handle complex interaction mechanics under the hood to ensure your UI is semantic and inclusive by default.

@components-kit/react

0 dependencies

@tanstack/react-table

optional

downshift

optional

@floating-ui/react

optional

sonner

optional

Modular Peer Architecture

Scale without the penalty. Leverage industry-leading primitives like TanStack Table and Sonner as optional peers. Enjoy powerful, complex logic while keeping your core bundle ultra-light.

Components

The functional building blocks of your design system. From inputs and buttons to toggles and sliders, every component is a pure, accessible atom pre-wired with WAI-ARIA support and keyboard navigation. We provide the raw functional core, allowing you to compose complex layouts via a flat, predictable prop structure with zero architectural bloat.

Color
Gray Scale
Radius
Light
Update available
Please review the latest changes before deploying to production.

Alert

Badge

Badge

Button

Checkbox

Combobox

Heading 1

Heading 2

Heading 3

Heading

Icon

Input

ReactVueAngular

MultiSelect

Pagination

Uploading...

Progress

RadioGroup

Select

Content above

Content below

Separator

Skeleton

Slider

Switch

NameEmailRole
Alice Johnsonalice@example.comAdmin

Table

Account settings content.

Tabs

Body 1

Body 2

Body 3

Text

Textarea

Settings saved
Your changes have been applied successfully.

Toast

Installation

Go from zero to your first type-safe component in four steps. Minimal configuration, automated type generation, and a seamless developer experience — just install, generate, and ship.

1

Install the dependencies

Install the core package along with the CLI as a dev dependency. React is the only required peer—advanced components like TanStack Table are opt-in.

Terminal
pnpm add @components-kit/react
2

Connect the styles

Connect the edge-cached CSS bundle. Use query params to customize your theme—like primaryColor or borderRadius—without touching a single CSS file.

Color
Gray Scale
Radius
layout.tsx
<head>
  ...
  <link
    as="style"
    href="https://api.componentskit.com/v1/public/bundle.min.css?borderRadius=8&grayScale=slate&primaryColor=blue"
    rel="preload"
  />
  <link
    href="https://api.componentskit.com/v1/public/bundle.min.css?borderRadius=8&grayScale=slate&primaryColor=blue"
    rel="stylesheet"
  />
</head>
3

Initialize & Generate

Initialize your config file and run the generator. This creates a local schema that syncs your design tokens with TypeScript for full autocomplete.

Terminal
pnpm add -D @components-kit/cli
npx ck init && npx ck generate
4

Ship type-safe code

Import your components and pass props with confidence. Every variant name is strictly typed and validated against your config at build time.

page.tsx
import { Button } from "@components-kit/react";

export default function Page() {
  return (
    <main>
      <h1>Welcome</h1>
      <Button variantName="primary">
        Get Started
      </Button>
    </main>
  );
}