Skip to content
Component Anatomy

    ok: build 09:27 UTC main · dd6f9f7
    Menu / Theming

    Theming

    The same component with different presets and theme tokens — hover each panel to compare. Full guide in Rendering customization.

    preset="default" (zero config)

    40
    Root root

    The component wrapper.

    Track track

    The rail the thumb travels along.

    Range range

    The filled portion of the track.

    Thumb thumb

    The draggable handle.

    Output output

    Live value readout.

    preset="minimal"

    40
    Root root

    The component wrapper.

    Track track

    The rail the thumb travels along.

    Range range

    The filled portion of the track.

    Thumb thumb

    The draggable handle.

    Output output

    Live value readout.

    preset="contrast"

    40
    Root root

    The component wrapper.

    Track track

    The rail the thumb travels along.

    Range range

    The filled portion of the track.

    Thumb thumb

    The draggable handle.

    Output output

    Live value readout.

    preset="blueprint"

    40
    Root root

    The component wrapper.

    Track track

    The rail the thumb travels along.

    Range range

    The filled portion of the track.

    Thumb thumb

    The draggable handle.

    Output output

    Live value readout.

    theme={{ accent: "#0d9488", overlayRadius: 8 }}

    40
    Root root

    The component wrapper.

    Track track

    The rail the thumb travels along.

    Range range

    The filled portion of the track.

    Thumb thumb

    The draggable handle.

    Output output

    Live value readout.

    overlayLabel={false} — quiet mode

    40
    Root root

    The component wrapper.

    Track track

    The rail the thumb travels along.

    Range range

    The filled portion of the track.

    Thumb thumb

    The draggable handle.

    Output output

    Live value readout.