Nuxt UI Pro v1.0 is out with dashboard components! Discount ends 16 hours ago.

Tabs

Toggle content using the Tabs component.

Usage

Wrap your content around a Tabs component. You can pass the label and icon props to the children to customize the tab.

::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::tabs
  ::div
  ---
  label: Code
  icon: i-heroicons-code-bracket-square
  ---

  ```mdc
  ::callout
  Lorem velit voluptate ex reprehenderit ullamco et culpa.
  ::
  ```
  ::

  ::div
  ---
  label: Preview
  icon: i-heroicons-magnifying-glass-circle
  ---

  ::callout
  Lorem velit voluptate ex reprehenderit ullamco et culpa.
  ::
  ::
::
You might need to wrap your children in a div if you don't want to pass-through props or when using code-blocks.

Config

{
  wrapper: 'relative my-5 space-y-6',
  header: 'flex items-center relative',
  border: 'absolute bottom-0 inset-x-0 w-full h-px bg-gray-200 dark:bg-gray-800',
  tab: {
    base: 'px-4 py-2.5 font-semibold text-sm/6 flex items-center gap-1.5 border-b z-[1] focus-visible:outline-primary',
    active: 'text-primary border-primary',
    inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 border-transparent hover:border-gray-300 dark:hover:border-gray-700',
    icon: {
      base: 'w-5 h-5 flex-shrink-0'
    }
  }
}