Navigation

Tabs

One view at a time, with proper keyboard navigation.

OSCL StudioComponents, in context.Live preview

FOUNDATION / NAVIGATION

Tabs

A little overview of everything you are building.

Interactive preview. Real components.View docs

Use it in your project

Install oscl-ui from npm and import oscl-ui/styles.css once. See installation.

tabs-example.tsx

import { Tabs, TabsList, TabsTrigger, TabsContent } from "oscl-ui";

<Tabs defaultValue="preview">
  <TabsList aria-label="Example">
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">Your preview</TabsContent>
  <TabsContent value="code">Your source</TabsContent>
</Tabs>

Accessibility

Keep visible labels and keyboard focus. Supply an accessible name to icon-only actions. Try this preview with Tab, Enter, Space, and Escape where appropriate.

The source, in full

This is the actual source from the isolated OSCL package used by this website. Native props and TypeScript declarations are included in the npm package.

tabs.tsx

"use client";

import * as Primitive from "@radix-ui/react-tabs";
import { forwardRef } from "react";
import type { ComponentPropsWithoutRef, ComponentRef } from "react";

export const Tabs = forwardRef<ComponentRef<typeof Primitive.Root>, ComponentPropsWithoutRef<typeof Primitive.Root>>(function Tabs({ className = "", ...props }, ref) {
  return <Primitive.Root {...props} ref={ref} className={`oscl-tabs ${className}`} />;
});
export const TabsList = forwardRef<ComponentRef<typeof Primitive.List>, ComponentPropsWithoutRef<typeof Primitive.List>>(function TabsList({ className = "", ...props }, ref) {
  return <Primitive.List {...props} ref={ref} className={`oscl-tabs-list ${className}`} />;
});
export const TabsTrigger = forwardRef<ComponentRef<typeof Primitive.Trigger>, ComponentPropsWithoutRef<typeof Primitive.Trigger>>(function TabsTrigger({ className = "", ...props }, ref) {
  return <Primitive.Trigger {...props} ref={ref} className={`oscl-tabs-trigger ${className}`} />;
});
export const TabsContent = forwardRef<ComponentRef<typeof Primitive.Content>, ComponentPropsWithoutRef<typeof Primitive.Content>>(function TabsContent({ className = "", ...props }, ref) {
  return <Primitive.Content {...props} ref={ref} className={`oscl-tabs-content ${className}`} />;
});