Features

• Three Unique Design Variants — Switch between basic, game, and crayon designs instantly
• Token-Driven Architecture — Consistent theming through semantic design tokens
• Light & Dark Themes — Built-in theme support for all design variants
• Tree-Shakeable — Import only what you need
• TypeScript Native — First-class TypeScript support with full type safety
• Zero-Runtime CSS — Powered by Vanilla Extract for optimal performance
• Accessible by Default — Built on top of Base UI for WCAG compliance

Quick Start

Install Pine Design System using your preferred package manager:

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

Import components and start building:

import { ThemeProvider, Button, Badge, TextField, Switch } from "pine-design-system";
import "pine-design-system/style.css";

function App() {
	return (
		<ThemeProvider design="basic" defaultTheme="light">
			<Button intent="primary" size="md">
				Get Started
			</Button>
			<Badge variant="solid" intent="success">
				New
			</Badge>
			<Switch size="md" intent="primary" />
			<TextField
				label="Email"
				placeholder="[email protected]"
				variant="outline"
			/>
		</ThemeProvider>
	);
}

Design System

Pine Design System comes with three distinct design variants that can be switched seamlessly with a single prop change:

🎯 Basic Design

A clean, modern design perfect for professional applications. Features smooth animations, subtle shadows, and a refined aesthetic.

<ThemeProvider design="basic">
	<YourApp />
</ThemeProvider>

🎮 Game Design

Pixel-art inspired design for gamified experiences. Features retro aesthetics, bold borders, and playful interactions that bring a nostalgic gaming feel to your interface.

<ThemeProvider design="game">
	<YourApp />
</ThemeProvider>

🖍️ Crayon Design

Soft, warm, and friendly design with hand-drawn aesthetics. Features rounded corners, gentle shadows, and a cozy feel perfect for creative or educational applications.

<ThemeProvider design="crayon">
	<YourApp />
</ThemeProvider>

All design variants support both light and dark themes:

<ThemeProvider design="game" defaultTheme="dark">
	<YourApp />
</ThemeProvider>

Change the design dynamically at runtime:

function App() {
	const [design, setDesign] = useState<"basic" | "game" | "crayon">("basic");
	const [theme, setTheme] = useState<"light" | "dark">("light");

	return (
		<ThemeProvider design={design} onDesignChange={setDesign} theme={theme} onThemeChange={setTheme}>
			<button onClick={() => setDesign("game")}>Switch to Game Design</button>
			<button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
				Toggle Theme
			</button>
			<YourApp />
		</ThemeProvider>
	);
}

Documentation

Visit our Storybook documentation for:

• Getting Started Guide — Installation and usage
• Component API — Props, variants, and examples
• Design Tokens — Theming and customization
• Accessibility — A11y guidelines and best practices

To run Storybook locally:

git clone https://github.com/3o14/pine-design-system.git
cd pine-design-system
pnpm install
pnpm run storybook

Components

| Component | Description | | ------------- | -------------------------------------- | | Badge | Display status, labels, or counts | | Button | Primary actions with multiple variants | | Checkbox | Selectable input with custom styling | | Dialog | Modal dialogs with Portal support | | Dropdown | Select input with custom options | | Switch | Toggle between two states | | TextField | Text input with validation states |

Tech Stack

Built with modern tools for optimal developer experience:

• React 19 — UI library
• TypeScript — Type safety
• Vanilla Extract — Zero-runtime CSS-in-TS
• Vite — Lightning-fast build tool
• Storybook 8 — Component documentation

Contributing

Contributions are welcome! This project is part of a learning journey toward building production-ready design systems.

If you'd like to contribute:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License — feel free to use it in your projects! :D