Grafspee v2.0

Build faster with 60+ components

A complete UI toolkit with live examples, code snippets, and production-ready components. Perfect for building modern web applications.

Get Started View on GitHub

Component Showcase

Explore all 60+ components with live examples and copy-paste code snippets

Button

Reusable button component with multiple variants, sizes, and states.

Live Example

Interactive button variants

Code Example

Button Examples

import { Button } from "@/components/ui/button"
 
// Variants
<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</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"><Star className="h-4 w-4" /></Button>

Button Group

Group multiple buttons together horizontally or vertically.

Live Example

Button group variants

Horizontal group

With icons

With separator

Code Example

Button Group Examples

import { ButtonGroup, ButtonGroupSeparator } from "@/components/ui/button-group"
import { Button } from "@/components/ui/button"
 
// Basic group
<ButtonGroup>
  <Button variant="outline">Left</Button>
  <Button variant="outline">Center</Button>
  <Button variant="outline">Right</Button>
</ButtonGroup>
 
// With separator
<ButtonGroup>
  <Button variant="outline">Save</Button>
  <ButtonGroupSeparator />
  <Button variant="outline">Cancel</Button>
</ButtonGroup>

Badge

Small status indicators and labels.

Live Example

Badge variants and styles

DefaultSecondaryDestructiveOutline

SuccessWarningInfo

Code Example

Badge Examples

import { Badge } from "@/components/ui/badge"
 
// Variants
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
 
// Custom colors
<Badge className="bg-green-500">Success</Badge>

Input

Form input component with various types and states.

Live Example

Input variants

Default

Password

Disabled

Code Example

Input Examples

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
 
// Basic input
<Label htmlFor="input">Label</Label>
<Input id="input" placeholder="Enter text..." />
 
// Input types
<Input type="email" placeholder="Email" />
<Input type="password" placeholder="Password" />
 
// States
<Input disabled placeholder="Disabled" />

Input Group

Group inputs with addons and buttons.

Live Example

Input group variations

With left addon

With right button

Code Example

Input Group Examples

import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupButton } from "@/components/ui/input-group"
 
// With icon
<InputGroup>
  <InputGroupAddon align="inline-start">
    <Search className="h-4 w-4" />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search..." />
</InputGroup>
 
// With button
<InputGroup>
  <InputGroupInput placeholder="Enter code" />
  <InputGroupAddon align="inline-end">
    <InputGroupButton>Verify</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Input OTP

One-time password input component.

Live Example

OTP input

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Code Example

Input OTP Examples

import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@/components/ui/input-otp"
 
<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

Textarea

Multi-line text input field.

Live Example

Textarea variations

Bio

Disabled

Code Example

Textarea Examples

import { Textarea } from "@/components/ui/textarea"
 
// Basic textarea
<Textarea placeholder="Enter text..." />
 
// Disabled
<Textarea disabled placeholder="Disabled" />

Select

Dropdown selection component.

Live Example

Select dropdown

Framework

Disabled

Code Example

Select Examples

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="1">Option 1</SelectItem>
    <SelectItem value="2">Option 2</SelectItem>
  </SelectContent>
</Select>

Checkbox

Checkbox for multiple selections.

Live Example

Checkbox states

Accept terms

Subscribe to newsletter

Disabled option

Code Example

Checkbox Examples

import { Checkbox } from "@/components/ui/checkbox"
 
// Basic checkbox
<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms</Label>
 
// Checked by default
<Checkbox id="default" defaultChecked />
 
// Disabled
<Checkbox id="disabled" disabled />

Radio Group

Radio buttons for single selection.

Live Example

Radio group options

Option 1

Option 2

Code Example

Radio Group Examples

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 
<RadioGroup defaultValue="option1">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option1" id="option1" />
    <Label htmlFor="option1">Option 1</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option2" id="option2" />
    <Label htmlFor="option2">Option 2</Label>
  </div>
</RadioGroup>

Switch

Toggle switch for binary settings.

Live Example

Switch states

Airplane Mode

Enable Notifications

Disabled

Code Example

Switch Examples

import { Switch } from "@/components/ui/switch"
 
// Basic switch
<Switch id="option" />
<Label htmlFor="option">Option Label</Label>
 
// Checked by default
<Switch id="default" defaultChecked />
 
// Disabled
<Switch id="disabled" disabled />

Slider

Range slider for numeric input.

Live Example

Slider variations

Single slider50%

Range slider

Code Example

Slider Examples

import { Slider } from "@/components/ui/slider"
 
// Single value
<Slider defaultValue={[50]} max={100} step={1} />
 
// Range (two handles)
<Slider defaultValue={[25, 75]} max={100} step={1} />

Progress

Show progress indicators.

Live Example

Progress bar

Loading...45%

Uploading75%

Code Example

Progress Examples

import { Progress } from "@/components/ui/progress"
 
// Determinate
<Progress value={45} />
 
// Custom color
<Progress value={75} className="[&>div]:bg-green-500" />

Tabs

Organize content into separate views.

Live Example

Tabbed interface

Account settings go here.

Name

Code Example

Tabs Examples

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content 1</TabsContent>
  <TabsContent value="tab2">Content 2</TabsContent>
</Tabs>

Accordion

Collapsible content sections.

Live Example

Accordion component

Code Example

Accordion Examples

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
 
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Question?</AccordionTrigger>
    <AccordionContent>Answer.</AccordionContent>
  </AccordionItem>
</Accordion>

Card

Container for grouping related content.

Live Example

Card variations

Simple Card

Basic card with content

This is a basic card with some content.

Featured Card

Primary color scheme

This card uses the primary color.

Code Example

Card Examples

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
 
<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>Content</CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Alert

Display important messages and feedback.

Live Example

Alert variants

Information

This is an informational alert.

Error

Something went wrong. Please try again.

Success

Your changes have been saved.

Code Example

Alert Examples

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 
// Default alert
<Alert>
  <Info className="h-4 w-4" />
  <AlertTitle>Title</AlertTitle>
  <AlertDescription>Description</AlertDescription>
</Alert>
 
// Destructive variant
<Alert variant="destructive">
  <AlertTriangle className="h-4 w-4" />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Error message</AlertDescription>
</Alert>

Dialog

Modal dialog for user interactions.

Live Example

Dialog components

Code Example

Dialog Examples

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
 
<Dialog>
  <DialogTrigger asChild>
    <Button>Open</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description</DialogDescription>
    </DialogHeader>
    <div>Content</div>
  </DialogContent>
</Dialog>

Dropdown Menu

Accessible dropdown menu component.

Live Example

Dropdown menu

Code Example

Dropdown Menu Examples

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Open</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Label</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Item 1</DropdownMenuItem>
    <DropdownMenuItem>Item 2</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Tooltip

Display informative tooltips on hover.

Live Example

Tooltip placements

Code Example

Tooltip Examples

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button>Hover</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Tooltip content</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Popover

Floating card with content.

Live Example

Popover component

Code Example

Popover Examples

import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 
<Popover>
  <PopoverTrigger asChild>
    <Button>Open</Button>
  </PopoverTrigger>
  <PopoverContent>
    <div>Content goes here</div>
  </PopoverContent>
</Popover>

Hover Card

Preview content on hover.

Live Example

Hover card

Code Example

Hover Card Examples

import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"
 
<HoverCard>
  <HoverCardTrigger asChild>
    <Button>Hover</Button>
  </HoverCardTrigger>
  <HoverCardContent>
    <div>Preview content</div>
  </HoverCardContent>
</HoverCard>

Table

Display tabular data.

Live Example

Data table

Recent invoices
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00

Code Example

Table Examples

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Header</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Cell</TableCell>
    </TableRow>
  </TableBody>
</Table>

Pagination

Navigate through pages.

Live Example

Pagination component

Code Example

Pagination Examples

import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination"
 
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Avatar

User avatar with fallback.

Live Example

Avatar variations

CNJDAB

Code Example

Avatar Examples

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 
// With image
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>
 
// Fallback only
<Avatar>
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Breadcrumb

Navigation breadcrumb trail.

Live Example

Breadcrumb navigation

Code Example

Breadcrumb Examples

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
 
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Calendar

Date picker calendar.

Live Example

Calendar component

Code Example

Calendar Examples

import { Calendar } from "@/components/ui/calendar"
import { useState } from "react"
 
const [date, setDate] = useState<Date>()
 
<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-md border"
/>

Scroll Area

Custom scrollable area.

Live Example

Scrollable container

Item 1: Lorem ipsum dolor sit amet

Item 2: Lorem ipsum dolor sit amet

Item 3: Lorem ipsum dolor sit amet

Item 4: Lorem ipsum dolor sit amet

Item 5: Lorem ipsum dolor sit amet

Item 6: Lorem ipsum dolor sit amet

Item 7: Lorem ipsum dolor sit amet

Item 8: Lorem ipsum dolor sit amet

Item 9: Lorem ipsum dolor sit amet

Item 10: Lorem ipsum dolor sit amet

Code Example

Scroll Area Examples

import { ScrollArea } from "@/components/ui/scroll-area"
 
<ScrollArea className="h-[200px] w-full rounded-md border p-4">
  <div className="space-y-4">
    {items.map((item) => (
      <div key={item.id}>{item.content}</div>
    ))}
  </div>
</ScrollArea>

Separator

Visual divider between elements.

Live Example

Separator variants

Horizontal separator:

Left

Right

Code Example

Separator Examples

import { Separator } from "@/components/ui/separator"
 
// Horizontal
<Separator />
 
// Vertical
<Separator orientation="vertical" />

Skeleton

Loading placeholder animations.

Live Example

Skeleton loading

Code Example

Skeleton Examples

import { Skeleton } from "@/components/ui/skeleton"
 
// Avatar skeleton
<div className="flex items-center space-x-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>
 
// Text skeleton
<Skeleton className="h-4 w-full" />

Toggle

Two-state button for on/off actions.

Live Example

Toggle button

Code Example

Toggle Examples

import { Toggle } from "@/components/ui/toggle"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 
// Basic toggle
<Toggle aria-label="Toggle">
  <Bell className="h-4 w-4" />
</Toggle>
 
// Toggle group
<ToggleGroup type="multiple">
  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
</ToggleGroup>

KBD

Keyboard key indicator.

Live Example

Keyboard shortcuts

⌘⌥⇧

⌘KCtrl+C

Code Example

KBD Examples

import { Kbd, KbdGroup } from "@/components/ui/kbd"
 
// Single key
<Kbd>⌘</Kbd>
 
// Key combination
<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Empty State

Display when no data is available.

Live Example

Empty state variants

No messages

You don't have any messages yet.

Failed to load

There was an error loading the data.

Code Example

Empty State Examples

import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyMedia } from "@/components/ui/empty"
import { ErrorState } from "@/components/ui/error-state"
 
// Empty state
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Inbox className="h-6 w-6" />
    </EmptyMedia>
    <EmptyTitle>No data</EmptyTitle>
    <EmptyDescription>Description</EmptyDescription>
  </EmptyHeader>
</Empty>
 
// Error state
<ErrorState
  title="Error"
  description="Description"
  action={{ label: "Retry", onClick: handleRetry }}
/>

Search Bar

Search input with debounce and clear.

Live Example

Search component

Code Example

Search Bar Examples

import { SearchBar } from "@/components/ui/search-bar"
 
<SearchBar 
  placeholder="Search..."
  onSearch={(value) => console.log(value)}
  showClearButton
/>

Copy Button

Button with copy to clipboard functionality.

Live Example

Copy button

npm install my-package

Code Example

Copy Button Examples

import { CopyButton } from "@/components/ui/copy-button"
 
<CopyButton text="Text to copy" />

Sheet

Side panel that slides in.

Live Example

Sheet component

Code Example

Sheet Examples

import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
 
<Sheet>
  <SheetTrigger asChild>
    <Button>Open</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Title</SheetTitle>
      <SheetDescription>Description</SheetDescription>
    </SheetHeader>
    <div>Content</div>
  </SheetContent>
</Sheet>

Carousel

Image/card carousel.

Live Example

Carousel

Code Example

Carousel Examples

import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
 
<Carousel>
  <CarouselContent>
    {items.map((item) => (
      <CarouselItem key={item.id}>
        <div>{item.content}</div>
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Toast

Temporary notification messages.

Live Example

Toast notifications

Code Example

Toast Examples

import { toast } from "sonner"
 
// Basic toast
toast("Message")
 
// Success toast
toast.success("Success!")
 
// Error toast
toast.error("Error!")

Code Block

Syntax highlighted code display.

Live Example

Code block with copy

example.js

1function hello() {
2  console.log("Hello, world!");
3}

Code Example

Code Block Usage

import { CodeBlock } from "@/components/ui/code-block"
 
<CodeBlock
  code={code}
  language="javascript"
  title="example.js"
  showLineNumbers
/>

Build faster with 60+ components

Component Showcase

Command Palette

Button

Code Example

Button Group

Code Example

Badge

Code Example

Input

Code Example

Input Group

Code Example

Input OTP

Code Example

Textarea

Code Example

Select

Code Example

Checkbox

Code Example

Radio Group

Code Example

Switch

Code Example

Slider

Code Example

Progress

Code Example

Tabs

Code Example

Accordion

What is this template?

How do I customize it?

Code Example

Card

Code Example

Alert

Code Example

Dialog

Code Example

Dropdown Menu

Code Example

Tooltip

Code Example

Popover

Code Example

Hover Card

Code Example

Table

Code Example

Pagination

Code Example

Avatar

Code Example

Breadcrumb

Code Example

Calendar

Code Example

Scroll Area

Code Example

Separator

Code Example

Skeleton

Code Example

Toggle

Code Example

KBD

Code Example

Empty State

Failed to load

Code Example

Search Bar

Code Example

Copy Button

Code Example

Sheet

Code Example

Carousel

Code Example