docs: integrate @nuxt/ui-pro (#739)

Co-authored-by: Pooya Parsa <pooya@pi0.io>
Co-authored-by: Florent Delerue <florentdelerue@hotmail.com>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/content/2.elements/11.meter.md

@@ -117,7 +117,7 @@ To group multiple meters into a group, adding all values, use the `MeterGroup` c
 - To show a label for each meter, use the `label` prop on each meter.
 - To change the icon for each meter, use the `icon` prop.
 
-::component-card{slug="MeterGroup"}
+::component-card{slug="UMeterGroup"}
 ---
 baseProps:
   icon: i-heroicons-minus
@@ -169,7 +169,7 @@ The `label` slot can be used to change how the label below the meter bar is show
 
 :u-divider{label="MeterGroup" type="dashed" class="my-12"}
 
-:component-props{slug="MeterGroup"}
+:component-props{slug="UMeterGroup"}
 
 ## Config
 

docs/content/2.elements/3.avatar.md

@@ -90,7 +90,7 @@ To stack avatars as a group, use the `AvatarGroup` component.
 - To size all the avatars equally, pass the `size` prop
 - To adjust the spacing or the ring between avatars, customize with `ui.avatarGroup.margin` or `ui.avatarGroup.ring`
 
-::component-card{slug="AvatarGroup"}
+::component-card{slug="UAvatarGroup"}
 ---
 props:
   size: 'sm'
@@ -113,10 +113,10 @@ code: |
 
 :u-divider{label="AvatarGroup" type="dashed" class="my-12"}
 
-:component-props{slug="avatar-group"}
+:component-props{slug="UAvatarGroup"}
 
 ## Config
 
 :component-preset
 
-:component-preset{slug="avatar-group"}
+:component-preset{slug="AvatarGroup"}

docs/content/2.elements/5.button.md

@@ -295,7 +295,7 @@ To stack buttons as a group, use the `ButtonGroup` component.
 - To change the orientation of the buttons, set the `orientation` prop to `vertical`
 - To adjust the rounded or the shadow around buttons, customize with `ui.buttonGroup.rounded` or `ui.buttonGroup.shadow`
 
-::component-card{slug="ButtonGroup"}
+::component-card{slug="UButtonGroup"}
 ---
 props:
   size: 'sm'
@@ -312,7 +312,7 @@ code: |
 
 This can also work with an [Input](/forms/input) component for example:
 
-::component-card{slug="ButtonGroup"}
+::component-card{slug="UButtonGroup"}
 ---
 props:
   size: 'sm'
@@ -375,7 +375,7 @@ excludedProps:
 
 :u-divider{label="ButtonGroup" type="dashed" class="my-12"}
 
-:component-props{slug="ButtonGroup"}
+:component-props{slug="UButtonGroup"}
 
 ## Config