Molecules & Atoms

A shadcn/ui component library package for ChatSDK, built with Tailwind CSS v4 and React 19.

Overview

This package provides shadcn/ui components configured for Tailwind v4 in a monorepo setup. It includes:

• Modern shadcn/ui components without forwardRef (React 19 compatible)
• Tailwind CSS v4 with @theme inline configuration
• OKLCH color system for better color accuracy
• tw-animate-css for animations (replaces tailwindcss-animate)
• Full TypeScript support

Key Features

• Tailwind v4: Uses CSS-based configuration with @theme inline
• OKLCH Colors: More accurate and modern color system
• React 19 Ready: No forwardRef, uses modern React patterns
• Monorepo Optimized: Proper package exports and imports
• TypeScript: Full type safety
• data-slot attributes: For advanced styling capabilities

Usage

Installing Components

From your app directory (e.g., apps/frontend):

cd apps/frontend
pnpm dlx shadcn@canary add button

The CLI will automatically install components to packages/ui and configure imports.

Importing Components

import { Button } from "@chatsdk-dev/ui/atoms/button";
import { cn } from "@chatsdk-dev/ui/lib/utils";

export function MyComponent() {
  return (
    <div>
      <Button variant="outline" size="lg">
        Click me
      </Button>
    </div>
  );
}

Available Imports

// Components
import { Button } from "@chatsdk-dev/ui/atoms/button";

// Utilities
import { cn } from "@chatsdk-dev/ui/lib/utils";

// Hooks (when added)
import { useTheme } from "@chatsdk-dev/ui/hooks/use-theme";

Configuration

Tailwind CSS v4 Setup

The package uses Tailwind v4's new CSS-based configuration:

/* packages/ui/src/styles.css */
@import "tailwindcss";
@import "tw-animate-css";

:root {
  --background: oklch(100% 0 0);
  --foreground: oklch(15% 0 0);
  /* ... more variables */
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  /* ... more theme variables */
}

App Integration

In your app's globals.css:

@import "@chatsdk-dev/ui/styles.css";

components.json

Each workspace needs a components.json file:

packages/ui/components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@chatsdk-dev/ui/atoms",
    "utils": "@chatsdk-dev/ui/lib/utils",
    "hooks": "@chatsdk-dev/ui/hooks",
    "lib": "@chatsdk-dev/ui/lib",
    "ui": "@chatsdk-dev/ui/atoms"
  }
}

apps/frontend/components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "../../packages/ui/src/styles.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "hooks": "@/hooks",
    "lib": "@/lib",
    "utils": "@chatsdk-dev/ui/lib/utils",
    "ui": "@chatsdk-dev/ui/atoms"
  }
}

Development

Building Styles

cd packages/ui
pnpm dev:styles  # Watch mode
pnpm build:styles  # Build once

Type Checking

pnpm check-types

Adding New Components

Use the shadcn CLI from your app directory:

cd apps/frontend
pnpm dlx shadcn@canary add [component-name]

The CLI will:

1. Install the component in packages/ui/src/components/
2. Add necessary dependencies to packages/ui/package.json
3. Configure imports automatically

Migration from Tailwind v3

If migrating from Tailwind v3:

1. Remove tailwind.config.js/ts files
2. Update CSS to use @theme inline pattern
3. Replace HSL colors with OKLCH
4. Replace tailwindcss-animate with tw-animate-css
5. Remove forwardRef from components
6. Update color references in chartConfig (remove hsl() wrapper)

Reference

• shadcn/ui Tailwind v4 Guide
• shadcn/ui Monorepo Guide
• Tailwind CSS v4 Documentation