/// Navigation
TabbedShowcase
Tab-bar-over-panel showcase — mono [ 0N ] tabs that fill and merge into a bordered panel below. Split lays copy beside an illustration; single is one column.
import { TabbedShowcase } from "@protocore/pds";Split layout
The split layout pairs copy (title, body, sub-tag chips, an action) with a right-hand illustration. Each tab is prefixed with its [ 0N ] index; the active tab fills the surface and merges into the panel.
A neutral, immutable messaging layer every application can build on — no wrapped assets, no fragmented liquidity.
Single column (numbered breakdown)
The single layout is one column of copy — the numbered-breakdown pattern for walking through the parts of one system.
Immutable on-chain contracts that send and receive messages. They can never be paused or upgraded, so what you build on stays.
Controlled
Pass index + onIndexChange to drive the active tab from your own state; omit them (or use defaultIndex) to let the component own it.
42 chains live, settling in a single hop.
When to use it
TabbedShowcase is a marketing / landing-page primitive: a heavyweight, illustrated feature switcher for presenting a product's pillars or a protocol's building blocks.
- Switching peer views inside an app screen (config panels, entity tabs)? Use the lighter Tabs instead — TabbedShowcase is deliberately larger and more decorative.
- One idea explored across facets with a pinned rail? Use StickyAccordion.
- A single hero call-to-action pair? Use DualCTA.
- Feed the
artslot a LineArt field to stay on-brand.
Usage
Do
- Use it on marketing / landing surfaces to showcase a handful of pillars.
- Give each tab a one-word label; the [ 0N ] index carries the ordering.
- Put a LineArt illustration in the art slot for split layouts.
- Keep body copy to a sentence or two so panels stay a consistent height.
Don't
- Don't use TabbedShowcase for in-app view switching — that's Tabs.
- Don't exceed ~4 tabs; the bordered bar stops reading as a set.
- Don't mix split and single semantics in one instance.
- Don't stuff a form or interactive table inside a panel — it's a display surface.
Accessibility
| Keys | Action |
|---|---|
| Tab | Move focus to the tab bar and onto a tab button |
| Enter / Space | Select the focused tab and swap the panel |
- The tab bar is a `role="tablist"` of `role="tab"` buttons with `aria-selected`, over a `role="tabpanel"` panel.
- The `[ 0N ]` index prefix is `aria-hidden` decoration; the tab's text label is its accessible name.
TabbedShowcase props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | |
defaultIndex | number | 0 | Uncontrolled initial index. Default 0. |
index | number | — | Controlled active index. Pair with `onIndexChange`. |
layout | enum | split | `split` = 2-col panel (copy left, illustration right); `single` = one column of copy. |
onIndexChange | ((index: number) => void) | — | Fires with the next active index whenever a tab is selected. |
style | CSSProperties | — | |
tabs * | ShowcaseTab[] | — | The tabs and their panels. |