@align-ui/kit

A shadcn/ui-compatible component library based on the AlignUI design system. Built with TypeScript, Tailwind CSS, and Radix UI primitives.

=� Features

• shadcn/ui Compatible: Drop-in replacement with CLI support
• Zero Hardcoding: All values use semantic design tokens
• Full Tailwind Integration: Customizable via Tailwind configuration
• TypeScript First: Complete type safety with proper IntelliSense
• Next.js Themes: Built-in dark mode support
• Semantic Tokens: Production-ready color system
• Accessibility: WCAG 2.1 AA compliant components
• Tree Shakeable: Import only what you need

=� Installation

npm install @align-ui/kit
# or
yarn add @align-ui/kit
# or
pnpm add @align-ui/kit

=� Setup

1. Configure Tailwind CSS

Add the AlignUI theme to your tailwind.config.js:

import { designTokens } from '@align-ui/kit/tokens'

export default {
  // ... your existing config
  content: [
    // ... your existing content paths
    './node_modules/@align-ui/kit/src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontSize: designTokens.typography,
      boxShadow: designTokens.shadows,
      borderRadius: designTokens.borderRadius,
      // ... other token extensions
    },
  },
}

2. Add CSS Variables

Import the theme CSS in your global CSS file:

@import '@align-ui/kit/styles';

Or in your Next.js _app.tsx:

import '@align-ui/kit/styles'

<� Usage

Basic Example

import { Button, Card, CardHeader, CardTitle, CardContent } from '@align-ui/kit'

function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to AlignUI Kit</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="default" size="medium">
          Get Started
        </Button>
      </CardContent>
    </Card>
  )
}

>� Available Components

• Button - Multiple variants and sizes
• Input - Form input with error states
• Label - Accessible form labels
• Card - Content containers

More components coming soon!

=O Credits

Built on top of the exceptional AlignUI design system by Doukan �avu_.