@storm-ds/ui

Lightning-fast component library optimized for Next.js. 64 accessible, theme-aware components built with Tailwind CSS.

Documentation

Installation

npm install @storm-ds/ui
# or
pnpm add @storm-ds/ui

Peer dependencies

pnpm add react react-dom tailwindcss
# Optional — only needed for chart components
pnpm add recharts @storm-ds/icons

Setup

Add the Storm plugin to your tailwind.config.js:

module.exports = {
  darkMode: 'class',
  content: [
    // ...
    './node_modules/@storm-ds/ui/dist/**/*.{js,mjs}',
  ],
  plugins: [
    require('@storm-ds/ui/plugin').default || require('@storm-ds/ui/plugin'),
  ],
}

For Next.js, add transpilePackages in next.config.js:

module.exports = {
  transpilePackages: ['@storm-ds/ui'],
}

Usage

import { Button, Card, CardHeader, CardBody } from '@storm-ds/ui'

export default function App() {
  return (
    <Card>
      <CardHeader>Hello</CardHeader>
      <CardBody>
        <Button>Click me</Button>
      </CardBody>
    </Card>
  )
}

Charts

import { StormBarChart, StormLineChart } from '@storm-ds/ui/charts'

Requires recharts as a peer dependency.

Tailwind plugin tokens

The plugin provides semantic design tokens:

• Colors — bg-storm-primary, text-storm-foreground, border-storm-border, etc.
• Border radius — rounded-storm-sm (6px), rounded-storm-md (8px), rounded-storm-lg (12px)
• Spacing — storm-xs (4px) through storm-2xl (48px)
• Dark mode — all tokens adapt automatically with darkMode: 'class'

Exports

| Entry point | Description | |---|---| | @storm-ds/ui | All 64 components | | @storm-ds/ui/plugin | Tailwind CSS plugin (colors, radius, spacing) | | @storm-ds/ui/charts | Chart wrappers (BarChart, LineChart, AreaChart, etc.) |

Requirements

• Node >= 18
• React >= 18
• Tailwind CSS >= 3

License

MIT