Get Started with DS ThemeMate

Build beautiful interfaces with 68+ themed components and AI-powered design tools

68+ Components18 Design Tokens11 Patterns59 Fonts

What is DS ThemeMate?

DS ThemeMate is a comprehensive design system built on ShadCN UI components and Figma design tokens. It bridges the gap between design and development with live previews, AI-powered component generation, and complete customization capabilities.

68+ Themed Components

Production-ready UI components with semantic theming

AI-Powered Generation

Create components from natural language descriptions

Customizable Tokens

18 semantic design tokens with light/dark modes

Advanced Styling

Pattern overlays and 59 Google Fonts

Quick Start

Get up and running in 3 simple steps

Installation & Setup

Install dependencies and initialize your project

# Install dependencies
npm install

# Initialize ShadCN UI
npx shadcn-ui@latest init

# Add a component
npx shadcn-ui@latest add button

Browse & Select Components

Explore 68+ themed components organized by category

Button

Card

Input

Select

Browse All Components

Apply Tokens & Customize

Customize design tokens to match your brand

// In your globals.css or theme file
:root {
  --primary: 12 89% 61%;      /* Coral accent */
  --background: 36 67% 96%;    /* Warm off-white */
  --foreground: 40 25% 8%;     /* Dark text */
}

.dark {
  --primary: 12 86% 65%;
  --background: 40 10% 10%;
  --foreground: 36 67% 97%;
}

Explore All Tokens

Explore Features

Discover what makes DS ThemeMate powerful

18 Tokens

Design Tokens

Customize semantic color tokens with real-time preview

Primary

Secondary

Accent

Destructive

Explore Tokens

68+ Components

Component Library

Production-ready components with variants and theming

Browse Components

AI-Powered

AI Mate

Generate components from natural language descriptions

AI Component Generation Demo

Try AI Mate

11 Patterns, 59 Fonts

Patterns & Fonts

Background patterns and Google Fonts integration

Pattern Preview

Patterns Fonts

Code Examples

Copy and paste ready-to-use code

Basic Usage

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Get Started</Button>
      </CardContent>
    </Card>
  )
}

With Design Tokens

import { Button } from "@/components/ui/button"

export default function ThemedButton() {
  return (
    <div className="space-y-2">
      <Button className="bg-primary text-primary-foreground">
        Primary Action
      </Button>
      <Button variant="secondary">
        Secondary Action
      </Button>
      <Button variant="outline" className="border-primary text-primary">
        Outlined
      </Button>
    </div>
  )
}

Explore More

Deep dive into specific features

Component Library

Browse 68+ themed ShadCN components

Design Tokens

Customize 18 semantic color tokens

Patterns

Add background patterns to UI elements

Fonts

Choose from 59 Google Fonts

AI Mate

Generate components with Claude AI

A/B Testing

Test component variations

Ready to Build?

Start creating beautiful interfaces with DS ThemeMate's comprehensive component library and design tools

Browse Components Try AI Mate