Design System Demo

A design system library with UI components and Figma token utilities built with React, Tailwind CSS, and shadcn/ui. This package provides production-ready components and utilities to integrate Figma design tokens into your React applications.

Features

• 🎨 UI Components: Pre-built, customizable React components (Button, Card, Input)
• 🎯 Figma Integration: Utilities to fetch and apply Figma design tokens
• 🎭 TypeScript: Full TypeScript support with type definitions
• 💅 Tailwind CSS: Built with Tailwind utility classes
• ♿ Accessible: Components built with Radix UI primitives
• 🔧 Customizable: Easy to extend and customize

Installation

npm install design-system-demo
# or
yarn add design-system-demo
# or
pnpm add design-system-demo

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom tailwindcss

Setup

1. Import Design System Styles

Import the design system styles in your main CSS file or app entry point:

/* Import Tailwind base styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Import design system tokens and styles */
@import "@thriol/design-system-demo/styles";

Or in your JavaScript/TypeScript entry file:

// app.tsx or main.tsx
import "@thriol/design-system-demo/styles";

This automatically includes all design tokens (colors, spacing, etc.) synced from Figma.

2. Configure Tailwind CSS

Add the package paths to your tailwind.config.js to enable proper tree-shaking:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@thriol/design-system-demo/dist/**/*.{js,ts,jsx,tsx}',
  ],
  plugins: [],
}

That's it! The design system tokens are now available via CSS variables.

Usage

Button Component

import { Button } from 'design-system-demo';

function App() {
  return (
    <div>
      <Button>Default Button</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button size="sm">Small</Button>
      <Button size="lg">Large</Button>
    </div>
  );
}

Props:

• variant: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
• size: "default" | "sm" | "lg" | "icon"
• asChild: boolean - Merge with child element using Radix Slot

Card Component

import { 
  Card, 
  CardHeader, 
  CardTitle, 
  CardDescription, 
  CardContent, 
  CardFooter 
} from 'design-system-demo';

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content</p>
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  );
}

Input Component

import { Input } from 'design-system-demo';

function App() {
  return (
    <div>
      <Input type="text" placeholder="Enter text..." />
      <Input type="email" placeholder="Email address" />
      <Input type="password" placeholder="Password" />
    </div>
  );
}

Utility Functions

cn - Class Name Utility

Merge and deduplicate Tailwind classes:

import { cn } from 'design-system-demo';

function CustomButton({ className, ...props }) {
  return (
    <button 
      className={cn("px-4 py-2 rounded", className)} 
      {...props} 
    />
  );
}

Figma Token Utilities

getFigmaTokens

Fetch design tokens from Figma (returns mapped shadcn tokens):

import { getFigmaTokens } from 'design-system-demo';

async function loadTokens() {
  const tokens = await getFigmaTokens();
  console.log(tokens);
  // {
  //   background: "0 0% 100%",
  //   foreground: "220 20% 18%",
  //   primary: "208 79% 51%",
  //   ...
  // }
}

applyFigmaTokens

Apply tokens to CSS variables dynamically:

import { getFigmaTokens, applyFigmaTokens } from 'design-system-demo';

async function applyTheme() {
  const tokens = await getFigmaTokens();
  applyFigmaTokens(tokens);
}

hexToHsl

Convert hex colors to HSL format:

import { hexToHsl } from 'design-system-demo';

const hsl = hexToHsl('#1E88E5');
console.log(hsl); // "208 79% 51%"

mapFigmaTokensToShadcn

Map Figma variables to shadcn token structure:

import { mapFigmaTokensToShadcn } from 'design-system-demo';

const figmaVars = {
  'Brand/600': '#1E88E5',
  'Brand/700': '#1570EF',
  'Gray/50': '#FAFAFA',
  // ... more tokens
};

const shadcnTokens = mapFigmaTokensToShadcn(figmaVars);

TypeScript Support

This package includes TypeScript definitions. Import types as needed:

import type { ButtonProps, ShadcnTokens } from 'design-system-demo';

Customization

All components accept a className prop for custom styling:

<Button className="bg-blue-500 hover:bg-blue-600">
  Custom Styled Button
</Button>

Component Variants

Button Variants

• default: Primary branded button with background
• destructive: Red button for destructive actions
• outline: Transparent with border
• secondary: Subtle secondary action
• ghost: No background, minimal styling
• link: Styled as a link with underline

Button Sizes

• default: Standard size (h-10)
• sm: Small size (h-9)
• lg: Large size (h-11)
• icon: Square icon button (h-10 w-10)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues and questions, please open an issue on the GitHub repository.