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="[email protected]"
				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