sigil/UI

Components,
ready to build with.

Explore 350+ React components, from everyday controls to complete page sections. Try them here, then open the docs for code and examples.

Browse componentsOpen sandbox
DESIGN.mdOne shared spec
ColorTypographyAaSpacing

Buttons

--s-primary

Inputs

--s-font-body

Controls

--s-radius-input

Change a token. Every connected component follows.

350+React components
40+Headless primitives
519Design tokens
46Presets

    Showing 24 of 361 components

    Core interface44

    Button

    6 variants
    DefaultSecondaryOutline

    Badge

    4 variants

    Input

    4 variants

    Textarea

    1 variant

    Select

    2 variants

    Checkbox

    2 variants

    Switch

    2 variants

    Slider

    3 variants

    Progress

    2 variants

    Toggle

    3 variants

    ToggleGroup

    2 variants
    KLSGR

    Avatar

    3 variants
    S
    LR
    GR
    +2

    AvatarGroup

    1 variant
    Revenue$4.2k+8%

    KPI

    2 variants

    Alert

    4 variants

    Skeleton

    3 variants
    ⣾Loading…⣾Loading…⣾Loading…

    LoadingSpinner

    5 variants
    Loading

    BrailleSpinner

    6 variants

    CircularProgress

    3 variants
    8

    NumberField

    1 variant

    Label

    1 variant
    Account
    Settings
    Plain line

    Separator

    2 variants

    Tooltip

    1 variant
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 7
    Item 8
    Item 9
    Item 10
    Item 11
    Item 12

    ScrollArea

    1 variant

    One change reaches every component.

    Components read the same design tokens. Change a color, corner radius, or spacing value and see the result in this live example.

    Your design decisions

    Choose a value. The preview updates from the compiled tokens.

    Accent color
    Corners
    Card spacing
    Compiled CSS · excerpt
    --s-primary: oklch(0.48 0.19 275);
--s-radius-card: 0px;
--s-card-content-padding-x: 16px;

    Your components, updated

    The card, input, badge, and button use the same token spec.

    Project

    Create a workspace

    This is a live example. Try the form and change a token.

    Get startedExplore design tokens