@zedtech/zedkit-ui

Tabs

Accessible tabs (list, triggers, content panels).

Stable@zedtech/zedkit-ui

Wraps: @radix-ui/react-tabs

Website relaunch

Harbor Studio · due 14 November

11 of 20 tasks done

Owner: Maya Laurent
Team: 4 people
Status: On track
Next milestone: Design review, 3 November

View props table

Who is it for?: Developers grouping related panels under one heading.
When should I use it?: For sibling views that share context (settings groups, code variants).
When should I pick something else?: For sequential steps — use WizardSteps instead.

Use it

Examples import from the package. With copied source, import from @/components/ui/tabs instead.

Simple

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@zedtech/zedkit-ui";
<Tabs defaultValue="one"><TabsList>
<TabsTrigger value="one">First</TabsTrigger>
</TabsList><TabsContent value="one">First panel.</TabsContent></Tabs>

Controlled

Clinic agenda

Dr. Amara Diallo · Rue des Lilas

Showing: Week

Week 44: 31 appointments, busiest day is Thursday.

import { Tabs } from "@zedtech/zedkit-ui";
<Tabs value={tab} onValueChange={setTab}> // controlled: you own the state

Kit not installed yet?

You get

Every component from one import, with the theme tokens included. Updates arrive with your package manager.

You need

React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

Install

Terminal

pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

Load the styles

Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

src/app/globals.cssReplace the contents

@import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

Pick a look

Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

src/app/layout.tsxReplace the contents

import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

4
Load the fonts
The Glass look uses Inter and Space Grotesk; these imports self-host them.
src/app/fonts.tsCreate the file
```
import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";
```

Import and render

src/app/page.tsxReplace the contents

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Tabs defaultValue="one"><TabsList>
      <TabsTrigger value="one">First</TabsTrigger>
      </TabsList><TabsContent value="one">First panel.</TabsContent></Tabs>
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Show inherited HTML attributes

Standard attributes from the underlying element. See MDN.

Prop

Type

Accessibility

Arrow keys move between triggers (Radix roving tabindex); keep trigger text short so accessible names stay clear.

Troubleshooting

Panels not switching — each `TabsTrigger`/`TabsContent` pair shares one `value`; the root needs `defaultValue` (uncontrolled) or `value` + `onValueChange` (controlled). Focus ring missing — triggers use the `focus-ring` utility shipped in the brick css.

BrandLogo

Render your own logo as an inline SVG that paints with `currentColor`, so it follows the text colour in light, dark and every visual identity.

ScrollGallery

One snap-aligned horizontal scroll row with thin scrollbar, edge fade, and focused items scrolled into view.