Motoko UI

Manage your account details and public profile.

Installation


pnpm dlx shadcn@latest add @motokoui/tabs

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
export default function Example() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Account panel</TabsContent>
      <TabsContent value="password">Password panel</TabsContent>
    </Tabs>
  )
}

Anatomy

<Tabs>
  <TabsList>
    <TabsTrigger />
  </TabsList>
  <TabsContent />
</Tabs>

Props

Tabs

Prop	Type	Default
`value`	`string`	—
`defaultValue`	`string`	`""`
`onValueChange`	`(value: string) => void`	—
`disableAnimation`	`boolean`	`false`
`className`	`string`	—

TabsTrigger

Prop	Type	Default
`value`	`string`	required
`disabled`	`boolean`	`false`

TabsContent

Prop	Type	Default
`value`	`string`	required
`forceMount`	`boolean`	`false`