BLOCKS / INTERACTIVE
Tabs block
Pill or underline nav, horizontal or vertical, with any content behind each tab.
Pill style, centered
tabStyle set to pill, tabAlignment centered. The active pill gets a white background inside a light gray nav container — set via activeTabBgColor and navBgColor.
Design with precision
The active tab gets a white background and shadow. Content swaps below with a subtle fade animation handled by view.js.
Build with confidence
Each tab reveals a different 50/50 layout. Same structure, different image and copy underneath.
Underline style, left-aligned
tabStyle stays at its underline default. activeBorderColor plus activeBorderWidth draw the bottom indicator, navBorderColor draws the full nav baseline.
Connect
Underline tabs feel more traditional and professional, with a bottom border that doubles as an indicator.
Configure
Content below can be anything: cards, text, images. This example shows three feature cards per tab.
Launch
Three or four tabs is comfortable for this style. The underline gives clear feedback about which section is active.
Deploy
One-click deploy to any region. Rollbacks are instant if something goes wrong.
Monitor
Real-time logs and metrics out of the box. Set up alerts in a couple of clicks.
Scale
Auto-scaling infrastructure handles traffic spikes without any manual intervention.
Vertical tabs with rounded active item
tabDirection set to vertical stacks the nav on the left. navWidth pins the sidebar width, and activeTabBgColor plus tabBgHoverColor give each row its own rounded highlight.
Ship faster with fewer bugs
Vertical tabs work well when you have more than three categories, giving a clear overview of all options without scrolling.
From concept to component
Design tokens, component libraries, and real-time handoff. Your design system stays in sync with production code.
Icon tabs, dark background
Each tab-item-block carries its own iconSvgContent plus iconColor and iconActiveColor, so the icon itself flips color when its tab becomes active — independent of the tabs-block's own color settings.
50ms
Average response time
10M+
Requests per second
Tabs embedded inside a card header
navBorderPosition, navBorderWidth and navBorderColor together (pill style only) wrap the tab row in its own border, and navBorderRadiusTL/TR round only the top corners so it reads as a card header strip.
Move fast, stay lean
Tabs embedded in the card header feel self-contained — the entire component reads as one bordered unit, good for documentation-style layouts.
Manage multiple clients
Workspaces, permissions, and billing separated per client, with white-label reports carrying your own agency branding.