Navigation

Tabs

Switch between related views in the same space.

Blinc 0.6.0stable API

Tabs interaction recorded with the Blinc headless renderer

Hybrid · dark · native recording · 2×

Dark

Theme

Disabled

Recorded Tabs preview while the live runtime loads

custom.css

Enable JavaScript to use the live preview.

Rust · component usage

use blinc_cn as cn;
use blinc_core::reactive::Signal;
use blinc_layout::prelude::*;

pub fn tabs_demo(choice: Signal<String>) -> Div {
    div().class("demo-wide").child(
        cn::tabs(choice)
            .tab("rust", "Overview", || {
                div()
                    .class("demo-panel")
                    .child(text("Everything you need, in one place."))
            })
            .tab("typescript", "Activity", || {
                div()
                    .class("demo-panel")
                    .child(text("Your latest changes are ready to review."))
            })
            .transition(cn::TabsTransition::Fade),
    )
}

Default component CSS

@layer components {
  .cn-tabs-list,
  .cn-tabs-trigger {
    font-family: var(--font-sans);
  }

  .cn-tabs-trigger {
    letter-spacing: var(--tracking-tight);
  }

  .cn-tabs-trigger:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .cn-tabs-list {
    background: var(--cn-tabs-list-bg, var(--surface-overlay));
    border-radius: var(--radius-md);
    padding: var(--space-1);
    gap: var(--space-1);
  }

  .cn-tabs-trigger {
    border-radius: var(--radius-default);
    cursor: pointer;
    color: var(--text-secondary);
    transition: color var(--duration-fast) var(--ease-state);
  }

  .cn-tabs-trigger:hover:not(.cn-tabs-trigger--active) {
    color: var(--text-primary);
  }

  .cn-tabs-trigger--active {
    color: var(--text-primary) !important;
    font-weight: 500;
  }

  .cn-tabs-indicator {
    background: var(--cn-tabs-active-bg, var(--surface)) !important;
    border-radius: var(--radius-default);
    box-shadow: var(--shadow-sm);
  }

  .cn-tabs-trigger--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  @keyframes cn-tab-from-left {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes cn-tab-to-left {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(-20px);
    }
  }

  @keyframes cn-tab-from-right {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes cn-tab-to-right {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(20px);
    }
  }

  @keyframes cn-tab-from-top {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes cn-tab-to-top {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-20px);
    }
  }

  @keyframes cn-tab-from-bottom {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes cn-tab-to-bottom {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(20px);
    }
  }

  .cn-tabs-panel[data-transition="fade"][data-motion="enter"] {
    animation: cn-fade-in var(--duration-normal) var(--ease-out);
  }

  .cn-tabs-panel[data-transition="fade"][data-motion="exit"] {
    animation: cn-fade-out var(--duration-fast) var(--ease-in) forwards;
  }

  .cn-tabs-panel[data-transition="slide"][data-direction="next"][data-motion="enter"] {
    animation: cn-tab-from-right var(--duration-normal) var(--ease-out);
  }

  .cn-tabs-panel[data-transition="slide"][data-direction="next"][data-motion="exit"] {
    animation: cn-tab-to-left var(--duration-fast) var(--ease-in) forwards;
  }

  .cn-tabs-panel[data-transition="slide"][data-direction="prev"][data-motion="enter"] {
    animation: cn-tab-from-left var(--duration-normal) var(--ease-out);
  }

  .cn-tabs-panel[data-transition="slide"][data-direction="prev"][data-motion="exit"] {
    animation: cn-tab-to-right var(--duration-fast) var(--ease-in) forwards;
  }

  .cn-tabs-panel[data-transition="slide-left"][data-motion="enter"] {
    animation: cn-tab-from-left var(--duration-normal) var(--ease-out);
  }

  .cn-tabs-panel[data-transition="slide-left"][data-motion="exit"] {
    animation: cn-tab-to-left var(--duration-fast) var(--ease-in) forwards;
  }

  .cn-tabs-panel[data-transition="slide-right"][data-motion="enter"] {
    animation: cn-tab-from-right var(--duration-normal) var(--ease-out);
  }

  .cn-tabs-panel[data-transition="slide-right"][data-motion="exit"] {
    animation: cn-tab-to-right var(--duration-fast) var(--ease-in) forwards;
  }

  .cn-tabs-panel[data-transition="slide-up"][data-motion="enter"] {
    animation: cn-tab-from-top var(--duration-normal) var(--ease-out);
  }

  .cn-tabs-panel[data-transition="slide-up"][data-motion="exit"] {
    animation: cn-tab-to-top var(--duration-fast) var(--ease-in) forwards;
  }

  .cn-tabs-panel[data-transition="slide-down"][data-motion="enter"] {
    animation: cn-tab-from-bottom var(--duration-normal) var(--ease-out);
  }

  .cn-tabs-panel[data-transition="slide-down"][data-motion="exit"] {
    animation: cn-tab-to-bottom var(--duration-fast) var(--ease-in) forwards;
  }

  .cn-tabs-panel--leaving {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .cn-tabs-trigger--sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
  }

  .cn-tabs-trigger--md {
    padding: var(--space-1-5) var(--space-4);
    font-size: var(--text-sm);
  }

  .cn-tabs-trigger--lg {
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-lg);
  }

  @keyframes cn-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes cn-fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
}

JavaScript is needed for Live and tab controls. Read the Rust source or read the default component CSS.

Usage and properties

Switch between related views in the same space. Apply CSS after the component layer to restyle the documented parts.

Use the installation guide to add blinc_cn and its component stylesheet. Create the fixture bindings once, and return the demo from your UI builder. Values marked Bound accept Signal/Computed sources where the API supports them; structural options configure the component at construction.

Property	Type	Update model	This example
`value`	`Signal<String>`	Bound	rust
`tab(value, label, content)`	`strings and child builder`	Construction	Overview / Activity
`transition`	`TabsTransition`	Construction	Fade
`disabled`	`bool or IntoReactive<bool>`	Bound	values.disabled

Keyboard and interaction

Tab reaches each tab trigger; Enter or Space selects it. :focus-visible marks keyboard focus.

Customizing it

Add application CSS after the default component layer. These selectors are the restyling surface for this component:

.cn-tabs
.cn-tabs-list
.cn-tabs-trigger
.cn-tabs-indicator
.cn-tabs-trigger--disabled
.cn-tabs-panel
.cn-tabs-trigger--active

Theme and component variables: --primary, --text-primary, --text-secondary, --surface, --border, --radius-default, --duration-fast, --ease-state.

Built-in themes

The Live theme control installs Blinc's own theme bundles, including their colours, focus rings, corner shapes and motion tokens.

pub fn theme_bundle_for(name: &str) -> blinc_theme::ThemeBundle {
    match name {
        "restrained" => blinc_theme::RestrainedTheme::bundle(),
        "expressive" => blinc_theme::ExpressiveTheme::bundle(),
        _ => blinc_theme::HybridTheme::bundle(),
    }
    .with_css(blinc_cn::cn_styles::CN_STYLES)
}

Download the default widget and component stylesheets. Sample assets and licenses are available in the asset guide.

Documentation

From the canonical component guide.

Bind the selected tab to a Signal<String>:

let tab = ctx.use_signal("account".to_string());

tabs(tab)
    .tab("account", "Account", || div().child(text("Account settings")))
    .tab("password", "Password", || div().child(text("Password settings")))
    .tab("settings", "Settings", || div().child(text("Other settings")))
    .transition(TabsTransition::Fade)
    .on_change(|value| {
        let _ = value;
    })

The pill, .cn-tabs-indicator, slides to the selected trigger and takes its width. Its fill, radius and shadow are CSS rules.

The new panel enters and the old one leaves by .cn-tabs-panel rules for data-transition: slide (the default), fade, slide-left, slide-right, slide-up or slide-down. TabsTransition::None switches immediately. Panels carry data-motion="enter" or "exit"; the old panel remains until its exit finishes. With slide, data-direction="next" or "prev" selects the direction according to tab order.

.cn-tabs-panel[data-transition="fade"][data-motion="enter"] {
    animation: cn-fade-in 400ms var(--ease-out);
}

Platforms and version

The component API is available in Blinc 0.6.0. The Live example runs in a dedicated worker and requires a compatible GPU surface. Preview and Code remain available when Live cannot start. The canvas has a descriptive label; a full screen-reader DOM mirror is not provided. The gallery integration is based on revision e2e55c24e078.

Recordings and live demos use the default Hybrid theme with bundled Noto Sans. The recording uses a 560 × 320 logical viewport at twice that resolution. Live follows its container and actual display density. Source base revision · Exact build source · Artifact versions and checksums · Font license.