Skip to content

Getting Started

Jump to bottom
snoo edited this page Apr 7, 2026 · 1 revision

Getting Started

Prerequisites

  • Node.js 18+
  • npm, pnpm, or yarn
  • A React project (or willingness to start one)

Installation

Option 1: Clone the seed into an existing project

# Clone styleseed
git clone https://github.com/bitjaru/styleseed.git

# Copy files into your project
cp -r styleseed/seed/scaffold/* ./
cp -r styleseed/seed/css/* ./src/styles/
cp -r styleseed/seed/components/* ./src/components/
cp styleseed/seed/DESIGN-LANGUAGE.md ./
cp styleseed/seed/CLAUDE.md ./

# Install dependencies
npm install

Option 2: Start a brand-new project from the seed

git clone https://github.com/bitjaru/styleseed.git
cd styleseed

# Create project directory
mkdir -p my-app/src/{styles,components/ui,components/patterns,app}

# Copy scaffold
cp seed/scaffold/* my-app/
cp seed/css/* my-app/src/styles/
cp -r seed/components/ui my-app/src/components/
cp -r seed/components/patterns my-app/src/components/

# Install and run
cd my-app
npm install
npm run dev

Project Structure

After setup, your project looks like this:

src/
  styles/
    fonts.css          # Font imports (Pretendard + Inter)
    theme.css          # CSS custom properties + @theme inline
    base.css           # Base element styles
    index.css          # Entry point
  components/
    ui/                # 31 primitive components (shadcn style)
    patterns/          # 16 composed pattern components
  app/
    App.tsx            # Main app component
  main.tsx             # React entry point

Tech Stack

Layer Technology
Framework React 18 + TypeScript
Build Vite 6 + @tailwindcss/vite
Styling Tailwind CSS v4 (CSS-first, no config file)
Components Radix UI primitives
Variants class-variance-authority + clsx + tailwind-merge
Icons Lucide React (+ custom SVG icons)
Optional Recharts, Motion (Framer Motion), react-hook-form

First Customization: Change the Brand Color

Open src/styles/theme.css and change the --brand variable:

:root {
  --brand: #721FE5;  /* Default: purple. Change to your brand color */
}

This single change propagates to icon badges, progress bars, toggles, active navigation, and every other accent element.

Key Color Tokens

Variable Purpose Default
--brand Brand accent #721FE5
--primary Buttons, links #030213
--destructive Error/danger #D4183D
--success Success states #6B9B7A
--warning Warning states #D97706
--info Information #3B82F6

Using with Claude Code

Place CLAUDE.md and DESIGN-LANGUAGE.md in your project root. Claude Code will automatically reference them when building UI.

The 10 slash commands become available when the skills are registered:

/ui-page Dashboard     # Scaffold a full page
/ui-component Card     # Generate a component
/ui-review src/App.tsx # Review for compliance

See Claude Code Skills for the full list.

Component Conventions

All components follow these rules:

// data-slot attribute on every component
<div data-slot="my-component" ... />

// className merging with cn() (never template literals)
className={cn("base-classes", className)}

// Variants managed with CVA
const variants = cva("base", { variants: { ... } })

// Props typed with React.ComponentProps
function MyComponent({ className, ...props }: React.ComponentProps<"div">) {}

Import Pattern

import { Button } from "@/components/ui/button"
import { StatCard } from "@/components/patterns/stat-card"
import { cn } from "@/components/ui/utils"

Next Steps

Clone this wiki locally