Tabs

Implementation

This component is built on top of Radix UI's Tabs primitive.

Component preview

import * as UI from "@iyk/ui"

export default () => (
  <div className="w-full">
    <UI.Tabs.Root defaultValue="tab1">
      <UI.Tabs.List>
        <UI.Tabs.Trigger value="tab1">Account</UI.Tabs.Trigger>
        <UI.Tabs.Trigger value="tab2">Preferences</UI.Tabs.Trigger>
        <UI.Tabs.Trigger value="tab3">Notifications</UI.Tabs.Trigger>
      </UI.Tabs.List>
      <UI.Tabs.Content value="tab1">
        <div className="p-4 rounded-lg bg-gray-2 flex flex-col gap-1">
          <h3 className="text-sm">Account Settings</h3>
          <p className="text-sm text-gray-11">Manage your account preferences and settings.</p>
        </div>
      </UI.Tabs.Content>
      <UI.Tabs.Content value="tab2">
        <div className="p-4 rounded-lg bg-gray-2 flex flex-col gap-1">
          <h3 className="text-sm">User Preferences</h3>
          <p className="text-sm text-gray-11">Customize your application experience.</p>
        </div>
      </UI.Tabs.Content>
      <UI.Tabs.Content value="tab3">
        <div className="p-4 rounded-lg bg-gray-2 flex flex-col gap-1">
          <h3 className="text-sm">Notification Settings</h3>
          <p className="text-sm text-gray-11">Configure how you receive notifications.</p>
        </div>
      </UI.Tabs.Content>
    </UI.Tabs.Root>
  </div>
)