Introduction

A portable, mobile-first component library built on shadcn patterns with Polkadot branding. Copy the components/ folder into your project and start building.

Getting Started

Copy the components folder

cp -r src/components/{ui,lib,styles} your-project/src/components/

Import the CSS variables

// In your root layout or globals.css
import './components/styles/globals.css'

Add the Tailwind preset

// tailwind.config.js
module.exports = {
  presets: [require('./src/components/styles/tailwind-preset')],
  // ...
}

Install dependencies

npm install clsx tailwind-merge class-variance-authority lucide-react @radix-ui/react-{slot,dialog,popover,select,switch,toggle,tabs,tooltip,dropdown-menu,avatar,label,separator}

What's Included

20 components ready to use. Click any to see examples and props.

Button Input Textarea Label Badge Card Separator Switch Toggle Alert Skeleton Avatar Dialog Popover Select Tabs Tooltip Icon Box Search Bar Dropdown Menu

Portability

The portable deliverable is everything inside src/components/:

src/components/
  ui/           # All component files
  lib/
    utils.ts    # cn() utility
  styles/
    globals.css          # CSS variables (light + dark themes)
    tailwind-preset.js   # Tailwind preset: colors, typography, shadows, animations

Components use @/components/lib/utils internally. Adjust your tsconfig paths or do a find-replace if your alias differs.

Customization

Since you own the source files, customize anything directly. Change CSS variables in globals.css for theme-wide changes, add new variants in the CVA configs, or override styles via className props. Every component forwards className and uses tailwind-merge so your overrides always win.