Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update reference api link

Browse Source
This commit is contained in:
zernonia 2024-11-19 20:13:56 +08:00
parent da5f36227f
commit 5c4b16c76b
40 changed files with 46 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/www/package.json
View File

@ -23,7 +23,7 @@
"@tanstack/vue-table": "^8.20.5", "@tanstack/vue-table": "^8.20.5",
"@unovis/ts": "^1.4.4", "@unovis/ts": "^1.4.4",
"@unovis/vue": "^1.4.4", "@unovis/vue": "^1.4.4",
"@vee-validate/zod": "^4.14.7", "@vee-validate/zod": "^4.13.2",
"@vueuse/core": "^11.2.0", "@vueuse/core": "^11.2.0",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.1", "clsx": "^2.1.1",

2
apps/www/src/content/docs/components/accordion.md
View File

@ -2,7 +2,7 @@
title: Accordion title: Accordion
description: A vertically stacked set of interactive headings that each reveal a section of content. description: A vertically stacked set of interactive headings that each reveal a section of content.
source: apps/www/src/lib/registry/default/ui/accordion source: apps/www/src/lib/registry/default/ui/accordion
primitive: https://www.reka-ui.com/components/accordion.html primitive: https://www.reka-ui.com/docs/components/accordion.html
--- ---
<ComponentPreview name="AccordionDemo" class="sm:max-w-[70%]" /> <ComponentPreview name="AccordionDemo" class="sm:max-w-[70%]" />

2
apps/www/src/content/docs/components/alert-dialog.md
View File

@ -2,7 +2,7 @@
title: Alert Dialog title: Alert Dialog
description: A modal dialog that interrupts the user with important content and expects a response. description: A modal dialog that interrupts the user with important content and expects a response.
source: apps/www/src/lib/registry/default/ui/alert-dialog source: apps/www/src/lib/registry/default/ui/alert-dialog
primitive: https://www.reka-ui.com/components/alert-dialog.html primitive: https://www.reka-ui.com/docs/components/alert-dialog.html
--- ---
<ComponentPreview name="AlertDialogDemo" /> <ComponentPreview name="AlertDialogDemo" />

2
apps/www/src/content/docs/components/aspect-ratio.md
View File

@ -2,7 +2,7 @@
title: Aspect Ratio title: Aspect Ratio
description: Displays content within a desired ratio. description: Displays content within a desired ratio.
source: apps/www/src/lib/registry/default/ui/aspect-ratio source: apps/www/src/lib/registry/default/ui/aspect-ratio
primitive: https://www.reka-ui.com/components/aspect-ratio.html primitive: https://www.reka-ui.com/docs/components/aspect-ratio.html
--- ---
<ComponentPreview name="AspectRatioDemo" /> <ComponentPreview name="AspectRatioDemo" />

2
apps/www/src/content/docs/components/avatar.md
View File

@ -2,7 +2,7 @@
title: Avatar title: Avatar
description: An image element with a fallback for representing the user. description: An image element with a fallback for representing the user.
source: apps/www/src/lib/registry/default/ui/avatar source: apps/www/src/lib/registry/default/ui/avatar
primitive: https://www.reka-ui.com/components/avatar.html primitive: https://www.reka-ui.com/docs/components/avatar.html
--- ---
<ComponentPreview name="AvatarDemo" /> <ComponentPreview name="AvatarDemo" />

6
apps/www/src/content/docs/components/calendar.md
View File

@ -2,7 +2,7 @@
title: Calendar title: Calendar
description: A date field component that allows users to enter and edit date. description: A date field component that allows users to enter and edit date.
source: apps/www/src/lib/registry/default/ui/calendar source: apps/www/src/lib/registry/default/ui/calendar
primitive: https://www.reka-ui.com/components/calendar.html primitive: https://www.reka-ui.com/docs/components/calendar.html
--- ---
<ComponentPreview name="CalendarDemo" /> <ComponentPreview name="CalendarDemo" />
@ -15,7 +15,7 @@ If you're looking for **previous** Calendar implementation, checkout to <span cl
## About ## About
The `<Calendar />` component is built on top of the [RadixVue Calendar](https://www.reka-ui.com/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates. The `<Calendar />` component is built on top of the [RadixVue Calendar](https://www.reka-ui.com/docs/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
If you're looking for a range calendar, check out the [Range Calendar](/docs/components/range-calendar) component. If you're looking for a range calendar, check out the [Range Calendar](/docs/components/range-calendar) component.
@ -26,7 +26,7 @@ npx shadcn-vue@latest add calendar
``` ```
::: tip ::: tip
The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package, which solves a lot of the problems that come with working with dates and times in JavaScript. The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package, which solves a lot of the problems that come with working with dates and times in JavaScript.
Check [Dates & Times in Radix Vue](https://www.reka-ui.com/guides/dates.html) for more information and installation instructions. Check [Dates & Times in Radix Vue](https://www.reka-ui.com/docs/guides/dates.html) for more information and installation instructions.
::: :::
## Datepicker ## Datepicker

2
apps/www/src/content/docs/components/checkbox.md
View File

@ -2,7 +2,7 @@
title: Checkbox title: Checkbox
description: A control that allows the user to toggle between checked and not checked. description: A control that allows the user to toggle between checked and not checked.
source: apps/www/src/lib/registry/default/ui/checkbox source: apps/www/src/lib/registry/default/ui/checkbox
primitive: https://www.reka-ui.com/components/checkbox.html primitive: https://www.reka-ui.com/docs/components/checkbox.html
--- ---
<ComponentPreview name="CheckboxDemo" /> <ComponentPreview name="CheckboxDemo" />

2
apps/www/src/content/docs/components/collapsible.md
View File

@ -2,7 +2,7 @@
title: Collapsible title: Collapsible
description: An interactive component which expands/collapses a panel. description: An interactive component which expands/collapses a panel.
source: apps/www/src/lib/registry/default/ui/collapsible source: apps/www/src/lib/registry/default/ui/collapsible
primitive: https://www.reka-ui.com/components/collapsible.html primitive: https://www.reka-ui.com/docs/components/collapsible.html
--- ---
<ComponentPreview name="CollapsibleDemo" /> <ComponentPreview name="CollapsibleDemo" />

2
apps/www/src/content/docs/components/command.md
View File

@ -2,7 +2,7 @@
title: Command title: Command
description: Fast, composable, unstyled command menu. description: Fast, composable, unstyled command menu.
source: apps/www/src/lib/registry/default/ui/command source: apps/www/src/lib/registry/default/ui/command
primitive: https://www.reka-ui.com/components/combobox.html primitive: https://www.reka-ui.com/docs/components/combobox.html
--- ---
<ComponentPreview name="CommandDemo" /> <ComponentPreview name="CommandDemo" />

2
apps/www/src/content/docs/components/context-menu.md
View File

@ -2,7 +2,7 @@
title: Context Menu title: Context Menu
description: Displays a menu to the user — such as a set of actions or functions — triggered by a button. description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
source: apps/www/src/lib/registry/default/ui/context-menu source: apps/www/src/lib/registry/default/ui/context-menu
primitive: https://www.reka-ui.com/components/context-menu.html primitive: https://www.reka-ui.com/docs/components/context-menu.html
--- ---
<ComponentPreview name="ContextMenuDemo" /> <ComponentPreview name="ContextMenuDemo" />

2
apps/www/src/content/docs/components/date-picker.md
View File

@ -2,7 +2,7 @@
title: Date Picker title: Date Picker
description: A date picker component with range and presets. description: A date picker component with range and presets.
source: apps/www/src/lib/registry/default/example/DatePickerDemo.vue source: apps/www/src/lib/registry/default/example/DatePickerDemo.vue
primitive: https://www.reka-ui.com/components/calendar.html primitive: https://www.reka-ui.com/docs/components/calendar.html
--- ---
<ComponentPreview name="DatePickerDemo" /> <ComponentPreview name="DatePickerDemo" />

2
apps/www/src/content/docs/components/dialog.md
View File

@ -2,7 +2,7 @@
title: Dialog title: Dialog
description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
source: apps/www/src/lib/registry/default/ui/dialog source: apps/www/src/lib/registry/default/ui/dialog
primitive: https://www.reka-ui.com/components/dialog.html primitive: https://www.reka-ui.com/docs/components/dialog.html
--- ---
<ComponentPreview name="DialogDemo" /> <ComponentPreview name="DialogDemo" />

2
apps/www/src/content/docs/components/dropdown-menu.md
View File

@ -2,7 +2,7 @@
title: Dropdown Menu title: Dropdown Menu
description: Displays a menu to the user — such as a set of actions or functions — triggered by a button. description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
source: apps/www/src/lib/registry/default/ui/dropdown-menu source: apps/www/src/lib/registry/default/ui/dropdown-menu
primitive: https://www.reka-ui.com/components/dropdown-menu.html primitive: https://www.reka-ui.com/docs/components/dropdown-menu.html
--- ---
<ComponentPreview name="DropdownMenuDemo" /> <ComponentPreview name="DropdownMenuDemo" />

2
apps/www/src/content/docs/components/hover-card.md
View File

@ -2,7 +2,7 @@
title: Hover Card title: Hover Card
description: For sighted users to preview content available behind a link. description: For sighted users to preview content available behind a link.
source: apps/www/src/lib/registry/default/ui/hover-card source: apps/www/src/lib/registry/default/ui/hover-card
primitive: https://www.reka-ui.com/components/hover-card.html primitive: https://www.reka-ui.com/docs/components/hover-card.html
--- ---
<ComponentPreview name="HoverCardDemo" /> <ComponentPreview name="HoverCardDemo" />

2
apps/www/src/content/docs/components/label.md
View File

@ -2,7 +2,7 @@
title: Label title: Label
description: Renders an accessible label associated with controls. description: Renders an accessible label associated with controls.
source: apps/www/src/lib/registry/default/ui/label source: apps/www/src/lib/registry/default/ui/label
primitive: https://www.reka-ui.com/components/label.html primitive: https://www.reka-ui.com/docs/components/label.html
--- ---
<ComponentPreview name="LabelDemo" /> <ComponentPreview name="LabelDemo" />

2
apps/www/src/content/docs/components/menubar.md
View File

@ -2,7 +2,7 @@
title: Menubar title: Menubar
description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands. description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
source: apps/www/src/lib/registry/default/ui/menubar source: apps/www/src/lib/registry/default/ui/menubar
primitive: https://www.reka-ui.com/components/menubar.html primitive: https://www.reka-ui.com/docs/components/menubar.html
--- ---
<ComponentPreview name="MenubarDemo" /> <ComponentPreview name="MenubarDemo" />

2
apps/www/src/content/docs/components/navigation-menu.md
View File

@ -2,7 +2,7 @@
title: Navigation Menu title: Navigation Menu
description: A collection of links for navigating websites. description: A collection of links for navigating websites.
source: apps/www/src/lib/registry/default/ui/navigation-menu source: apps/www/src/lib/registry/default/ui/navigation-menu
primitive: https://www.reka-ui.com/components/navigation-menu.html primitive: https://www.reka-ui.com/docs/components/navigation-menu.html
--- ---
<ComponentPreview name="NavigationMenuDemo" /> <ComponentPreview name="NavigationMenuDemo" />

2
apps/www/src/content/docs/components/number-field.md
View File

@ -2,7 +2,7 @@
title: Number Field title: Number Field
description: A number field allows a user to enter a number and increment or decrement the value using stepper buttons. description: A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
source: apps/www/src/lib/registry/default/ui/number-field source: apps/www/src/lib/registry/default/ui/number-field
primitive: https://www.reka-ui.com/components/number-field.html primitive: https://www.reka-ui.com/docs/components/number-field.html
--- ---
<ComponentPreview name="NumberFieldDemo" class="max-w-[180px]" /> <ComponentPreview name="NumberFieldDemo" class="max-w-[180px]" />

2
apps/www/src/content/docs/components/pagination.md
View File

@ -2,7 +2,7 @@
title: Pagination title: Pagination
description: Displays data in paged format and provides navigation between pages. description: Displays data in paged format and provides navigation between pages.
source: apps/www/src/lib/registry/default/ui/pagination source: apps/www/src/lib/registry/default/ui/pagination
primitive: https://www.reka-ui.com/components/pagination.html primitive: https://www.reka-ui.com/docs/components/pagination.html
--- ---
<ComponentPreview name="PaginationDemo" /> <ComponentPreview name="PaginationDemo" />

2
apps/www/src/content/docs/components/pin-input.md
View File

@ -2,7 +2,7 @@
title: PIN Input title: PIN Input
description: Allows users to input a sequence of one-character alphanumeric inputs. description: Allows users to input a sequence of one-character alphanumeric inputs.
source: apps/www/src/lib/registry/default/ui/pin-input source: apps/www/src/lib/registry/default/ui/pin-input
primitive: https://www.reka-ui.com/components/pin-input.html primitive: https://www.reka-ui.com/docs/components/pin-input.html
--- ---
<ComponentPreview name="PinInputDemo" /> <ComponentPreview name="PinInputDemo" />

2
apps/www/src/content/docs/components/popover.md
View File

@ -2,7 +2,7 @@
title: Popover title: Popover
description: Displays rich content in a portal, triggered by a button. description: Displays rich content in a portal, triggered by a button.
source: apps/www/src/lib/registry/default/ui/popover source: apps/www/src/lib/registry/default/ui/popover
primitive: https://www.reka-ui.com/components/popover.html primitive: https://www.reka-ui.com/docs/components/popover.html
--- ---
<ComponentPreview name="PopoverDemo" /> <ComponentPreview name="PopoverDemo" />

2
apps/www/src/content/docs/components/progress.md
View File

@ -2,7 +2,7 @@
title: Progress title: Progress
description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
source: apps/www/src/lib/registry/default/ui/progress source: apps/www/src/lib/registry/default/ui/progress
primitive: https://www.reka-ui.com/components/progress.html primitive: https://www.reka-ui.com/docs/components/progress.html
--- ---
<ComponentPreview name="ProgressDemo" /> <ComponentPreview name="ProgressDemo" />

2
apps/www/src/content/docs/components/radio-group.md
View File

@ -2,7 +2,7 @@
title: Radio Group title: Radio Group
description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
source: apps/www/src/lib/registry/default/ui/radio-group source: apps/www/src/lib/registry/default/ui/radio-group
primitive: https://www.reka-ui.com/components/radio-group.html primitive: https://www.reka-ui.com/docs/components/radio-group.html
--- ---
<ComponentPreview name="RadioGroupDemo" /> <ComponentPreview name="RadioGroupDemo" />

4
apps/www/src/content/docs/components/range-calendar.md
View File

@ -2,14 +2,14 @@
title: Range Calendar title: Range Calendar
description: A calendar component that allows users to select a range of dates. description: A calendar component that allows users to select a range of dates.
source: apps/www/src/lib/registry/default/ui/range-calendar source: apps/www/src/lib/registry/default/ui/range-calendar
primitive: https://www.reka-ui.com/components/range-calendar.html primitive: https://www.reka-ui.com/docs/components/range-calendar.html
--- ---
<ComponentPreview name="RangeCalendarDemo" /> <ComponentPreview name="RangeCalendarDemo" />
## About ## About
The `<RangeCalendar />` component is built on top of the [RadixVue Range Calendar](https://www.reka-ui.com/components/date-range-picker.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates. The `<RangeCalendar />` component is built on top of the [RadixVue Range Calendar](https://www.reka-ui.com/docs/components/date-range-picker.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
## Installation ## Installation

2
apps/www/src/content/docs/components/resizable.md
View File

@ -2,7 +2,7 @@
title: Resizable title: Resizable
description: Accessible resizable panel groups and layouts with keyboard support. description: Accessible resizable panel groups and layouts with keyboard support.
source: apps/www/src/lib/registry/default/ui/resizable source: apps/www/src/lib/registry/default/ui/resizable
primitive: https://www.reka-ui.com/components/splitter.html primitive: https://www.reka-ui.com/docs/components/splitter.html
--- ---
<ComponentPreview name="ResizableDemo" /> <ComponentPreview name="ResizableDemo" />

2
apps/www/src/content/docs/components/scroll-area.md
View File

@ -2,7 +2,7 @@
title: Scroll-area title: Scroll-area
description: Augments native scroll functionality for custom, cross-browser styling. description: Augments native scroll functionality for custom, cross-browser styling.
source: apps/www/src/lib/registry/default/ui/scroll-area source: apps/www/src/lib/registry/default/ui/scroll-area
primitive: https://www.reka-ui.com/components/scroll-area.html primitive: https://www.reka-ui.com/docs/components/scroll-area.html
--- ---
<ComponentPreview name="ScrollAreaDemo" /> <ComponentPreview name="ScrollAreaDemo" />

2
apps/www/src/content/docs/components/select.md
View File

@ -2,7 +2,7 @@
title: Select title: Select
description: Displays a list of options for the user to pick from—triggered by a button. description: Displays a list of options for the user to pick from—triggered by a button.
source: apps/www/src/lib/registry/default/ui/select source: apps/www/src/lib/registry/default/ui/select
primitive: https://www.reka-ui.com/components/select.html primitive: https://www.reka-ui.com/docs/components/select.html
--- ---
<ComponentPreview name="SelectDemo" /> <ComponentPreview name="SelectDemo" />

2
apps/www/src/content/docs/components/separator.md
View File

@ -2,7 +2,7 @@
title: Separator title: Separator
description: Visually or semantically separates content. description: Visually or semantically separates content.
source: apps/www/src/lib/registry/default/ui/separator source: apps/www/src/lib/registry/default/ui/separator
primitive: https://www.reka-ui.com/components/separator.html primitive: https://www.reka-ui.com/docs/components/separator.html
--- ---
<ComponentPreview name="SeparatorDemo" /> <ComponentPreview name="SeparatorDemo" />

2
apps/www/src/content/docs/components/sheet.md
View File

@ -2,7 +2,7 @@
title: Sheet title: Sheet
description: Extends the Dialog component to display content that complements the main content of the screen. description: Extends the Dialog component to display content that complements the main content of the screen.
source: apps/www/src/lib/registry/default/ui/sheet source: apps/www/src/lib/registry/default/ui/sheet
primitive: https://www.reka-ui.com/components/dialog.html primitive: https://www.reka-ui.com/docs/components/dialog.html
--- ---
<ComponentPreview name="SheetDemo" /> <ComponentPreview name="SheetDemo" />

2
apps/www/src/content/docs/components/slider.md
View File

@ -2,7 +2,7 @@
title: Slider title: Slider
description: An input where the user selects a value from within a given range. description: An input where the user selects a value from within a given range.
source: apps/www/src/lib/registry/default/ui/slider source: apps/www/src/lib/registry/default/ui/slider
primitive: https://www.reka-ui.com/components/slider.html primitive: https://www.reka-ui.com/docs/components/slider.html
--- ---
<ComponentPreview name="SliderDemo" /> <ComponentPreview name="SliderDemo" />

2
apps/www/src/content/docs/components/stepper.md
View File

@ -2,7 +2,7 @@
title: Stepper title: Stepper
description: A set of steps that are used to indicate progress through a multi-step process. description: A set of steps that are used to indicate progress through a multi-step process.
source: apps/www/src/lib/registry/default/ui/stepper source: apps/www/src/lib/registry/default/ui/stepper
primitive: https://www.reka-ui.com/components/stepper.html primitive: https://www.reka-ui.com/docs/components/stepper.html
--- ---
<ComponentPreview name="StepperDemo" /> <ComponentPreview name="StepperDemo" />

2
apps/www/src/content/docs/components/switch.md
View File

@ -2,7 +2,7 @@
title: Switch title: Switch
description: A control that allows the user to toggle between checked and not checked. description: A control that allows the user to toggle between checked and not checked.
source: apps/www/src/lib/registry/default/ui/switch source: apps/www/src/lib/registry/default/ui/switch
primitive: https://www.reka-ui.com/components/switch.html primitive: https://www.reka-ui.com/docs/components/switch.html
--- ---
<ComponentPreview name="SwitchDemo" /> <ComponentPreview name="SwitchDemo" />

2
apps/www/src/content/docs/components/tabs.md
View File

@ -2,7 +2,7 @@
title: Tabs title: Tabs
description: A set of layered sections of content—known as tab panels—that are displayed one at a time. description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
source: apps/www/src/lib/registry/default/ui/tabs source: apps/www/src/lib/registry/default/ui/tabs
primitive: https://www.reka-ui.com/components/tabs.html primitive: https://www.reka-ui.com/docs/components/tabs.html
--- ---
<ComponentPreview name="TabsDemo" /> <ComponentPreview name="TabsDemo" />

2
apps/www/src/content/docs/components/tags-input.md
View File

@ -2,7 +2,7 @@
title: Tags Input title: Tags Input
description: Tag inputs render tags inside an input, followed by an actual text input. description: Tag inputs render tags inside an input, followed by an actual text input.
source: apps/www/src/lib/registry/default/ui/tags-input source: apps/www/src/lib/registry/default/ui/tags-input
primitive: https://www.reka-ui.com/components/tags-input.html primitive: https://www.reka-ui.com/docs/components/tags-input.html
--- ---
<ComponentPreview name="TagsInputDemo" /> <ComponentPreview name="TagsInputDemo" />

2
apps/www/src/content/docs/components/toast.md
View File

@ -2,7 +2,7 @@
title: Toast title: Toast
description: A succinct message that is displayed temporarily. description: A succinct message that is displayed temporarily.
source: apps/www/src/lib/registry/default/ui/toast source: apps/www/src/lib/registry/default/ui/toast
primitive: https://www.reka-ui.com/components/toast.html primitive: https://www.reka-ui.com/docs/components/toast.html
--- ---
<ComponentPreview name="ToastDemo" /> <ComponentPreview name="ToastDemo" />

2
apps/www/src/content/docs/components/toggle-group.md
View File

@ -2,7 +2,7 @@
title: Toggle Group title: Toggle Group
description: A set of two-state buttons that can be toggled on or off. description: A set of two-state buttons that can be toggled on or off.
source: apps/www/src/lib/registry/default/ui/toggle-group source: apps/www/src/lib/registry/default/ui/toggle-group
primitive: https://www.reka-ui.com/components/toggle-group.html primitive: https://www.reka-ui.com/docs/components/toggle-group.html
--- ---
<ComponentPreview name="ToggleGroupDemo" /> <ComponentPreview name="ToggleGroupDemo" />

2
apps/www/src/content/docs/components/toggle.md
View File

@ -2,7 +2,7 @@
title: Toggle title: Toggle
description: A two-state button that can be either on or off. description: A two-state button that can be either on or off.
source: apps/www/src/lib/registry/default/ui/toggle source: apps/www/src/lib/registry/default/ui/toggle
primitive: https://www.reka-ui.com/components/toggle.html primitive: https://www.reka-ui.com/docs/components/toggle.html
--- ---
<ComponentPreview name="ToggleDemo" /> <ComponentPreview name="ToggleDemo" />

2
apps/www/src/content/docs/components/tooltip.md
View File

@ -2,7 +2,7 @@
title: Tooltip title: Tooltip
description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
source: apps/www/src/lib/registry/default/ui/tooltip source: apps/www/src/lib/registry/default/ui/tooltip
primitive: https://www.reka-ui.com/components/tooltip.html primitive: https://www.reka-ui.com/docs/components/tooltip.html
--- ---
<ComponentPreview name="TooltipDemo" /> <ComponentPreview name="TooltipDemo" />

8
apps/www/src/content/docs/contribution.md
View File

@ -180,7 +180,7 @@ There are many cases that you need to wrap `Reka UI` components.
### Props & Events ### Props & Events
All of the `Reka UI` compoennts expose their prop and emit types. We need to forward any props/events that are coming from outside to the `Reka UI` component. All of the `Reka UI` compoennts expose their prop and emit types. We need to forward any props/events that are coming from outside to the `Reka UI` component.
To do so, we have a helper function named [`useForwardPropsEmits`](https://www.reka-ui.com/utilities/use-forward-props-emits.html) that combines props and events that must be binded to the child radix component. To do so, we have a helper function named [`useForwardPropsEmits`](https://www.reka-ui.com/docs/utilities/use-forward-props-emits.html) that combines props and events that must be binded to the child radix component.
To be more clear, the function `useForwardPropsEmits` takes in props and an optional emit function, and returns a To be more clear, the function `useForwardPropsEmits` takes in props and an optional emit function, and returns a
computed object that combines the parsed props and emits as props. computed object that combines the parsed props and emits as props.
@ -264,7 +264,7 @@ const props = defineProps<SelectValueProps>()
### Boolean Props ### Boolean Props
When you are building a wrapper for a component, in some cases you want to ignore Vue [Props Boolean Casting](https://vuejs.org/guide/components/props.html#boolean-casting). When you are building a wrapper for a component, in some cases you want to ignore Vue [Props Boolean Casting](https://vuejs.org/guide/components/props.html#boolean-casting).
You can either set default value as undefined for all the boolean field, or you can use [`useForwardProps`](https://www.reka-ui.com/utilities/use-forward-props.html) composable. You can either set default value as undefined for all the boolean field, or you can use [`useForwardProps`](https://www.reka-ui.com/docs/utilities/use-forward-props.html) composable.
Take a look at `AccordionItem.vue` Take a look at `AccordionItem.vue`
@ -300,7 +300,7 @@ Since `AccordionItemProps` type has atleast one boolean property, we need to use
Note that `useForwardPropsEmits` use `useForwardProps` under the hood. Note that `useForwardPropsEmits` use `useForwardProps` under the hood.
### Component as Root ### Component as Root
Whenever your root component is a `Component` Primitive from vue, it's easier to use [`Primitive`](https://www.reka-ui.com/utilities/primitive.html) instead. Whenever your root component is a `Component` Primitive from vue, it's easier to use [`Primitive`](https://www.reka-ui.com/docs/utilities/primitive.html) instead.
Let's take a look at `Button.vue` Let's take a look at `Button.vue`
@ -333,7 +333,7 @@ const props = withDefaults(defineProps<Props>(), {
</template> </template>
``` ```
You'll need to extend `PrimitiveProps` in your props to support `Primitive` component. In most cases you would also need a default value for [`as`](https://www.reka-ui.com/utilities/primitive.html#changing-as-value) property. You'll need to extend `PrimitiveProps` in your props to support `Primitive` component. In most cases you would also need a default value for [`as`](https://www.reka-ui.com/docs/utilities/primitive.html#changing-as-value) property.
## Updating with `shadcn/ui` ## Updating with `shadcn/ui`

2
pnpm-lock.yaml
View File

@ -87,7 +87,7 @@ importers:
specifier: ^1.4.4 specifier: ^1.4.4
version: 1.4.4(@unovis/ts@1.4.4)(vue@3.5.13(typescript@5.6.3)) version: 1.4.4(@unovis/ts@1.4.4)(vue@3.5.13(typescript@5.6.3))
'@vee-validate/zod': '@vee-validate/zod':
specifier: ^4.14.7 specifier: ^4.13.2
version: 4.14.7(vue@3.5.13(typescript@5.6.3)) version: 4.14.7(vue@3.5.13(typescript@5.6.3))
'@vueuse/core': '@vueuse/core':
specifier: ^11.2.0 specifier: ^11.2.0