Tabs

Switches between views of one subject in place.

No errors in the last hour.

<Tabs defaultValue="logs">
  <TabsList>
    <TabsTab value="overview">Overview</TabsTab>
    <TabsTab value="logs">Logs</TabsTab>
    <TabsTab value="settings">Settings</TabsTab>
  </TabsList>
  <TabsPanel value="overview">robin is live in eu-west.</TabsPanel>
  <TabsPanel value="logs">No errors in the last hour.</TabsPanel>
  <TabsPanel value="settings">Region, domain and environment variables.</TabsPanel>
</Tabs>

Installation

npx shadcn@latest add https://sproutboat.com/ikada/r/tabs.json

The CLI writes components/ikada/tabs.tsx and merges the ikada theme into your CSS. Or take it from the package: import { Tabs, TabsList, TabsTab, TabsPanel } from "@sproutboat/ikada";

Usage

import { Tabs, TabsList, TabsTab, TabsPanel } from "@/components/ikada/tabs";

<Tabs defaultValue="logs">
  <TabsList>
    <TabsTab value="overview">Overview</TabsTab>
    <TabsTab value="logs">Logs</TabsTab>
    <TabsTab value="settings">Settings</TabsTab>
  </TabsList>
  <TabsPanel value="overview">robin is live in eu-west.</TabsPanel>
  <TabsPanel value="logs">No errors in the last hour.</TabsPanel>
  <TabsPanel value="settings">Region, domain and environment variables.</TabsPanel>
</Tabs>

Examples

With panels

Switches between views of one subject in place. A raised pebble slides to the active tab.

No errors in the last hour.

<Tabs defaultValue="logs">
  <TabsList>
    <TabsTab value="overview">Overview</TabsTab>
    <TabsTab value="logs">Logs</TabsTab>
    <TabsTab value="settings">Settings</TabsTab>
  </TabsList>
  <TabsPanel value="overview">robin is live in eu-west.</TabsPanel>
  <TabsPanel value="logs">No errors in the last hour.</TabsPanel>
  <TabsPanel value="settings">Region, domain and environment variables.</TabsPanel>
</Tabs>

Disabled tab

wren is live in us-east.

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTab value="overview">Overview</TabsTab>
    <TabsTab value="logs">Logs</TabsTab>
    <TabsTab value="metrics" disabled>
      Metrics
    </TabsTab>
  </TabsList>
  <TabsPanel value="overview">wren is live in us-east.</TabsPanel>
  <TabsPanel value="logs">No errors in the last hour.</TabsPanel>
</Tabs>

Props

TabsProps
Prop	Type	Description
style	`CSSProperties \| ((state: TabsRootState) => CSSProperties)`	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, TabsRootState>`	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
className	`string`	Classes merged onto the root element, after ikada's own.

TabsListProps
Prop	Type	Description
style	`CSSProperties \| ((state: TabsListState) => CSSProperties)`	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, TabsListState>`	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
className	`string`	Classes merged onto the root element, after ikada's own.

TabsTabProps
Prop	Type	Description
style	`CSSProperties \| ((state: TabsTabState) => CSSProperties)`	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, TabsTabState>`	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
className	`string`	Classes merged onto the root element, after ikada's own.

TabsPanelProps
Prop	Type	Description
style	`CSSProperties \| ((state: TabsPanelState) => CSSProperties)`	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, TabsPanelState>`	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
className	`string`	Classes merged onto the root element, after ikada's own.

Source: src/components/tabs.tsx