AI Patterns

Create a login form using Storm UI components. Import: `import { Card, CardHeader, CardBody, CardFooter, Input, Label, Button, Separator } from '@storm-ds/ui'`. Build a Card containing: CardHeader with title "Sign In" and subtitle. CardBody with email Label+Input and password Label+Input (type="password"), spaced with gap-4. A Separator. CardFooter with a full-width Button (default variant). Example: <Card className="w-full max-w-sm"> <CardHeader> <h2 className="text-xl font-bold">Sign In</h2> <p className="text-sm text-storm-muted-foreground">Enter your credentials</p> </CardHeader> <CardBody className="space-y-4"> <div className="space-y-2"> <Label htmlFor="email">Email</Label> <Input id="email" type="email" placeholder="you@example.com" /> </div> <div className="space-y-2"> <Label htmlFor="password">Password</Label> <Input id="password" type="password" placeholder="••••••••" /> </div> </CardBody> <CardFooter> <Button className="w-full">Sign In</Button> </CardFooter> </Card>

Create a settings section using Storm UI. Import: `import { Card, CardHeader, CardBody, Label, Select, Separator, Button, Checkbox } from '@storm-ds/ui'`. Build a Card with: CardHeader titled "Settings". CardBody with labeled Select for theme preference, a Separator, Checkbox options for notifications, and a save Button. Example: <Card> <CardHeader> <h2 className="text-lg font-bold">Settings</h2> </CardHeader> <CardBody className="space-y-6"> <div className="space-y-2"> <Label htmlFor="theme">Theme</Label> <Select id="theme"> <option>System</option> <option>Light</option> <option>Dark</option> </Select> </div> <Separator /> <div className="space-y-3"> <p className="text-sm font-medium">Notifications</p> <div className="flex items-center gap-2"> <Checkbox id="email-notif" defaultChecked /> <Label htmlFor="email-notif">Email notifications</Label> </div> <div className="flex items-center gap-2"> <Checkbox id="push-notif" /> <Label htmlFor="push-notif">Push notifications</Label> </div> </div> <Separator /> <Button>Save Changes</Button> </CardBody> </Card>

Create a dashboard header using Storm UI. Import: `import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, Avatar, Badge, Button, Separator, PageHeader } from '@storm-ds/ui'`. Build a header with: NavigationMenu with 3-4 links (one active), right side with Avatar and action Button. Below: a Separator, then a PageHeader with title, description, and optional badge. Example: <div className="space-y-4"> <div className="flex items-center justify-between"> <NavigationMenu> <NavigationMenuItem> <NavigationMenuLink href="#" active>Dashboard</NavigationMenuLink> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuLink href="#">Projects</NavigationMenuLink> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuLink href="#">Team</NavigationMenuLink> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuLink href="#">Settings</NavigationMenuLink> </NavigationMenuItem> </NavigationMenu> <div className="flex items-center gap-3"> <Button variant="outline" size="sm">New Project</Button> <Avatar fallback="JD" size="sm" /> </div> </div> <Separator /> <PageHeader title="Dashboard" description="Overview of your projects and recent activity." badge={<Badge variant="secondary">Pro</Badge>} /> </div>

Create a data list with pagination using Storm UI. Import: `import { Card, CardBody, Avatar, Badge, Separator, Pagination, PaginationItem, PaginationPrevious, PaginationNext } from '@storm-ds/ui'`. Build a list of Card items, each with Avatar, title, description, and Badge. Below the list: Pagination with numbered items. Example: <div className="space-y-3"> <Card> <CardBody> <div className="flex items-center gap-3"> <Avatar fallback="AB" size="sm" /> <div className="flex-1 min-w-0"> <p className="text-sm font-medium">Alice Brown</p> <p className="text-xs text-storm-muted-foreground">alice@example.com</p> </div> <Badge variant="default">Active</Badge> </div> </CardBody> </Card> <Card> <CardBody> <div className="flex items-center gap-3"> <Avatar fallback="CD" size="sm" /> <div className="flex-1 min-w-0"> <p className="text-sm font-medium">Charlie Davis</p> <p className="text-xs text-storm-muted-foreground">charlie@example.com</p> </div> <Badge variant="secondary">Pending</Badge> </div> </CardBody> </Card> <Separator /> <div className="flex justify-center"> <Pagination> <PaginationPrevious /> <PaginationItem active>1</PaginationItem> <PaginationItem>2</PaginationItem> <PaginationItem>3</PaginationItem> <PaginationNext /> </Pagination> </div> </div>

Create a feedback dialog using Storm UI. Import: `import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, Button, Label, Textarea, RadioGroup, RadioGroupItem } from '@storm-ds/ui'`. Requires 'use client' with useRef for dialog control. Build a Dialog with: DialogHeader titled "Send Feedback". A RadioGroup for feedback type (Bug, Feature, Other). A Textarea for details. DialogFooter with Cancel and Submit buttons. Example: 'use client' import { useRef } from 'react' function FeedbackDialog() { const ref = useRef<HTMLDialogElement>(null) return ( <> <Button onClick={() => ref.current?.showModal()}>Feedback</Button> <Dialog ref={ref}> <DialogContent> <DialogHeader> <DialogTitle>Send Feedback</DialogTitle> </DialogHeader> <div className="space-y-4 py-4"> <RadioGroup> <div className="flex items-center gap-2"> <RadioGroupItem name="type" value="bug" id="bug" defaultChecked /> <Label htmlFor="bug">Bug Report</Label> </div> <div className="flex items-center gap-2"> <RadioGroupItem name="type" value="feature" id="feature" /> <Label htmlFor="feature">Feature Request</Label> </div> <div className="flex items-center gap-2"> <RadioGroupItem name="type" value="other" id="other" /> <Label htmlFor="other">Other</Label> </div> </RadioGroup> <div className="space-y-2"> <Label htmlFor="details">Details</Label> <Textarea id="details" placeholder="Tell us more..." /> </div> </div> <DialogFooter> <Button variant="outline" onClick={() => ref.current?.close()}>Cancel</Button> <Button>Submit</Button> </DialogFooter> </DialogContent> </Dialog> </> ) }

Create an alert banner stack using Storm UI. Import: `import { Alert, AlertTitle, Button, Badge } from '@storm-ds/ui'`. Build a vertical stack of Alert components showing different states: a default info alert, a secondary update alert with Badge, and a destructive error alert with retry Button. Example: <div className="space-y-3"> <Alert> <AlertTitle>Welcome!</AlertTitle> Your account has been created. Check your email to verify. </Alert> <Alert variant="secondary"> <AlertTitle>Update Available <Badge variant="secondary" className="ml-2">v2.1</Badge></AlertTitle> A new version of Storm UI is available. </Alert> <Alert variant="destructive"> <AlertTitle>Connection Lost</AlertTitle> <div className="flex items-center justify-between"> <span>Unable to reach the server.</span> <Button size="sm" variant="destructive">Retry</Button> </div> </Alert> </div>

Create a pricing table using Storm UI. Import: `import { Card, CardHeader, CardBody, CardFooter, Badge, Button, Separator, Tabs, TabsList, TabsTrigger, TabsContent } from '@storm-ds/ui'`. Requires 'use client' for Tabs. Use Tabs with "monthly"/"yearly" to toggle billing. Show 3 plan Cards side-by-side: Free, Pro (highlighted with Badge "Popular"), and Enterprise. Each Card has: CardHeader with plan name and price, CardBody with a feature list using checkmarks, CardFooter with a CTA Button. Example: <Tabs defaultValue="monthly"> <div className="flex justify-center mb-6"> <TabsList> <TabsTrigger value="monthly">Monthly</TabsTrigger> <TabsTrigger value="yearly">Yearly</TabsTrigger> </TabsList> </div> <TabsContent value="monthly"> <div className="grid grid-cols-3 gap-4"> <Card> <CardHeader> <p className="text-sm font-medium text-storm-muted-foreground">Free</p> <p className="text-3xl font-bold">$0<span className="text-sm font-normal text-storm-muted-foreground">/mo</span></p> </CardHeader> <CardBody className="space-y-3"> <p className="text-sm">✓ 3 projects</p> <p className="text-sm">✓ 1 GB storage</p> <p className="text-sm">✓ Community support</p> </CardBody> <CardFooter> <Button variant="outline" className="w-full">Get Started</Button> </CardFooter> </Card> <Card className="border-storm-primary"> <CardHeader> <div className="flex items-center justify-between"> <p className="text-sm font-medium text-storm-muted-foreground">Pro</p> <Badge>Popular</Badge> </div> <p className="text-3xl font-bold">$19<span className="text-sm font-normal text-storm-muted-foreground">/mo</span></p> </CardHeader> <CardBody className="space-y-3"> <p className="text-sm">✓ Unlimited projects</p> <p className="text-sm">✓ 100 GB storage</p> <p className="text-sm">✓ Priority support</p> <p className="text-sm">✓ Advanced analytics</p> </CardBody> <CardFooter> <Button className="w-full">Upgrade to Pro</Button> </CardFooter> </Card> <Card> <CardHeader> <p className="text-sm font-medium text-storm-muted-foreground">Enterprise</p> <p className="text-3xl font-bold">$49<span className="text-sm font-normal text-storm-muted-foreground">/mo</span></p> </CardHeader> <CardBody className="space-y-3"> <p className="text-sm">✓ Everything in Pro</p> <p className="text-sm">✓ Unlimited storage</p> <p className="text-sm">✓ Dedicated support</p> <p className="text-sm">✓ SSO & audit logs</p> </CardBody> <CardFooter> <Button variant="outline" className="w-full">Contact Sales</Button> </CardFooter> </Card> </div> </TabsContent> </Tabs>

Create a user profile card using Storm UI. Import: `import { Card, CardBody, Avatar, Badge, Button, Separator, Progress, Tabs, TabsList, TabsTrigger, TabsContent } from '@storm-ds/ui'`. Requires 'use client' for Tabs. Build a Card with: top section showing Avatar, name, role Badge, and edit Button. Below: Tabs with Overview (profile completion Progress + stats) and Activity sections. Example: <Card className="w-full max-w-md"> <CardBody className="space-y-6"> <div className="flex items-center gap-4"> <Avatar fallback="SM" size="lg" /> <div className="flex-1 min-w-0"> <div className="flex items-center gap-2"> <h3 className="text-lg font-bold">Sarah Miller</h3> <Badge variant="secondary">Admin</Badge> </div> <p className="text-sm text-storm-muted-foreground">sarah@example.com</p> </div> <Button variant="outline" size="sm">Edit</Button> </div> <Separator /> <Tabs defaultValue="overview"> <TabsList fullWidth> <TabsTrigger value="overview">Overview</TabsTrigger> <TabsTrigger value="activity">Activity</TabsTrigger> </TabsList> <TabsContent value="overview"> <div className="space-y-4 pt-4"> <div> <div className="flex justify-between text-sm mb-2"> <span className="text-storm-muted-foreground">Profile completion</span> <span className="font-medium">75%</span> </div> <Progress value={75} /> </div> <div className="grid grid-cols-3 gap-4 text-center"> <div> <p className="text-lg font-bold">12</p> <p className="text-xs text-storm-muted-foreground">Projects</p> </div> <div> <p className="text-lg font-bold">48</p> <p className="text-xs text-storm-muted-foreground">Tasks</p> </div> <div> <p className="text-lg font-bold">8</p> <p className="text-xs text-storm-muted-foreground">Teams</p> </div> </div> </div> </TabsContent> <TabsContent value="activity"> <div className="space-y-3 pt-4"> <div className="flex items-center gap-2 text-sm"> <div className="h-2 w-2 rounded-full bg-storm-primary" /> <span>Deployed v2.1 to production</span> <span className="ml-auto text-storm-muted-foreground">2h ago</span> </div> <div className="flex items-center gap-2 text-sm"> <div className="h-2 w-2 rounded-full bg-storm-muted-foreground" /> <span>Updated project settings</span> <span className="ml-auto text-storm-muted-foreground">5h ago</span> </div> <div className="flex items-center gap-2 text-sm"> <div className="h-2 w-2 rounded-full bg-storm-muted-foreground" /> <span>Added 3 team members</span> <span className="ml-auto text-storm-muted-foreground">1d ago</span> </div> </div> </TabsContent> </Tabs> </CardBody> </Card>

Create a data table using Storm UI. Import: `import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, Avatar, Badge, Button } from '@storm-ds/ui'`. Build a Table with: TableHeader with column names (User, Status, Role, Actions). TableBody with rows containing Avatar + name, a status Badge, a role label, and an action Button. Example: <Table> <TableHeader> <TableRow> <TableHead>User</TableHead> <TableHead>Status</TableHead> <TableHead>Role</TableHead> <TableHead className="text-right">Actions</TableHead> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell> <div className="flex items-center gap-3"> <Avatar fallback="AB" size="sm" /> <div> <p className="text-sm font-medium">Alice Brown</p> <p className="text-xs text-storm-muted-foreground">alice@example.com</p> </div> </div> </TableCell> <TableCell><Badge>Active</Badge></TableCell> <TableCell className="text-sm text-storm-muted-foreground">Developer</TableCell> <TableCell className="text-right"> <Button variant="ghost" size="sm">Edit</Button> </TableCell> </TableRow> <TableRow> <TableCell> <div className="flex items-center gap-3"> <Avatar fallback="JD" size="sm" /> <div> <p className="text-sm font-medium">John Doe</p> <p className="text-xs text-storm-muted-foreground">john@example.com</p> </div> </div> </TableCell> <TableCell><Badge variant="secondary">Pending</Badge></TableCell> <TableCell className="text-sm text-storm-muted-foreground">Designer</TableCell> <TableCell className="text-right"> <Button variant="ghost" size="sm">Edit</Button> </TableCell> </TableRow> <TableRow> <TableCell> <div className="flex items-center gap-3"> <Avatar fallback="EW" size="sm" /> <div> <p className="text-sm font-medium">Emma Wilson</p> <p className="text-xs text-storm-muted-foreground">emma@example.com</p> </div> </div> </TableCell> <TableCell><Badge variant="destructive">Inactive</Badge></TableCell> <TableCell className="text-sm text-storm-muted-foreground">Manager</TableCell> <TableCell className="text-right"> <Button variant="ghost" size="sm">Edit</Button> </TableCell> </TableRow> </TableBody> </Table>

Create a command palette using Storm UI. Import: `import { Command, CommandInput, CommandList, CommandGroup, CommandItem, CommandSeparator, CommandShortcut } from '@storm-ds/ui'`. Build a Command with: CommandInput for search. CommandList with CommandGroups for pages, actions, and settings. Each CommandItem with a label and optional CommandShortcut. Example: <Command className="w-full max-w-md"> <CommandInput placeholder="Type a command or search..." /> <CommandList> <CommandGroup heading="Pages"> <CommandItem>Dashboard<CommandShortcut>⌘D</CommandShortcut></CommandItem> <CommandItem>Projects<CommandShortcut>⌘P</CommandShortcut></CommandItem> <CommandItem>Settings<CommandShortcut>⌘S</CommandShortcut></CommandItem> </CommandGroup> <CommandSeparator /> <CommandGroup heading="Actions"> <CommandItem>Create new project<CommandShortcut>⌘N</CommandShortcut></CommandItem> <CommandItem>Invite team member</CommandItem> <CommandItem>Generate report</CommandItem> </CommandGroup> <CommandSeparator /> <CommandGroup heading="Theme"> <CommandItem>Light mode</CommandItem> <CommandItem>Dark mode</CommandItem> <CommandItem>System</CommandItem> </CommandGroup> </CommandList> </Command>

Create a metric dashboard using Storm UI. Import: `import { MetricCard, Card, CardHeader, CardBody, Progress, Badge, Separator } from '@storm-ds/ui'`. Build a grid of MetricCards showing key stats with change indicators. Below: a Card with labeled Progress bars for goals. Example: <div className="space-y-6"> <div className="grid grid-cols-2 gap-4"> <MetricCard label="Total Revenue" value="$48,295" change="+12.5%" changeLabel="vs last month" /> <MetricCard label="Active Users" value="2,847" change="+8.2%" changeLabel="vs last month" /> <MetricCard label="Conversion Rate" value="3.6%" change="+0.4%" changeLabel="vs last month" /> <MetricCard label="Churn Rate" value="1.2%" change="-0.3%" changeLabel="vs last month" /> </div> <Card> <CardHeader> <div className="flex items-center justify-between"> <h3 className="text-sm font-medium">Quarterly Goals</h3> <Badge variant="secondary">Q1 2026</Badge> </div> </CardHeader> <CardBody className="space-y-4"> <div> <div className="flex justify-between text-sm mb-2"> <span className="text-storm-muted-foreground">Revenue target</span> <span className="font-medium">$48k / $60k</span> </div> <Progress value={80} /> </div> <Separator /> <div> <div className="flex justify-between text-sm mb-2"> <span className="text-storm-muted-foreground">New users</span> <span className="font-medium">2,847 / 5,000</span> </div> <Progress value={57} variant="secondary" /> </div> <Separator /> <div> <div className="flex justify-between text-sm mb-2"> <span className="text-storm-muted-foreground">Customer satisfaction</span> <span className="font-medium">92%</span> </div> <Progress value={92} variant="success" /> </div> </CardBody> </Card> </div>