🍍 Pine UI

A modern React component library built with design tokens at its core

Pine UI is a token-driven component library for React applications.
Built with TypeScript, accessibility, and developer experience in mind.

---

Features

• Token-First Design — Consistent theming through design tokens
• Light & Dark Mode — Built-in theme variants out of the box
• Tree-Shakeable — Import only what you need
• TypeScript Native — First-class TypeScript support
• Zero-Runtime CSS — Powered by Vanilla Extract

Quick Start

Install Pine UI using your preferred package manager:

npm install pine-ui-kit
# or
pnpm add pine-ui-kit
# or
yarn add pine-ui-kit

Import components and start building:

import { Button, Badge, TextField, Switch } from "pine-ui-kit";
import "pine-ui-kit/style.css";

function App() {
	return (
		<div>
			<Button intent="primary" size="md">
				Get Started
			</Button>
			<Badge variant="solid" intent="success">
				New
			</Badge>
			<Switch size="md" intent="primary" />
			<TextField
				label="Email"
				placeholder="you@example.com"
				variant="outline"
			/>
		</div>
	);
}

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-ui-kit.git
cd pine-ui-kit
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

Documentation • GitHub • npm