Components

16 design-system components. Every one is a real, copy-pasteable React component built on Radix primitives and your JSN UI tokens.

Button

Variants
import { Button } from "@/components/ui/button";

<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="link">Link</Button>
Sizes
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon"><Settings size={16} /></Button>

Card

Basic card with header, content, and footer
JSN UI
Beautiful. Fast. Yours.

A premium React UI kit for Next.js — built for the AI era.

import {
  Card, CardHeader, CardTitle, CardDescription,
  CardContent, CardFooter,
} from "@/components/ui/card";

<Card>
  <CardHeader>
    <CardTitle>JSN UI</CardTitle>
    <CardDescription>Beautiful. Fast. Yours.</CardDescription>
  </CardHeader>
  <CardContent>...</CardContent>
  <CardFooter>...</CardFooter>
</Card>

Input & Label

Labeled input with placeholder
<div className="grid gap-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="you@jsn-ui.dev" />
</div>

Badge, Avatar, Separator

Badges
DefaultSecondaryOutlineDestructiveSuccessWarning
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
Avatar with fallback
JSAI
<Avatar>
  <AvatarFallback>JS</AvatarFallback>
</Avatar>
Separator
Home
Docs
Blog
<Separator orientation="vertical" className="h-4" />

Dialog

Modal with header, content, footer
<Dialog>
  <DialogTrigger asChild>
    <Button>Open dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Deploy to production?</DialogTitle>
      <DialogDescription>...</DialogDescription>
    </DialogHeader>
    <DialogFooter>...</DialogFooter>
  </DialogContent>
</Dialog>

Tabs

Underlined tab list
A high-level snapshot of your project.
<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">...</TabsContent>
</Tabs>

Tooltip, Popover, Select

Tooltip on hover
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild><Button>Hover me</Button></TooltipTrigger>
    <TooltipContent>JSN UI is great</TooltipContent>
  </Tooltip>
</TooltipProvider>
Popover
<Popover>
  <PopoverTrigger asChild><Button>Open popover</Button></PopoverTrigger>
  <PopoverContent>...</PopoverContent>
</Popover>
Select
<Select>
  <SelectTrigger><SelectValue placeholder="..." /></SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
  </SelectContent>
</Select>

Switch & Slider

Switch (toggle)
<div className="flex items-center gap-3">
  <Switch id="airplane" />
  <Label htmlFor="airplane">Airplane mode</Label>
</div>
Slider
<Slider defaultValue={[60]} max={100} step={1} />