Getting Started
Installation
Get StarKit up and running in your React project in under 60 seconds.
1. Install the package
terminal
npm install starkit-ui
Or with your preferred package manager:
yarn
yarn add starkit-ui
pnpm
pnpm add starkit-ui
2. Import the styles
Add the StarKit stylesheet to your app's entry point. This loads all design tokens, shared utilities, and component styles.
layout.tsx
// app/layout.tsx or main.tsx
import 'starkit-ui/styles';
3. Use components
Import and use any component. All props are fully typed with TypeScript.
MyPage.tsx
import { Button, Card, Badge, Input } from 'starkit-ui';
export function MyPage() {
return (
<Card padding="lg">
<Badge variant="success" dot>Live</Badge>
<h2>Create Account</h2>
<Input label="Email" placeholder="you@example.com" fullWidth />
<Button variant="primary" size="lg" fullWidth>
Sign Up
</Button>
</Card>
);
}
Requirements
⚛️
React ≥ 18
StarKit uses forwardRef and modern React patterns.
📘
TypeScript Ready
Full type declarations included. Zero config needed.
🎨
CSS Variables
All tokens are CSS custom properties. Easy to customize.
📦
Tree-shakeable
ESM and CJS output. Import only what you use.
Design Tokens
StarKit exposes all design decisions as CSS custom properties. Override them to customize the look without touching component internals.
tokens.css
:root {
--brut-yellow: #FFE600; /* Primary accent */
--brut-red: #FF4444; /* Danger */
--brut-blue: #0066FF; /* Info / Focus */
--brut-green: #00CC44; /* Success */
--brut-black: #000000; /* Text + borders */
--brut-white: #FFFFFF; /* Backgrounds */
--brut-shadow-md: 4px 4px 0px var(--brut-black);
--brut-border: 2px solid var(--brut-black);
--brut-radius: 0px; /* THE LAW */
}
Alternative: Use the CLI
Instead of installing the full package, you can use the StarKit CLI to copy component source code directly into your project.
Initialize all components
terminal
npx starkit-ui init
Add specific components
terminal
npx starkit-ui add Button