HomeSetup

Components

AccordionAlertAlert DialogAspectRatioAutocompleteAvatarBadgeBreadcrumbButtonButton GroupCardCheckboxCheckboxGroupCollapsibleComboboxContext MenuDialogDrawerDropdown MenuFieldFieldsetFormHover CardInputInput GroupInputOTPItemKbdMenubarMeterNavigation MenuNumber FieldPaginationPopoverProgressRadio GroupScrollAreaSelectSeparatorSkeletonSliderSpinnerSwitchTableTabsText LinkTextareaToastToggleToggle GroupToolbarTooltip

V0.1.0

Tabs

Tabs is a Chord navigation component built from Base UI primitives and project tokens.

A quick look at the product and what it does.

import Card from "@/components/public/Card";import { Tabs } from "@/components/public/Tabs";<Card layer={1} className="w-80 max-w-full gap-0 overflow-hidden">  <Tabs.Root defaultValue="one">    <div className="border-b border-grayscale-3 p-2">      <Tabs.List>        <Tabs.Tab value="one">Tab One</Tabs.Tab>        <Tabs.Tab value="two">Tab Two</Tabs.Tab>        <Tabs.Indicator />      </Tabs.List>    </div>    <div className="p-3">      <Tabs.Panel value="one">Content one</Tabs.Panel>      <Tabs.Panel value="two">Content two</Tabs.Panel>    </div>  </Tabs.Root></Card>
dqnamo
dqnamo