Getting Started
.skin is a tiered React component library built on Radix UI primitives and Tailwind CSS. Ship faster by picking the tier that fits your project, then grow into larger tiers as your needs evolve.
What is .skin?
.skin packages 40 production-ready components into four cumulative tiers. Each tier builds on the previous one — Tier 2 includes all of Tier 1, Tier 3 includes all of Tier 2, and so on. This means you only ship the code your project actually needs, keeping your bundle lean and your dependencies predictable.
Every component is accessible by default (WCAG 2.1 AA), supports dark mode via a single CSS class, and is fully typed with TypeScript. Styling is handled by Tailwind CSS with CSS custom properties for easy theming.
Quick start
Choose your tier
Pick the package tier that matches your project scope. Start with Micro for lean bundles and upgrade as your needs grow.
Install dependencies
Install the tier package and its peer dependencies with a single npm command. All Radix UI primitives and Tailwind utilities are included.
Add the ThemeProvider
Wrap your root layout with ThemeProvider to enable theme switching and dark mode across the entire application.
Import and use components
Import any component directly from the package. All components are tree-shakeable and fully typed with TypeScript.
Understanding the tier system
Tiers are cumulative: higher tiers include everything from lower tiers plus additional components. Choose the smallest tier that covers your use case.
Basic usage
Once installed, import components directly from the package. Here's a minimal example:
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
export function MyComponent() {
return (
<Card>
<CardHeader>
<CardTitle>Hello .skin</CardTitle>
</CardHeader>
<CardContent>
<Button>Get started</Button>
</CardContent>
</Card>
)
}