Inspirecn UI Library

A custom React component library built with Radix UI and Tailwind CSS.

Overview

This package (@repo/ui) serves as the design system foundation for the Inspirecn project. While inspired by shadcn/ui's headless approach, this library is built from the ground up to support our specific design requirements and token system.

Key Features

• Radix UI Primitives: Ensures robust accessibility and keyboard navigation.
• Tailwind CSS: Utility-first styling with a custom configuration.
• Custom Design Tokens: Driven by a tokens.json source of truth, generating CSS variables for consistent theming (Colors, Typography, Spacing, Radius).
• No External Dependencies: We do not rely on the shadcn-ui package or CLI. Every component is owned and maintained within this package.

Usage

Import components directly from the package:

import { Button } from '@repo/ui/components/button';
import { Card } from '@repo/ui/components/card';

export default function MyComponent() {
  return (
    <Card>
      <Button variant="default">Click Me</Button>
    </Card>
  );
}

Developing Components

1. Create Component: Add new components in src/components/.
2. Style: Use Tailwind CSS classes. Refer to src/styles/tokens.css for available custom variables.
3. Storybook: Add a .stories.tsx file to document and test the component in Storybook.

Token System

Our design tokens are defined in src/styles/tokens.json. To update tokens:

1. Modify src/styles/tokens.json.
2. Run the generation script (if configured) or ensure generate-tokens.ts is executed to update src/styles/tokens.css.