TabBar — @sdxc/ui

Demo apps

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Issue trackerCairnCairn, an invented issue tracker: grouped issue lists with filters in the address, a drag-and-drop board, projects on a roadmap, cycles with burn-up charts and an inbox./demo/apps/cairn
Social networkChorusChorus, an invented social network: a live timeline with pictures, link cards, polls and threads, profiles, grouped notifications, search and messages./demo/apps/chorus
Code hostDeltaDelta, a code host whose one repository is its own source: a file tree beside the code, line links, blame and the commits list, every file and commit read from git when the site is built./demo/apps/delta
CMSInkwellInkwell, a demo CMS built from @sdxc/ui/app: posts with count tabs and quick edit, an editor with a quiet save status and a loud Publish, media and settings./demo/apps/inkwell
Ops dashboardPulsePulse, an invented ops dashboard: Northwind's services with live filters, a peek sheet and a bulk bar, metrics that switch one chart, incidents, deploys and settings./demo/apps/pulse
Support inboxRelayRelay, an invented support inbox: mailboxes, conversations and the open conversation on one screen, with contacts, reports and settings./demo/apps/relay
Chat assistantTernTern, an invented chat assistant: conversations with streamed replies, code and tables, projects, a canvas, sharing and settings./demo/apps/tern

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { TabBar } from "@sdxc/ui/app";

Renders the bar. The outer box keeps the bar's height in the flow while the bar itself is fixed to the viewport's foot, so it reads as one more block at the end of the page; a screen at or above hideFrom draws neither.

Composition

The parts the component publishes, each a static property of the host.

TabBar
TabBar.ItemOne destination: the whole column is the link, at least 44px square.

Examples

Icons only

View code

tsx

<TabBar label="Primary" showLabels={false}>
	<TabBar.Item href="/" icon={<HouseIcon />} label="Home" current />
	<TabBar.Item href="/explore" icon={<SearchIcon />} label="Explore" />
	<TabBar.Item href="/notifications" icon={<BellIcon />} label="Notifications" count={12} countLabel="12 unread" />
	<TabBar.Item href="/messages" icon={<MailIcon />} label="Messages" />
</TabBar>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`label`	`string`	Yes	The landmark's name, such as "Primary".
`hideFrom`	`"30rem" \| "40rem" \| "48rem" \| "64rem" \| "never"`	No
`showLabels`	`boolean`	No	Shows each item's name under its icon; `false` keeps names for assistive tech alone. @default true
`children`	`RemixNode`	Yes	Four or five TabBar.Items.

Also accepts everything in TagProps<"nav">.

TabBar.Item

Types

Name	Values	What it decides
`HideFrom`	`"30rem" \| "40rem" \| "48rem" \| "64rem" \| "never"`	The width from which the bar is gone, matching where the app's sidebar appears; `never` keeps it at every width, for an app made for phones alone.