Getting Started

Prerequisites

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

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

First Customization: Change the Brand Color

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

Key Color Tokens

Using with Claude Code

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

Component Conventions

// 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