Components

A navigation component for organizing content into separate panels.

Account
Make changes to your account here. Click save when you're done.

Installation

npm install @mijn-ui/react-tabs

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@mijn-ui/react-tabs"
<Tabs defaultValue="account" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Make changes to your account here.</TabsContent>
  <TabsContent value="password">Change your password here.</TabsContent>
</Tabs>

API Reference

Built on Radix UI — all underlying primitive props are forwarded in addition to the props below.

PropTypeDefaultDescription
unstyledbooleanfalseOpt out of the default styles to fully customize the component.
classNamesobjectOverride classes per slot (see Style Slots below).
classNamestringAdditional classes for the root element.

Tabs Style Slots

Slot NameTargeted ComponentPurpose
baseTabsStyles the root tabs component.
listTabsListStyles the list of tabs.
triggerTabsTriggerStyles individual tab triggers.
contentTabsContentStyles the content for individual tabs.