Tabs

Production section switchers — each pattern is a different product surface, not a restyle of the same demo.

tabs-01

Product

SonoJS UI kit for shipping production interfaces faster.

Built for real product teams

Copy-source components with RTL, dark mode, and registry installs — so design and engineering stay aligned from day one.

  • Accessible primitives
  • Token-driven scale
  • CLI install
  • Docs + blocks
tabs-02

Account settings

Manage how Sara Reed appears across the workspace.

tabs-03

Brand refresh · Sprint 14

Shared project workspace

Figma · Landing v3

Hero

Pricing

Footer

tabs-04

Analytics

Last 30 days · All channels

Sessions

48.2k

+12.4%

Bounce rate

34%

-2.1%

Avg. duration

3m 12s

+18s

tabs-05

Choose a billing cycle

Switch plans anytime. Yearly saves two months.

Pro

$32 / mo

  • · Unlimited projects
  • · Shared themes
  • · Email support

Business

$66 / mo

  • · Everything in Pro
  • · SSO + audit log
  • · Priority support
tabs-06

Inspector

tabs-07

Inbox

3 conversations

tabs-08

Fulfillment

Last 7 days · $234.50 still in queue

tabs-09

Shop the collection

Curated home goods for spring · 3 pieces

Best seller

Oak Side Table

$210

Popular

Stoneware Bowl

$28

Popular

Wool Cushion

$36

tabs-10

Website redesign

In progress

Due Fri

Component audit

Review

Due Mon

Billing portal

Backlog

Unscheduled
tabs-11

CRM

Discovery

$18k

3 deals

Proposal

$42k

5 deals

Negotiation

$67k

2 deals

tabs-12

Settings

Profile

Public details shown on comments and shared docs.