ProComponentsProse

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.