Docs/Getting Started

Getting Started

Get from zero to first component in under 5 minutes.

1. Install Storm UI

pnpm add @storm-ds/ui @storm-ds/icons

2. Add the Tailwind Plugin

Storm UI uses a Tailwind CSS plugin that injects design tokens (colors, spacing, border radius) as CSS variables.

1// tailwind.config.js
2const path = require('path')
3const stormPlugin = require('@storm-ds/ui/plugin')
4
5module.exports = {
6  content: [
7    './app/**/*.{js,ts,jsx,tsx}',
8    path.join(
9      path.dirname(require.resolve('@storm-ds/ui')),
10      '**/*.{js,ts,jsx,tsx}'
11    ),
12  ],
13  plugins: [stormPlugin],
14}

3. Use Your First Component

tsx

1// app/page.tsx
2import { Button } from '@storm-ds/ui'
3import { ArrowRight } from '@storm-ds/icons'
4
5export default function Page() {
6  return (
7    <Button>
8      Get Started
9      <ArrowRight className="w-4 h-4 ml-2" />
10    </Button>
11  )
12}

Result:

4. Dark Mode

Add the dark class to your html element. All Storm tokens automatically switch to dark values.

html

1<html class="dark">
2  <!-- All Storm components now use dark theme -->
3</html>

5. Customize with className

Every Storm component accepts className. Your overrides always win thanks to tailwind-merge.

tsx

1<Button className="bg-green-600 hover:bg-green-700">
2  Custom Color
3</Button>

Result:

You're ready!

Browse the component docs in the sidebar to see all 63 components with live examples and copy-paste code.

Introduction

Components