Motion Tabs

A compact summary of the current workspace signal.

MRR

$48.2k+12%

Accounts

1,284+8%

Health

96%+4%

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/motion-tabs.json

Usage

import { MotionTabs } from "@/components/matos-ui/motion-tabs"

<MotionTabs
  items={[
    {
      value: "overview",
      label: "Overview",
      badge: "Live",
      content: <div>Overview content</div>,
    },
    {
      value: "billing",
      label: "Billing",
      content: <div>Billing content</div>,
    },
  ]}
/>

Reference

MotionTabs Props

Prop	Type	Default	Description
`items`	`MotionTabItem[]`	-	Tabs and panel content.
`value`	`string?`	-	Controlled selected value.
`defaultValue`	`string?`	-	Initial uncontrolled value.
`onValueChange`	`(value: string) => void`	-	Called when a tab is selected.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Max width preset.
`listClassName`	`string?`	-	Classes for the tab list.
`panelClassName`	`string?`	-	Classes for the active panel.

MotionTabItem

Field	Type	Description
`value`	`string`	Unique tab value.
`label`	`ReactNode`	Visible tab label.
`icon`	`ReactNode`	Optional leading icon.
`badge`	`ReactNode`	Optional compact badge.
`description`	`ReactNode`	Optional panel description.
`content`	`ReactNode`	Panel content for the tab.
`disabled`	`boolean`	Disables the tab.

Also exported: motionTabsVariants, MotionTabItem, and MotionTabsProps.