Things

The Tabs component provides a way to organize content into multiple panels, with only one panel visible at a time. Users can switch between panels by clicking on the corresponding tab trigger. Built from scratch using React and native HTML elements. No dependencies on any UI library.

Quick Install

Install via shadcn/ui CLI

bash

npx shadcn@latest add https://things.marvlock.dev/registry/ui/tabs.json

Usage

tsx

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

function MyComponent() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <div className="space-y-4">
          <h3 className="text-lg font-bold">Account</h3>
          <p>Configure your Things component library settings here.</p>
        </div>
      </TabsContent>
      <TabsContent value="password">
        <div className="space-y-4">
          <h3 className="text-lg font-bold">Password</h3>
          <p>Change your password here.</p>
        </div>
      </TabsContent>
    </Tabs>
  )
}

Examples

Default

Account

Configure your Things component library settings here. Click save when you're done.

Name

Username