Skip to content
v0.1 - Open Source

The design system indie devs actually want.

63 components, 6 charts, 17 blocks, 326 icons. Ship fast with a recognizable identity - clean borders, zero shadows, dark mode built-in.

Preview

Storm UI in action

Real patterns built with real components. Every card below uses only Storm UI.

Create Account

Analytics

Users

2,847

+12.5%

Revenue

$18.2k

+8.1%

Conversion

3.24%

-0.4%

Organic68%
Referral24%
Direct8%

Team

SCMRAT+2

Storm Contributors

5 members

Deployments

Production
Live
Staging
Building
Preview
Failed

Notifications

Push
Email
Chat

Activity

4
SC

Sarah C. pushed to main

2m ago
MR

Marc R. opened PR #142

14m ago
AT

Alex T. reviewed PR #139

1h ago
JD

Julie D. deployed v0.1.4

3h ago

Tasks

2/4

Storage

7.2 / 10 GB
Documents
4.2 GB
Photos
2.1 GB
Backups
890 MB

Quick Actions

Plan

Free
API calls842 / 1k
Storage2.1 / 5 GB
Why Storm?

Built different, on purpose

Built by indie developers who got tired of every app looking the same.

Recognizable Identity

7 button variants, clean borders, no shadows, consistent radius. 63 components that stand out from every generic UI kit.

Zero Runtime Dependencies

Just React and Tailwind CSS. No Radix, no Headless UI, no bloat. Ship what you need, nothing more.

Next.js First

Server Components by default. Minimal 'use client' usage. Built for App Router from day one.

AI-First Documentation

6 AI patterns + 63 component prompts. Feed them to Claude, GPT, or Cursor and get correct code instantly.

Dark Mode Built-in

CSS variables auto-switch with .dark class. No extra config, no flash of wrong theme, just works.

Fully Customizable

Override any CSS variable - colors, radius, border-width, spacing. Your brand identity, Storm's component structure.

Developer Experience

Simple by design

No complex setup. No provider wrappers. No configuration files. Import and use - it just works.

Server Components by default
Tailwind CSS - no CSS-in-JS runtime
forwardRef on every component
className overrides via tailwind-merge
TypeScript with proper generics
page.tsx
import { Button, Input, Label, Alert } from '@storm-ds/ui'
import { ArrowRight } from '@storm-ds/icons'

export default function Page() {
  return (
    <form>
      <Label required>Email</Label>
      <Input type="email" error={!valid} />
      <Button loading={submitting}>
        Submit <ArrowRight />
      </Button>
    </form>
  )
}
Example prompt
Copy

Create a login form using Storm UI with loading and error states. Import Card, Input, Label, Button from storm-ui.

Use Label required for required fields, Input error for validation, Button loading during submit. Server component compatible.

AI-First

AI-first documentation

Every component comes with a structured AI prompt. Copy it, paste it into Claude, GPT, or Cursor - and get correct Storm UI code on the first try.

No more hallucinated props. No more wrong imports. 6 AI patterns and 63 component prompts include the exact API, variants, sizes, and working examples.

Beyond Components

Blocks, Charts, and more

Pre-built page templates and data visualizations to ship even faster.

17

Page Blocks

Dashboard, sidebar, login, signup, settings, data table.

MonWedFriSun

6

Chart Types

Area, bar, line, pie, radar, radial charts with Storm theming.

326

Icons

Clean 24px stroke icons. Tree-shakeable, uses currentColor.

Theming

Light and dark, out of the box

Every component adapts automatically. One CSS class toggles the entire theme - no extra config, no flash.

Light

Create Account

Enter your email to get started.

ActiveDraftv0.1New
Dark mode built-in, zero config
Dark

Create Account

Enter your email to get started.

ActiveDraftv0.1New
Dark mode built-in, zero config

Toggle with .dark class - CSS variables handle the rest.

Quick Start

Up and running in 3 steps

No providers, no wrappers, no config files. Just install and use.

Step 1

Install

Add Storm UI and Storm Icons to your project.

$pnpm add @storm-ds/ui @storm-ds/icons
Step 2

Configure

Add the Storm plugin to your Tailwind config.

$require('@storm-ds/ui/plugin')
Step 3

Use

Import components and start building.

$import { Button } from '@storm-ds/ui'

Ready to build something different?

Get started in under 5 minutes. 63 components, 6 charts, 17 blocks, 326 icons, dark mode, AI prompts - everything you need to ship.