sigil/UI
/ Components

350+ Token-Driven Components.

Every component reads from var(--s-*) tokens. Switch presets and the entire library updates instantly — no prop drilling, no theme objects, no manual overrides.

View DocsOpen Sandbox
350+Token-Driven Components
28+13Radix + Base UI Primitives
519Design Tokens
46Presets
    361 of 361 components
    UI44 components
    Button6v
    DefaultSecondaryOutline
    Badge4v
    Input4v
    Textarea1v
    Select2v
    Checkbox2v
    Switch2v
    Slider3v
    Progress2v
    Toggle3v
    ToggleGroup2v
    KLSGR
    Avatar3v
    S
    LR
    GR
    +2
    AvatarGroup1v
    Revenue$4.2k+8%
    KPI2v
    Alert4v
    Skeleton3v
    ⣾Loading…⣾Loading…⣾Loading…
    LoadingSpinner5v
    Loading
    BrailleSpinner6v
    CircularProgress3v
    8
    NumberField1v
    Label1v
    Account
    Settings
    Plain line
    Separator2v
    Tooltip1v
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 7
    Item 8
    Item 9
    Item 10
    Item 11
    Item 12
    ScrollArea1v
    tsx
    1<Button variant="primary">
    2  Click me
    3</Button>
    CodeBlock1v
    zsh
    1$ npx @sigil-ui/cli convert
    2✓ Done in 1.2s
    Terminal1v
    ⌘K
    Kbd1v

    No results

    Try a different search term

    Empty1v
    NativeSelect1v
    Clipboard1v
    document.pdf
    2.4 MB · Uploaded today
    Item1v
    Settings3

    Token-driven content panel

    Panel3v
    Braille Spinner6v
    Favoritea11y wrapper
    Accessible Icon1v
    Segmented Control1v
    Circular Progress2v

    Heading 3

    Heading 4

    Lead paragraph text

    Muted secondary text

    inline code
    Typography10v
    Design is not just what it looks like — design is how it works.
    Blockquote1v
    Left
    Right
    ResizablePanel2v
    Preview

    Media card

    Image plus content

    MediaCard1v

    Resource

    Linked docs resource

    Open
    ResourceCard1v

    Feature

    Token-driven summary card for landing-page feature grids.

    FeatureCard1v

    Team

    For teams

    $29
    • 300+ components
    • 44 presets
    PricingCard1v
    “Token-first.”
    “Docs built in.”
    TestimonialCarousel1v
    Layout25 components

    Dashboard

    Manage settings

    Card3v
    Stack2v

    A token-driven design system.

    Accordion1v
    <Button>Click</Button>
    Tabs2v
    Hidden content is now visible. Click to collapse.
    Collapsible1v
    16 : 9
    AspectRatio1v
    Divider2v
    AboveBelow
    HRule1v
    ButtonGroup1v
    VoronoiBento1v
    Generic box
    Box1v
    max-width container
    Container3v
    Flex1v
    1
    2
    3
    4
    5
    6
    SimpleGrid1v
    Centered
    Center1v
    Spacer1v
    Header
    Side
    Main
    AppShell1v
    Info banner
    Success
    Banner4v
    centered content
    Page Shell2v

    Container

    ContainerQuery1v
    Left
    Right
    SplitPane1v

    Components

    Browse catalog

    AppHeader1v

    Page title

    Page heading block

    PageHeader1v

    Section

    Section heading block

    SectionHeader1v

    One

    Two

    More
    MasonryGrid1v
    Navigation21 components
    Breadcrumb1v
    Pagination1v
    Toolbar1v
    SplitButton1v
    Logo
    HomeAbout
    Navbar1v
    Product
    Docs
    Company
    About
    Legal
    Privacy
    Footer1v
    Docs
    Getting Started
    Components
    Presets
    Sidebar1v
    SocialIcons1v
    NavigationMenu1v
    Menubar1v
    MagneticNav1v
    Card A
    Hover near me
    Card B
    Glow border
    ProximityGlow1v
    Dock1v
    Top bar
    TopBar1v
    Bottom bar
    BottomBar1v
    MobileNav1v
    SidebarNav1v
    Preview content
    ContentTabs1v
    AnchorNav1v
    TableOfContents1v
    ScrollSpy1v
    Overlays32 components
    Dialog2v
    Drawer2v
    Sheet2v
    Popover1v
    HoverCard1v
    DropdownMenu3v
    Right-click here
    ContextMenu2v
    Command2v
    AlertDialog1v
    Toast4v
    Sonner1v
    PreviewCard1v
    Modal1v
    ConfirmDialog1v
    PromptDialog1v
    ResponsiveDialog1v
    Lightbox1v
    ImagePreview1v
    ⌘K
    Spotlight1v
    ⌘P
    CommandMenu1v
    ActionMenu1v
    OverflowMenu1v
    MegaMenu1v
    ContextPanel1v
    PopoverForm1v
    Floating panel
    FloatingPanel1v
    TooltipGroup1v
    Tour1v
    Tour step content
    TourStep1v
    Coachmark1v
    ⌘K0 triggers
    HotkeyProvider1v
    ShortcutRecorder1v
    Data30 components
    NameStatus
    ButtonStable
    CalendarBeta
    Table1v
    ComponentDownloads
    Button12.4k
    Card9.1k
    DataTable1v
    Jan

    Created

    Project started

    Feb

    Deployed

    v1.0 shipped

    Timeline1v

    Setup

    2

    Config

    3

    Deploy

    Stepper1v
    CPU Usage68%
    Meter1v
    May 2026
    Calendar1v
    DatePicker1v
    DateRangePicker1v
    Slide 1
    Slide 2
    Slide 3
    Carousel1v
    TreeView1v
    Package
    components
    Mode
    tokens
    DescriptionList1v
    Presetsigil
    KeyValue1v
    StatusReady
    Count300+
    PropertyList1v
    Components300+↗ +50%
    StatCard1v
    Components300+
    Presets46
    MetricGrid1v
    ↗ +24%
    Trend1v
    SparkArea1v
    SparkBar1v
    ModalReady
    DataList1v
    ComponentDemo
    DataListItem1v
    A12
    B24
    DataGrid1v
    DataToolbar1v
    DataFilters1v
    2 / 8
    DataPagination1v
    ColumnVisibility1v
    3 selected
    BulkActions1v

    No rows found.

    EmptyTable1v
    Listbox1v
    Modal
    MultiSelect
    StatusBadge
    DataToolbar
    VirtualList1v
    NameStatus
    ComponentsReady
    ModalReady
    TreeTable1v
    Forms39 components
    RadioGroup1v
    CheckboxGroup1v
    Combobox1v
    InputOTP1v
    Form1v

    Your public display name

    Field1v
    ReactSigil
    TagsInput1v
    ColorPicker1v
    Editable1v
    RatingGroup1v
    $
    InputGroup1v
    Drop files here
    FileUpload1v

    Sign here

    SignaturePad1v
    Password Input1v
    SearchInput1v
    $
    CurrencyInput1v
    PhoneInput1v
    TimePicker1v
    DateTimePicker1v
    DateRangeField1v
    MultiSelect1v
    Autocomplete1v
    CreatableSelect1v
    AsyncSelect1v
    SegmentedTabs1v
    Confidence72%
    RangeSlider1v
    DualRangeSlider1v
    FileDropzone1v
    ImageUpload1v
    AvatarUpload1v
    ColorField1v
    ComboboxField1v
    CheckboxCard1v
    RadioCard1v
    SwitchField1v
    Volume40%
    SliderField1v
    StepperField1v
    radixtokens
    TagsField1v
    CopyInput1v
    Marketing14 components
    NewShip fasterToken-driven design system
    Hero2v
    Ready to start?
    CTA2v

    Pro

    $19/mo
    • Unlimited
    • Priority
    Pricing1v
    Free
    $0
    Pro
    $19
    Team
    $49
    PricingTiers1v

    Fast

    Secure

    FeatureGrid1v
    FeatureSigilOther
    Tokens✓—
    Presets✓—
    ComparisonTable1v
    “Sigil completely changed how we build.”
    Maren Voss
    CTO
    TestimonialCard1v
    LogoBar1v
    NEWNew: Sigil v2.0 is here
    AnnouncementBar1v

    Getting Started with Sigil

    A quick intro.

    Apr 2026
    BlogGrid1v
    Users~1,000
    $29/mo
    CostCalculator1v
    Fast
    Sub-50ms builds
    FeatureFrame1v
    $0.01
    per request
    $0.10
    per minute
    UnitPricing1v
    Engineering Blog
    AllDesignEng
    BlogHeader1v
    Sections21 components

    Features

    Built for speed

    Every component reads from tokens.

    SectionHeading2v
    New
    Ship 10x faster
    Token-driven components
    HeroSection3v
    Fast
    Sub-50ms
    Tokens
    519 fields
    Presets
    44 themes
    CLI
    One command
    FeatureSection2v
    Ready to start?
    Deploy in under a minute.
    CTASection2v

    A token-driven design system.

    FAQSection1v
    350+
    Token-Driven Components
    46
    Presets
    519
    Tokens
    StatsSection3v
    BentoSection1v
    “
    Sigil changed how we build UIs.
    Maren V. — CTO
    TestimonialsSection1v
    LogoCloudSection1v
    FeatureUsOthers
    Tokens✓—
    Presets✓—
    ComparisonSection1v
    TypeScriptPython
    import { Button } from "@sigil-ui/components"
    CodeShowcaseSection1v
    KL
    Engineer
    JD
    Engineer
    AR
    Engineer
    TeamSection1v
    v2.0
    Sections
    v1.5
    Presets
    v1.0
    Launch
    TimelineSection1v
    Stay updated
    NewsletterSection1v
    Product
    Features
    Pricing
    Company
    About
    Blog
    Legal
    Privacy
    Terms
    FooterSection1v
    A new species of design system.
    LargeTextSection1v
    Feature A
    Description
    FeatureShowcaseSection1v
    Install
    $ npm install
    InstallSection1v
    Brand Banner
    GradientBannerSection1v
    FRAME

    Copy plus diagram

    • Token border
    • Responsive rows
    AppRuntimeHW
    FeatureFrameSection1v
    SECTION 01

    Blueprint

    Staggered card

    TOKENS519
    typed
    BlueprintGridSection1v
    Shapes6 components
    Diamond2v
    Hexagon2v
    Triangle2v
    Diagonal1v
    Shape6v
    Cross1v
    Patterns3 components
    Pattern7v
    Tessellation7v
    GrainGradient4v
    3D9 components
    3D
    Box3D2v
    Tilt me
    Card3D1v
    A
    B
    FloatingUI1v
    ISO
    IsometricView1v
    UI
    Frontend
    API
    Backend
    ExplodedView1v
    IsometricPrism1v
    IsometricCylinder1v
    IsometricScene1v
    1
    2
    3
    Box3DGrid1v
    Diagrams53 components
    A
    B
    C
    Diagram1v
    legacy rotating diagrams
    Sigil Diagram Mark12v
    Start
    End
    FlowDiagram1v
    UI
    React
    API
    REST
    ArchitectureDiagram1v
    Default
    Accent
    Muted
    DiagramNode4v
    AB
    DiagramConnector3v
    Auth
    Error
    API
    DiagramLabel3v
    CrossHatch1v
    Auth
    Route
    Run
    PipelineDiagram2v
    UI
    UI layer
    API
    API layer
    DB
    DB layer
    StackDiagram2v
    Tokens
    CLI
    Core
    Docs
    UI
    HubSpokeDiagram1v
    Without
    Messy
    With
    Clean
    BeforeAfterDiagram1v
    Sigil
    T
    Tokens
    P
    Presets
    D
    Docs
    C
    CLI
    EcosystemDiagram1v
    NYCLON
    GlobeDiagram1v
    Core
    A
    A
    B
    B
    C
    C
    D
    D
    token
    ui
    OrbitDiagram1v
    LLM
    HelloWorld
    StreamFlowDiagram1v
    App
    Sigil
    Tokens
    UI
    Docs
    CSS
    React
    HubRouteDiagram1v
    Inputs
    Tokens
    Presets
    Platform
    CLI
    Outputs
    CSS
    Components
    PlatformHubDiagram1v
    AppAPIInfra
    IsometricStackDiagram1v
    FeatureMiniDiagram4v
    ABXY
    SankeyDiagram1v
    Traditional2.0s
    Sigil50ms
    ~40x faster
    WaterfallChart1v
    Runtimes
    Node
    Python
    Rust
    System
    Root
    GPU
    CapabilityGrid1v
    Isolation model
    Hardware
    Kernel
    VM
    IsolationStack1v
    Status
    Active
    Free
    competitor-a
    $0.09/hr
    StatePersistence1v
    Loading diagram...
    MermaidDiagram1v
    423221110
    42
    28
    Q1
    BarChart1v
    45%35%20%
    UI
    Docs
    CLI
    PieChart1v
    68%
    DonutChart1v
    MonTueWedThu
    LineChart1v
    011223344MonTueWedThu
    AreaChart1v
    DXA11yMotionTheme
    RadarChart1v
    Visit1.2K
    53.3%
    Install640
    50.0%
    Ship320
    FunnelChart1v
    1
    2
    A
    B
    C
    1
    3
    5
    2
    4
    6
    HeatmapGrid1v
    Fast
    Typed
    Token
    A11y
    MatrixDiagram1v
    Sigil
    Tokens
    Components
    TreeDiagram1v
    TaskSprint
    W1    		Sprint
    W2    		Sprint
    W3    		Sprint
    W4
    Build
    Docs
    UI
    GanttChart1v
    TokensCSSUI
    DependencyGraph1v
    ABC
    NetworkGraph1v
    TokensUISigil
    VennDiagram1v
    Free
    $0
    Pro
    $19
    Tokens✓✓
    Support—✓
    PricingTable1v
    v2.0Apr 2026
    added44 presets
    fixedDocs links
    ChangelogTable1v

    Status

    ServiceStatusUptimeLast Incident
    APIOperational99.9%—
    DocsDegraded—1h ago
    StatusTable1v

    Spec

    Tokens519
    Presets46
    SpecTable1v

    Usage

    #NameScoreΔ
    🥇
    Button
    		12400
    🥈
    Card
    		9100
    LeaderboardTable1v
    Mar
    Apr
    Mon
    Wed
    Fri
    CommitGrid1v
    SparkLine1v
    72%Usage0100
    UsageGauge1v
    $0$11$22$33$44Jan$36Feb$44CPUStorage
    BillingChart1v
    CPU 72%
    Mem 48%
    ProgressRing1v
    Latency
    42ms
    -12%week
    MetricCard1v
    Preset syncednow
    Docs rebuilt1m
    ActivityFeed1v
    NameCount
    Button
    42
    Card
    28
    Input
    21
    MiniBarList1v
    Animation18 components
    Fade up on scroll
    AnimateOnScroll1v
    Fade up
    FadeIn5v
    Slide from left
    SlideIn4v
    Scale in
    ScaleIn1v
    Blur + fade
    BlurFade1v
    One
    Two
    Three
    Stagger1v
    Blur in on mount
    AnimateOnMount7v
    TextReveal2v
     
    LetterPullUp1v
    Build with speed
    WordRotate1v
    TypeWriter1v
    0
    tokens
    NumberTicker1v
    Sigil UI
    GradientText1v
    12% scrolled
    ScrollProgress1v
    ReactTokensPresetsOKLCHTailwindRadix
    Marquee4v
    Ripple1v
    Pulse1v
    Parallax
    ParallaxLayer1v
    Pretext3 components
    measure()12.4ms
    PretextMeasure1v
    Token
    driven
    typeset
    PretextLines1v
    balanced rag
    line boxes
    no reflow
    PretextLayout1v
    Playbook8 components
    Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6
    GapPixelGrid2v
    InfrastructureFAQShips Immediately
    MonoLabel3v
    Nav
    Hero
    Features
    Footer
    BorderStack2v
    AccentCTA3v
    Revenue$24,800.00
    Users1,247
    Uptime99.98%
    TabularValue5v
    Chrome · 10pxCounter · 11pxDetail · 12pxNav · 13pxBody · 14pxBase · 16px
    DensityText7v
    Frosted
    Solid
    FrostedPanel2v

    Edge Compute

    Deploy at the edge with sub-50ms cold starts.
    12 regions
    CardCell1v
    Feedback20 components
    Operational
    StatusBadge1v
    Online
    StatusDot1v
    Pending
    StatusPill1v
    Online
    OnlineIndicator1v
    KL
    PresenceAvatar1v
    Deploy complete
    Docs published.
    Notification1v
    One
    First
    Two
    Second
    NotificationList1v
    InlineAlert1v
    Callout1v
    BannerAlert1v

    Error

    Try again.

    ErrorState1v
    ⠋Loading…

    Loading

    Fetching data.

    LoadingState1v

    Success

    All set.

    SuccessState1v
    1. Install
    2. Configure
    3. Ship
    ProgressSteps1v
    2 of 3 stages
    TimelineProgress1v
    ToastAction1v
    ToastPromise1v
    SkeletonCard1v
    SkeletonTable1v
    ⠋Loading…
    SpinnerOverlay1v
    Developer15 components
    tsx
    1<Button>Ship</Button>
    CodeTabs1v
    tsx
    1<Button>Preview</Button>
    CodePreview1v
    CopyButton1v
    --s-primaryvar(--s-primary)
    TokenPreview1v
    ThemeSwatch1v
    ThemeSwitcher1v
    PromptInput1v
    Components stay token-first.
    ChatMessage1v
    Show dialogs.
    Use Modal.
    ChatThread1v
    MessageComposer1v
    1. Component added
      Modal docs generated.
    2. Build passed
      Docs compiled.
    ActivityTimeline1v
    KevinUpdated docs
    AuditLog1v

    v0.1.0

    Added catalog pages.

    Changelog1v
    v0.1.0
    VersionBadge1v
    ⌘K
    KeyboardKey1v
    HOW TOKENS FLOW

    Every component reads from tokens.

    Colors, radius, shadows, motion, typography — all resolved at runtime from CSS custom properties. Change a token, every consumer updates. No imports, no build step, no prop drilling.

    component blueprintvar(--s-*) in use
    New
    01source token
    02compiled var
    03component class
    token consumption

    Each visual decision resolves to one named token, then every component reads the same CSS variable.

    color
    selected tokenoklch(0.7 0.15 280)

    Fill

    --s-primary

    Button background, active rails, focus accents.

    Fill--s-primary
    color
    Foreground--s-primary-contrast
    contrast
    Corners--s-radius-md
    shape
    Type--s-font-mono
    typography
    Motion--s-duration-fast
    motion
    Depth--s-shadow-sm
    elevation
    WHY TOKENS

    Build with tokens, not overrides.

    No hardcoded values

    Components read var(--s-*) tokens for every visual property — colors, spacing, radius, shadows. Never hex codes, never magic numbers.
    var(--s-*)

    One preset, everything updates

    Switch presets and all 350+ token-driven components change simultaneously. One command, zero prop drilling, zero theme objects.
    var(--s-*)

    Agent-friendly

    AI agents edit tokens.md — a single markdown file. Components respond deterministically. No ambiguity, no hunting through files.
    var(--s-*)
    Get StartedRead the Docs
    Studiodefault
    Presets
    primary
    secondary
    background
    surface
    text
    border
    accent
    success
    warning
    error
    info
    display
    body
    mono
    heading wt
    600
    heading trk
    -0.025em
    base size
    16px
    page margin
    24px
    section pad
    64px
    card pad
    24px
    grid gap
    24px
    stack gap
    12px
    global
    8px
    button
    8px
    card
    12px
    input
    6px
    border w
    1px
    style
    card border
    card shadow
    btn shadow
    glow
    spring
    Type
    Duration
    0.20
    Bounce
    1.00
    easing
    cubic-bezier(0.16, 1, 0.3, 1)
    fast
    150ms
    normal
    200ms
    slow
    300ms
    hover scale
    1.02
    press scale
    0.98
    hover lift
    -1px
    stagger
    50ms
    weight
    transform
    hover
    active scale
    0.98
    min-width
    0px
    letter sp
    0.000em
    icon gap
    8px
    shadow
    hover
    border
    shadow
    padding
    24px
    title size
    1px
    title wt
    desc size
    0.875px
    aspect
    outline
    height
    36px
    focus ring
    2px
    focus ring
    h1 size
    2.25px
    h2 size
    1.875px
    h3 size
    1.5px
    h4 size
    1.25px
    weight
    tracking
    -0.020em
    leading
    1.20
    pattern
    pattern α
    0.03
    noise
    gradient
    grad angle
    180°
    height
    50px
    blur
    12px
    border
    padding
    24px
    item gap
    24px
    min-height
    600px
    padding Y
    80px
    content-max
    680px
    layout
    title size
    56px
    desc size
    18px
    padding Y
    64px
    max-width
    600px
    layout
    title size
    36px
    padding Y
    48px
    columns
    4
    gap
    36px
    content-max
    1200px
    rail-gap
    24px
    grid-cell
    50px
    cross-stroke
    1.5px
    navbar-h
    50px
    bento-gap
    16px
    grid lines
    dots
    cell borders
    cell bg
    Gutter
    Margin
    content
    hero
    navbar
    rail visible
    enabled