docs: update

docs/content/2.components/radio-group.md

@@ -2,171 +2,18 @@
 title: RadioGroup
 description: Display a set of radio buttons.
 links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/radio-group.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/RadioGroup.vue
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/RadioGroup.vue
 ---
 
 ## Usage
 
-Use a `v-model` to make the RadioGroup reactive.
+## Examples
 
-:component-example{component="radio-group-example"}
+:component-api
 
-Alternatively, you can use individual Radio components:
-
-:component-example{component="radio-example"}
-
-::callout{icon="i-heroicons-light-bulb"}
-If using the RadioGroup component, you can customize the Radio options by using the `uiRadio` prop.
-::
-
-### Legend
-
-Use the `legend` prop to add a legend to the RadioGroup.
-
-::component-card
----
-baseProps:
-  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
-  modelValue: 'sms'
-props:
-  legend: 'Legend'
----
-::
-
-### Style
-
-Use the `color` prop to change the style of the RadioGroup.
-
-::component-card
----
-baseProps:
-  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
-  modelValue: 'sms'
-props:
-  color: 'primary'
----
-::
-
-::callout{icon="i-heroicons-light-bulb"}
-This prop also work on the Radio component.
-::
-
-### Orientation
-
-You can change the orientation of the divider by setting the `orientation` prop to `horizontal` or `vertical`. Defaults to `vertical`.
-
-::component-card
----
-baseProps:
-  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
-  modelValue: 'sms'
-props:
-  orientation: 'horizontal'
----
-::
-
-### Disabled
-
-Use the `disabled` prop to disable the RadioGroup.
-
-::component-card
----
-baseProps:
-  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification', disabled: true }]
-  modelValue: 'sms'
-props:
-  disabled: true
----
-::
-
-::callout{icon="i-heroicons-light-bulb"}
-This prop also work on the Radio component and you can set the `disabled` field in the `options` to disable a specific Radio.
-::
-
-### Label
-
-Use the `label` prop to display a label on the right of the Radio.
-
-::component-card{slug="URadio"}
----
-props:
-  label: 'Label'
----
-::
-
-### Required
-
-Use the `required` prop to display a red star next to the label of the Radio.
-
-::component-card{slug="URadio"}
----
-props:
-  label: 'Label'
-  required: true
----
-::
-
-### Help
-
-Use the `help` prop to display some text under the Radio.
-
-::component-card{slug="URadio"}
----
-props:
-  label: 'Label'
-  help: 'Please choose one'
----
-::
-
-## Slots
-
-### `label`
-
-Use the `#label` slot to override the label of each option.
-
-:component-example{component="radio-group-label-example"}
-
-Alternatively, you can do the same with individual Radio:
-
-::component-card{slug="URadio"}
----
-slots:
-  label: <span class="italic">Label</span>
----
-
-#label
-  [Label]{.italic}
-::
-
-### `legend`
-
-Use the `#legend` slot to override the content of the legend.
-
-::component-card
----
-baseProps:
-  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
-  modelValue: 'sms'
-slots:
-  legend: <span class="italic">Legend</span>
----
-
-#legend
-  [Legend]{.italic}
-::
-
-## Props
-
-::tabs
-  :component-props{label="Radio" slug="URadio"}
-  :component-props{label="RadioGroup"}
-::
-
-## Config
-
-::tabs
-  :component-preset{label="Radio" slug="Radio"}
-  :component-preset{label="RadioGroup"}
-::
+:component-theme