docs: update

docs/content/2.components/tabs.md

@@ -1,108 +1,18 @@
 ---
 description: A set of tab panels that are displayed one at a time.
 links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/tabs.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/Tabs.vue
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Tabs.vue
 ---
 
 ## Usage
 
-Pass an array to the `items` prop of the Tabs component. Each item can have the following properties:
+## Examples
 
-- `label` - The label of the item.
-- `slot` - A key to customize the item with a slot.
-- `content` - The content to display in the panel by default.
-- `disabled` - Determines whether the item is disabled or not.
+:component-api
 
-::component-example
----
-component: 'tabs-example-basic'
-componentProps:
-  class: 'w-full'
----
-::
-
-### Vertical
-
-You can change the orientation of the tabs by setting the `orientation` prop to `vertical`.
-
-::component-example
----
-component: 'tabs-example-vertical'
-componentProps:
-  class: 'w-full'
----
-::
-
-### Default index
-
-You can set the default index of the tabs by setting the `default-index` prop.
-
-::component-example
----
-component: 'tabs-example-index'
-componentProps:
-  class: 'w-full'
----
-::
-
-::callout{icon="i-heroicons-exclamation-triangle"}
-  This will have no effect if you are using a `v-model` to control the selected index.
-::
-
-### Listen to changes
-
-You can listen to changes by using the `@change` event. The event will emit the index of the selected item.
-
-::component-example
----
-component: 'tabs-example-change'
-componentProps:
-  class: 'w-full'
----
-::
-
-### Control the selected index
-
-Use a `v-model` to control the selected index.
-
-::component-example
----
-component: 'tabs-example-v-model'
-componentProps:
-  class: 'w-full'
----
-::
-
-::callout{icon="i-heroicons-information-circle"}
-In this example, we are binding tabs to the route query. Refresh the page to see the selected tab change.
-::
-
-## Slots
-
-You can use slots to customize the buttons and items content of the Accordion.
-
-### `default`
-
-Use the `#default` slot to customize the content of the trigger buttons. You will have access to the `item`, `index`, `selected` and `disabled` in the slot scope.
-
-:component-example{component="tabs-example-default-slot"}
-
-### `item`
-
-Use the `#item` slot to customize the items content. You will have access to the `item`, `index` and `selected` properties in the slot scope.
-
-:component-example{component="tabs-example-item-slot"}
-
-You can also pass a `slot` property to customize a specific item.
-
-:component-example{component="tabs-example-item-custom-slot"}
-
-## Props
-
-:component-props
-
-## Config
-
-:component-preset
+:component-theme