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

refactor: radix-vue to reka-ui

Browse Source
This commit is contained in:
zernonia 2024-11-04 18:19:28 +08:00
parent be888c80b6
commit d2b3a8783c
613 changed files with 1093 additions and 1075 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.github/ISSUE_TEMPLATE/bug-report.yml vendored
View File

@ -10,8 +10,8 @@ body:
This form is only for submitting bug reports. If you have a usage question This form is only for submitting bug reports. If you have a usage question
or are unsure if this is really a bug, make sure to: or are unsure if this is really a bug, make sure to:
- Read the [docs](https://radix-vue.com/) - Read the [docs](https://reka-ui.com/)
- Ask on [Discord Chat](https://chat.radix-vue.com/) - Ask on [Discord Chat](https://chat.unovue.com/)
- Ask on [GitHub Discussions](https://github.com/shadcn-vue/shadcn-vue/discussions) - Ask on [GitHub Discussions](https://github.com/shadcn-vue/shadcn-vue/discussions)
- type: input - type: input
id: reproduction id: reproduction

4
.github/ISSUE_TEMPLATE/config.yml vendored
View File

@ -1,8 +1,8 @@
blank_issues_enabled: true blank_issues_enabled: true
contact_links: contact_links:
# - name: 📚 Documentation # - name: 📚 Documentation
# url: https://www.radix-vue.com/ # url: https://www.reka-ui.com/
# about: Check the documentation for usage of Radix Vue. # about: Check the documentation for usage of Radix Vue.
- name: 🗨️ Discord - name: 🗨️ Discord
url: https://chat.radix-vue.com/ url: https://chat.unovue.com/
about: Join the Radix Vue Discord server. about: Join the Radix Vue Discord server.

2
.github/ISSUE_TEMPLATE/feature-request.yml vendored
View File

@ -11,7 +11,7 @@ body:
id: feature-description id: feature-description
attributes: attributes:
label: Describe the feature label: Describe the feature
description: A clear and concise description of what you think would be a helpful addition to radix-vue, including the possible use cases and alternatives you have considered. If you have a working prototype or module that implements it, please include a link. description: A clear and concise description of what you think would be a helpful addition to shadcn-vue, including the possible use cases and alternatives you have considered. If you have a working prototype or module that implements it, please include a link.
placeholder: Feature description placeholder: Feature description
validations: validations:
required: true required: true

4
CONTRIBUTING.md
View File

@ -4,7 +4,7 @@ Thanks for your interest in contributing to shadcn-vue.com. We're happy to have
Please take a moment to review this document before submitting your first pull request. We also strongly recommend that you check for open issues and pull requests to see if someone else is working on something similar. Please take a moment to review this document before submitting your first pull request. We also strongly recommend that you check for open issues and pull requests to see if someone else is working on something similar.
If you need any help, feel free to reach out to the core team on [Discord](https://chat.radix-vue.com/). If you need any help, feel free to reach out to the core team on [Discord](https://chat.unovue.com/).
## About this repository ## About this repository
@ -44,7 +44,7 @@ packages
### Start by cloning the repository: ### Start by cloning the repository:
``` ```
git clone git@github.com:radix-vue/shadcn-vue.git git clone git@github.com:unovue/shadcn-vue.git
``` ```
### Install dependencies ### Install dependencies

2
LICENSE
View File

@ -1,6 +1,6 @@
MIT License MIT License
Copyright (c) 2023 radix-vue Copyright (c) 2023 unovue
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

4
README.md
View File

@ -1,5 +1,5 @@
<p align="center"> <p align="center">
<img align="center" src="https://raw.githubusercontent.com/radix-vue/shadcn-vue/dev/apps/www/src/public/android-chrome-192x192.png" height="96" /> <img align="center" src="https://raw.githubusercontent.com/unovue/shadcn-vue/dev/apps/www/src/public/android-chrome-192x192.png" height="96" />
<h1 align="center"> <h1 align="center">
shadcn-vue shadcn-vue
</h1> </h1>
@ -23,7 +23,7 @@ All credits go to these open-source works and resources
- [Shadcn UI](https://ui.shadcn.com) for creating this beautiful project. - [Shadcn UI](https://ui.shadcn.com) for creating this beautiful project.
- [Shadcn Svelte](https://shadcn-svelte.com) for some inspiration for registry. - [Shadcn Svelte](https://shadcn-svelte.com) for some inspiration for registry.
- [Radix Vue](https://radix-vue.com) for doing all the hard work to make sure components are accessible. - [Radix Vue](https://reka-ui.com) for doing all the hard work to make sure components are accessible.
- [VueUse](https://vueuse.org) for providing many useful utilities. - [VueUse](https://vueuse.org) for providing many useful utilities.
- [ahmedmayara](https://github.com/ahmedmayara/shadcn-vue) for populating many components - [ahmedmayara](https://github.com/ahmedmayara/shadcn-vue) for populating many components

4
apps/www/.vitepress/config.mts
View File

@ -23,7 +23,7 @@ export default defineConfig({
['meta', { name: 'theme-color', media: '(prefers-color-scheme: light)', content: 'white' }], ['meta', { name: 'theme-color', media: '(prefers-color-scheme: light)', content: 'white' }],
['meta', { name: 'theme-color', media: '(prefers-color-scheme: dark)', content: 'black' }], ['meta', { name: 'theme-color', media: '(prefers-color-scheme: dark)', content: 'black' }],
['meta', { name: 'creator', content: 'radix-vue' }], ['meta', { name: 'creator', content: 'reka-ui' }],
['meta', { name: 'theme-color', content: '#41b883' }], ['meta', { name: 'theme-color', content: '#41b883' }],
['meta', { name: 'og:type', content: 'website' }], ['meta', { name: 'og:type', content: 'website' }],
['meta', { name: 'og:locale', content: 'en' }], ['meta', { name: 'og:locale', content: 'en' }],
@ -45,7 +45,7 @@ export default defineConfig({
provider: 'local', provider: 'local',
}, },
editLink: { editLink: {
pattern: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/:path', pattern: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/:path',
text: 'Edit this page on GitHub', text: 'Edit this page on GitHub',
}, },
carbonAds: { carbonAds: {

2
apps/www/.vitepress/theme/components/Blocks.vue
View File

@ -34,7 +34,7 @@ import('../../../__registry__/index').then((res) => {
Browse Browse
</a> </a>
<a <a
href="https://github.com/radix-vue/shadcn-vue" href="https://github.com/unovue/shadcn-vue"
target="_blank" target="_blank"
:class="cn( :class="cn(
buttonVariants({ variant: 'outline' }), buttonVariants({ variant: 'outline' }),

16
apps/www/.vitepress/theme/components/ExamplesNav.vue
View File

@ -11,42 +11,42 @@ const examples = [
{ {
name: 'Mail', name: 'Mail',
href: '/examples/mail', href: '/examples/mail',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/mail', code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/mail',
}, },
{ {
name: 'Dashboard', name: 'Dashboard',
href: '/examples/dashboard', href: '/examples/dashboard',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/dashboard', code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/dashboard',
}, },
{ {
name: 'Cards', name: 'Cards',
href: '/examples/cards', href: '/examples/cards',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/cards', code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/cards',
}, },
{ {
name: 'Tasks', name: 'Tasks',
href: '/examples/tasks', href: '/examples/tasks',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/tasks', code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/tasks',
}, },
{ {
name: 'Playground', name: 'Playground',
href: '/examples/playground', href: '/examples/playground',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/playground', code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/playground',
}, },
{ {
name: 'Forms', name: 'Forms',
href: '/examples/forms', href: '/examples/forms',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/forms', code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/forms',
}, },
{ {
name: 'Music', name: 'Music',
href: '/examples/music', href: '/examples/music',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/music', code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/music',
}, },
{ {
name: 'Authentication', name: 'Authentication',
href: '/examples/authentication', href: '/examples/authentication',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/authentication', code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/authentication',
}, },
] ]

2
apps/www/.vitepress/theme/components/LandingPage.vue
View File

@ -30,7 +30,7 @@ import PageHeaderHeading from '../components/PageHeaderHeading.vue'
Get Started Get Started
</a> </a>
<a <a
href="https://github.com/radix-vue/shadcn-vue" href="https://github.com/unovue/shadcn-vue"
target="_blank" target="_blank"
:class="cn( :class="cn(
buttonVariants({ variant: 'outline' }), buttonVariants({ variant: 'outline' }),

2
apps/www/.vitepress/theme/components/StyleSwitcher.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { SelectTriggerProps } from 'radix-vue' import type { SelectTriggerProps } from 'reka-ui'
import { import {
Select, Select,
SelectContent, SelectContent,

2
apps/www/.vitepress/theme/components/theming/Theming.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { DateRange } from 'radix-vue' import type { DateRange } from 'reka-ui'
import CookieSettings from '@/examples/cards/components/CookieSettings.vue' import CookieSettings from '@/examples/cards/components/CookieSettings.vue'
import CreateAccount from '@/examples/cards/components/CreateAccount.vue' import CreateAccount from '@/examples/cards/components/CreateAccount.vue'

18
apps/www/.vitepress/theme/config/docs.ts
View File

@ -44,7 +44,7 @@ export const docsConfig: DocsConfig = {
}, },
{ {
title: 'GitHub', title: 'GitHub',
href: 'https://github.com/radix-vue/shadcn-vue', href: 'https://github.com/unovue/shadcn-vue',
external: true, external: true,
}, },
], ],
@ -377,42 +377,42 @@ export const examples: Example[] = [
{ {
name: 'Mail', name: 'Mail',
href: '/examples/mail', href: '/examples/mail',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/mail', code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/mail',
}, },
{ {
name: 'Dashboard', name: 'Dashboard',
href: '/examples/dashboard', href: '/examples/dashboard',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/dashboard', code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/dashboard',
}, },
{ {
name: 'Cards', name: 'Cards',
href: '/examples/cards', href: '/examples/cards',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/cards', code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/cards',
}, },
// { // {
// name: "Tasks", // name: "Tasks",
// href: "/examples/tasks", // href: "/examples/tasks",
// label: "New", // label: "New",
// code: "https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/tasks" // code: "https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/tasks"
// }, // },
{ {
name: 'Playground', name: 'Playground',
href: '/examples/playground', href: '/examples/playground',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/playground', code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/playground',
}, },
{ {
name: 'Music', name: 'Music',
href: '/examples/music', href: '/examples/music',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/music', code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/music',
}, },
{ {
name: 'Authentication', name: 'Authentication',
href: '/examples/authentication', href: '/examples/authentication',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/authentication', code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/authentication',
}, },
{ {
name: 'Forms', name: 'Forms',
href: '/examples/forms', href: '/examples/forms',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/routes/examples/forms', code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/routes/examples/forms',
}, },
] ]

2
apps/www/.vitepress/theme/layout/DocsLayout.vue
View File

@ -11,7 +11,7 @@ import { docsConfig } from '../config/docs'
const $route = useRoute() const $route = useRoute()
const { frontmatter } = useData() const { frontmatter } = useData()
const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/' const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
</script> </script>
<template> <template>

2
apps/www/.vitepress/theme/layout/MainLayout.vue
View File

@ -209,7 +209,7 @@ watch(() => $route.path, (n) => {
<span class="inline-block ml-2"> <span class="inline-block ml-2">
Ported to Vue by Ported to Vue by
<a <a
href="https://github.com/radix-vue" href="https://github.com/unovue"
target="_blank" target="_blank"
class="underline underline-offset-4 font-bold decoration-foreground" class="underline underline-offset-4 font-bold decoration-foreground"
> >

2
apps/www/.vitepress/theme/utils/codeeditor.ts
View File

@ -91,7 +91,7 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
const iconPackage = style === 'default' ? 'lucide-vue-next' : '@radix-icons/vue' const iconPackage = style === 'default' ? 'lucide-vue-next' : '@radix-icons/vue'
const dependencies = { const dependencies = {
'vue': 'latest', 'vue': 'latest',
'radix-vue': 'latest', 'reka-ui': 'latest',
'@radix-ui/colors': 'latest', '@radix-ui/colors': 'latest',
'clsx': 'latest', 'clsx': 'latest',
'class-variance-authority': 'latest', 'class-variance-authority': 'latest',

2
apps/www/package.json
View File

@ -33,7 +33,7 @@
"embla-carousel-vue": "^8.3.0", "embla-carousel-vue": "^8.3.0",
"lucide-vue-next": "^0.441.0", "lucide-vue-next": "^0.441.0",
"magic-string": "^0.30.11", "magic-string": "^0.30.11",
"radix-vue": "catalog:", "reka-ui": "catalog:",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"v-calendar": "^3.1.2", "v-calendar": "^3.1.2",
"vaul-vue": "^0.2.0", "vaul-vue": "^0.2.0",

6
apps/www/src/content/docs/about.md
View File

@ -5,16 +5,16 @@ description: Powered by amazing open source projects.
## About ## About
[shadcn-vue](https://shadcn-vue.com) is a port of [shadcn/ui](https://ui.shadcn.com) for Vue/Nuxt. It's maintained by [radix-vue](https://github.com/radix-vue). [shadcn-vue](https://shadcn-vue.com) is a port of [shadcn/ui](https://ui.shadcn.com) for Vue/Nuxt. It's maintained by [unovue](https://github.com/unovue).
## Credits ## Credits
- [shadcn](https://twitter.com/shadcn) - The brilliant mind behind the designs, methodology, and implementation of the original [shadcn/ui](https://ui.shadcn.com). - [shadcn](https://twitter.com/shadcn) - The brilliant mind behind the designs, methodology, and implementation of the original [shadcn/ui](https://ui.shadcn.com).
- [Radix Vue](https://radix-vue.com) - The headless components that power this project. - [Radix Vue](https://reka-ui.com) - The headless components that power this project.
- [Radix UI](https://radix-ui.com) - The headless components and examples that the original [shadcn/ui](https://ui.shadcn.com) was built on. - [Radix UI](https://radix-ui.com) - The headless components and examples that the original [shadcn/ui](https://ui.shadcn.com) was built on.
- [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra. - [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra.
- [Cal](https://cal.com) - Where shad copied the styles for the first component: the `Button`. - [Cal](https://cal.com) - Where shad copied the styles for the first component: the `Button`.
## License ## License
MIT © [shadcn](https://shadcn.com) & [radix-vue](https://github.com/radix-vue) MIT © [shadcn](https://shadcn.com) & [unovue](https://github.com/unovue)

4
apps/www/src/content/docs/changelog.md
View File

@ -49,7 +49,7 @@ The following form has been created by passing a `zod` schema object to our `Aut
### Component Updated - Calendar ### Component Updated - Calendar
The [`Calendar`](/docs/components/calendar.html) component has been updated and is now built on top of the [RadixVue Calendar](https://www.radix-vue.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`](/docs/components/calendar.html) component has been updated and is now 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.
If you're looking for a range calendar, check out the [`Range Calendar`](/docs/components/range-calendar.html) component. If you're looking for a range calendar, check out the [`Range Calendar`](/docs/components/range-calendar.html) component.
@ -104,7 +104,7 @@ And if you're looking for a date picker input, check out the [`Date Picker`](/do
### New Component - Drawer ### New Component - Drawer
[`Drawer`](/docs/components/drawer.html) - A drawer component for vue that is built on top of [Vaul Vue](https://github.com/radix-vue/vaul-vue). [`Drawer`](/docs/components/drawer.html) - A drawer component for vue that is built on top of [Vaul Vue](https://github.com/unovue/vaul-vue).
<ComponentPreview name="DrawerDemo" /> <ComponentPreview name="DrawerDemo" />

2
apps/www/src/content/docs/charts.md
View File

@ -91,7 +91,7 @@ However, you can always pass in the desired `color` into each chart.
## Custom tooltip ## Custom tooltip
If you want to customize the `Tooltip` for the chart, you can pass `customTooltip` prop with a custom Vue component. If you want to customize the `Tooltip` for the chart, you can pass `customTooltip` prop with a custom Vue component.
The custom component would receive `title` and `data` props, check out [ChartTooltip.vue component](https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/lib/registry/default/ui/chart/ChartTooltip.vue) for example. The custom component would receive `title` and `data` props, check out [ChartTooltip.vue component](https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/lib/registry/default/ui/chart/ChartTooltip.vue) for example.
The expected prop definition would be: The expected prop definition would be:

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.radix-vue.com/components/accordion.html primitive: https://www.reka-ui.com/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.radix-vue.com/components/alert-dialog.html primitive: https://www.reka-ui.com/components/alert-dialog.html
--- ---
<ComponentPreview name="AlertDialogDemo" /> <ComponentPreview name="AlertDialogDemo" />

4
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.radix-vue.com/components/aspect-ratio.html primitive: https://www.reka-ui.com/components/aspect-ratio.html
--- ---
<ComponentPreview name="AspectRatioDemo" /> <ComponentPreview name="AspectRatioDemo" />
@ -24,7 +24,7 @@ npx shadcn-vue@latest add aspect-ratio
### Install the following dependency: ### Install the following dependency:
```bash ```bash
npm install radix-vue npm install reka-ui
``` ```
### Copy and paste the following code into your project: ### Copy and paste the following code into your project:

4
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.radix-vue.com/components/avatar.html primitive: https://www.reka-ui.com/components/avatar.html
--- ---
<ComponentPreview name="AvatarDemo" /> <ComponentPreview name="AvatarDemo" />
@ -22,7 +22,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
<template> <template>
<Avatar> <Avatar>
<AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" /> <AvatarImage src="https://github.com/unovue.png" alt="@unovue" />
<AvatarFallback>CN</AvatarFallback> <AvatarFallback>CN</AvatarFallback>
</Avatar> </Avatar>
</template> </template>

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.radix-vue.com/components/calendar.html primitive: https://www.reka-ui.com/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.radix-vue.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/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.radix-vue.com/guides/dates.html) for more information and installation instructions. Check [Dates & Times in Radix Vue](https://www.reka-ui.com/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.radix-vue.com/components/checkbox.html primitive: https://www.reka-ui.com/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.radix-vue.com/components/collapsible.html primitive: https://www.reka-ui.com/components/collapsible.html
--- ---
<ComponentPreview name="CollapsibleDemo" /> <ComponentPreview name="CollapsibleDemo" />

5
apps/www/src/content/docs/components/combobox.md
View File

@ -6,11 +6,6 @@ description: Autocomplete input and command palette with a list of suggestions.
<ComponentPreview name="ComboboxDemo" /> <ComponentPreview name="ComboboxDemo" />
<br> <br>
<Callout title="Note" class="bg-destructive">
[Radix Vue](https://github.com/radix-vue/radix-vue/releases/tag/v1.2.0) introduced a breaking change. You will need to wrap `ComboboxGroup` and `ComboboxItem` inside of `ComboboxList` now.
</Callout>
## Installation ## Installation

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.radix-vue.com/components/combobox.html primitive: https://www.reka-ui.com/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.radix-vue.com/components/context-menu.html primitive: https://www.reka-ui.com/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.radix-vue.com/components/calendar.html primitive: https://www.reka-ui.com/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.radix-vue.com/components/dialog.html primitive: https://www.reka-ui.com/components/dialog.html
--- ---
<ComponentPreview name="DialogDemo" /> <ComponentPreview name="DialogDemo" />

4
apps/www/src/content/docs/components/drawer.md
View File

@ -2,14 +2,14 @@
title: Drawer title: Drawer
description: A drawer component for vue. description: A drawer component for vue.
source: apps/www/src/lib/registry/default/ui/drawer source: apps/www/src/lib/registry/default/ui/drawer
primitive: https://github.com/radix-vue/vaul-vue primitive: https://github.com/unovue/vaul-vue
--- ---
<ComponentPreview name="DrawerDemo" /> <ComponentPreview name="DrawerDemo" />
## About ## About
Drawer is built on top of [Vaul Vue](https://github.com/radix-vue/vaul-vue). Drawer is built on top of [Vaul Vue](https://github.com/unovue/vaul-vue).
## Installation ## Installation

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.radix-vue.com/components/dropdown-menu.html primitive: https://www.reka-ui.com/components/dropdown-menu.html
--- ---
<ComponentPreview name="DropdownMenuDemo" /> <ComponentPreview name="DropdownMenuDemo" />

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

@ -108,7 +108,7 @@ npx shadcn-vue@latest add form
### Install the following dependency: ### Install the following dependency:
```bash ```bash
npm install radix-vue vee-validate @vee-validate/zod zod npm install reka-ui vee-validate @vee-validate/zod zod
``` ```
### Copy and paste the following codes into your project: ### Copy and paste the following codes into your project:

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.radix-vue.com/components/hover-card.html primitive: https://www.reka-ui.com/components/hover-card.html
--- ---
<ComponentPreview name="HoverCardDemo" /> <ComponentPreview name="HoverCardDemo" />

4
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.radix-vue.com/components/label.html primitive: https://www.reka-ui.com/components/label.html
--- ---
<ComponentPreview name="LabelDemo" /> <ComponentPreview name="LabelDemo" />
@ -24,7 +24,7 @@ npx shadcn-vue@latest add label
### Install the following dependency: ### Install the following dependency:
```bash ```bash
npm install radix-vue npm install reka-ui
``` ```
### Copy and paste the following code into your project: ### Copy and paste the following code into your project:

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.radix-vue.com/components/menubar.html primitive: https://www.reka-ui.com/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.radix-vue.com/components/navigation-menu.html primitive: https://www.reka-ui.com/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.radix-vue.com/components/number-field.html primitive: https://www.reka-ui.com/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.radix-vue.com/components/pagination.html primitive: https://www.reka-ui.com/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.radix-vue.com/components/pin-input.html primitive: https://www.reka-ui.com/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.radix-vue.com/components/popover.html primitive: https://www.reka-ui.com/components/popover.html
--- ---
<ComponentPreview name="PopoverDemo" /> <ComponentPreview name="PopoverDemo" />

4
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.radix-vue.com/components/progress.html primitive: https://www.reka-ui.com/components/progress.html
--- ---
<ComponentPreview name="ProgressDemo" /> <ComponentPreview name="ProgressDemo" />
@ -24,7 +24,7 @@ npx shadcn-vue@latest add progress
### Install the following dependency: ### Install the following dependency:
```bash ```bash
npm install radix-vue npm install reka-ui
``` ```
### Copy and paste the following code into your project: ### Copy and paste the following code into your project:

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.radix-vue.com/components/radio-group.html primitive: https://www.reka-ui.com/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.radix-vue.com/components/range-calendar.html primitive: https://www.reka-ui.com/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.radix-vue.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/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

4
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.radix-vue.com/components/splitter.html primitive: https://www.reka-ui.com/components/splitter.html
--- ---
<ComponentPreview name="ResizableDemo" /> <ComponentPreview name="ResizableDemo" />
@ -24,7 +24,7 @@ npx shadcn-vue@latest add resizable
### Install the following dependency: ### Install the following dependency:
```bash ```bash
npm install radix-vue npm install reka-ui
``` ```
### Copy and paste the following code into your project: ### Copy and paste the following code into your project:

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.radix-vue.com/components/scroll-area.html primitive: https://www.reka-ui.com/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.radix-vue.com/components/select.html primitive: https://www.reka-ui.com/components/select.html
--- ---
<ComponentPreview name="SelectDemo" /> <ComponentPreview name="SelectDemo" />

4
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.radix-vue.com/components/separator.html primitive: https://www.reka-ui.com/components/separator.html
--- ---
<ComponentPreview name="SeparatorDemo" /> <ComponentPreview name="SeparatorDemo" />
@ -24,7 +24,7 @@ npx shadcn-vue@latest add separator
### Install the following dependency ### Install the following dependency
```bash ```bash
npm install radix-vue npm install reka-ui
``` ```
### Copy and paste the following code into your project ### Copy and paste the following code into your project

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.radix-vue.com/components/dialog.html primitive: https://www.reka-ui.com/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.radix-vue.com/components/slider.html primitive: https://www.reka-ui.com/components/slider.html
--- ---
<ComponentPreview name="SliderDemo" /> <ComponentPreview name="SliderDemo" />

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

@ -66,7 +66,7 @@ import { toast } from 'vue-sonner'
### Sonner with Dialog ### Sonner with Dialog
Related issue https://github.com/radix-vue/shadcn-vue/issues/462 Related issue https://github.com/unovue/shadcn-vue/issues/462
Add `pointer-events-auto` class to Toaster component in your `App.vue` file: Add `pointer-events-auto` class to Toaster component in your `App.vue` file:

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.radix-vue.com/components/stepper.html primitive: https://www.reka-ui.com/components/stepper.html
--- ---
<ComponentPreview name="StepperDemo" /> <ComponentPreview name="StepperDemo" />

4
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.radix-vue.com/components/switch.html primitive: https://www.reka-ui.com/components/switch.html
--- ---
<ComponentPreview name="SwitchDemo" /> <ComponentPreview name="SwitchDemo" />
@ -24,7 +24,7 @@ npx shadcn-vue@latest add switch
### Install the following dependency: ### Install the following dependency:
```bash ```bash
npm install radix-vue npm install reka-ui
``` ```
### Copy and paste the following code into your project ### Copy and paste the following code into your project

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.radix-vue.com/components/tabs.html primitive: https://www.reka-ui.com/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.radix-vue.com/components/tags-input.html primitive: https://www.reka-ui.com/components/tags-input.html
--- ---
<ComponentPreview name="TagsInputDemo" /> <ComponentPreview name="TagsInputDemo" />

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

@ -22,7 +22,7 @@ npx shadcn-vue@latest add textarea
### Install the following dependency: ### Install the following dependency:
```bash ```bash
npm install radix-vue npm install reka-ui
``` ```
### Copy and paste the following code into your project ### Copy and paste the following code into your project

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.radix-vue.com/components/toast.html primitive: https://www.reka-ui.com/components/toast.html
--- ---
<ComponentPreview name="ToastDemo" /> <ComponentPreview name="ToastDemo" />

4
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.radix-vue.com/components/toggle-group.html primitive: https://www.reka-ui.com/components/toggle-group.html
--- ---
<ComponentPreview name="ToggleGroupDemo" /> <ComponentPreview name="ToggleGroupDemo" />
@ -24,7 +24,7 @@ npx shadcn-vue@latest add toggle-group
### Install the following dependencies: ### Install the following dependencies:
```bash ```bash
npm install radix-vue npm install reka-ui
``` ```
### Copy and paste the following code into your project ### Copy and paste the following code into your project

4
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.radix-vue.com/components/toggle.html primitive: https://www.reka-ui.com/components/toggle.html
--- ---
<ComponentPreview name="ToggleDemo" /> <ComponentPreview name="ToggleDemo" />
@ -24,7 +24,7 @@ npx shadcn-vue@latest add toggle
### Install the following dependencies: ### Install the following dependencies:
```bash ```bash
npm install radix-vue npm install reka-ui
``` ```
### Copy and paste the following code into your project ### Copy and paste the following code into your project

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.radix-vue.com/components/tooltip.html primitive: https://www.reka-ui.com/components/tooltip.html
--- ---
<ComponentPreview name="TooltipDemo" /> <ComponentPreview name="TooltipDemo" />

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

@ -17,7 +17,7 @@ Thanks for your interest in contributing to shadcn-vue.com. We're happy to have
Please take a moment to review this document before submitting your first pull request. We also strongly recommend that you check for open issues and pull requests to see if someone else is working on something similar. Please take a moment to review this document before submitting your first pull request. We also strongly recommend that you check for open issues and pull requests to see if someone else is working on something similar.
If you need any help, feel free to reach out to the core team on [Discord](https://chat.radix-vue.com/). If you need any help, feel free to reach out to the core team on [Discord](https://chat.unovue.com/).
This guide provides detailed information to help new contributors. This guide provides detailed information to help new contributors.
@ -84,7 +84,7 @@ When adding or modifying components, please ensure that:
Start by cloning the repository: Start by cloning the repository:
```bash ```bash
git clone git@github.com:radix-vue/shadcn-vue.git git clone git@github.com:unovue/shadcn-vue.git
``` ```
### Install dependencies ### Install dependencies
@ -170,17 +170,17 @@ If you are interested in the detailed specification you can visit [Conventional
Multiple components are integrated into one file in `shadcn/ui` - the React version of `shadcn` - while Vue only supports one component per file, hence the name Single File Component (SFC). In such cases, you need to create separate files for each component part and then export them all in an `index.ts` file. Multiple components are integrated into one file in `shadcn/ui` - the React version of `shadcn` - while Vue only supports one component per file, hence the name Single File Component (SFC). In such cases, you need to create separate files for each component part and then export them all in an `index.ts` file.
See the [`Accordion`](https://github.com/radix-vue/shadcn-vue/tree/v0.10.2/apps/www/src/lib/registry/default/ui/accordion) source code as an example. See the [`Accordion`](https://github.com/unovue/shadcn-vue/tree/v0.10.2/apps/www/src/lib/registry/default/ui/accordion) source code as an example.
## Wrapping Radix-Vue Components ## Wrapping Reka UI Components
[Radix-Vue](https://www.radix-vue.com) hosts many low-level UI components that are used to build reusable components. [Reka UI](https://www.reka-ui.com) hosts many low-level UI components that are used to build reusable components.
There are many cases that you need to wrap `Radix-Vue` components. There are many cases that you need to wrap `Reka UI` components.
### Props & Events ### Props & Events
All of the `Radix-Vue` compoennts expose their prop and emit types. We need to forward any props/events that are coming from outside to the `Radix-Vue` 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.radix-vue.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/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.
@ -194,7 +194,7 @@ import {
type AccordionRootEmits, type AccordionRootEmits,
type AccordionRootProps, type AccordionRootProps,
useForwardPropsEmits, useForwardPropsEmits,
} from 'radix-vue' } from 'reka-ui'
const props = defineProps<AccordionRootProps>() const props = defineProps<AccordionRootProps>()
const emits = defineEmits<AccordionRootEmits>() const emits = defineEmits<AccordionRootEmits>()
@ -212,9 +212,9 @@ const forwarded = useForwardPropsEmits(props, emits)
As you can see, `AccordionRootEmits` and `AccordionRootProps` types are imported from radix, combined with `useForwardPropsEmits` and then are binded using `v-bind` syntax. As you can see, `AccordionRootEmits` and `AccordionRootProps` types are imported from radix, combined with `useForwardPropsEmits` and then are binded using `v-bind` syntax.
### CSS Classes ### CSS Classes
There are cases when we want to accept `class` as a prop in our `shadcn/vue` component and then combine it with a default tailwind class on our `radix-vue` component via `cn` utility function. There are cases when we want to accept `class` as a prop in our `shadcn/vue` component and then combine it with a default tailwind class on our `Reka UI` component via `cn` utility function.
In these cases, we can not use `v-bind`, because this would lead in [double class binding](https://github.com/radix-vue/shadcn-vue/pull/241). In these cases, we can not use `v-bind`, because this would lead in [double class binding](https://github.com/unovue/shadcn-vue/pull/241).
Take a look at `DrawerDescription.vue`. Take a look at `DrawerDescription.vue`.
@ -250,7 +250,7 @@ This pattern only needs to be applied when the `cn` utility is required. For ins
```vue ```vue
<script setup lang="ts"> <script setup lang="ts">
import { SelectValue, type SelectValueProps } from 'radix-vue' import { SelectValue, type SelectValueProps } from 'reka-ui'
const props = defineProps<SelectValueProps>() const props = defineProps<SelectValueProps>()
</script> </script>
@ -264,14 +264,14 @@ 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.radix-vue.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/utilities/use-forward-props.html) composable.
Take a look at `AccordionItem.vue` Take a look at `AccordionItem.vue`
```vue ```vue
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue' import { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
@ -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.radix-vue.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/utilities/primitive.html) instead.
Let's take a look at `Button.vue` Let's take a look at `Button.vue`
@ -308,7 +308,7 @@ Let's take a look at `Button.vue`
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { Primitive, type PrimitiveProps } from 'radix-vue' import { Primitive, type PrimitiveProps } from 'reka-ui'
import { type ButtonVariants, buttonVariants } from '.' import { type ButtonVariants, buttonVariants } from '.'
interface Props extends PrimitiveProps { interface Props extends PrimitiveProps {
@ -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.radix-vue.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/utilities/primitive.html#changing-as-value) property.
## Updating with `shadcn/ui` ## Updating with `shadcn/ui`
@ -352,7 +352,7 @@ Click on the following link to check if there are newer commits that we should b
</div> </div>
1. There are no changes - If you see "There isn’t anything to compare", nothing needs to be done as we are synced with latest version. 1. There are no changes - If you see "There isn’t anything to compare", nothing needs to be done as we are synced with latest version.
2. If there are changes, you should review thoese changes and try to apply them on `shadcn/vue` codebase and create a PR, remember to update the `latestSyncCommitTag` in [this file](https://github.com/radix-vue/shadcn-vue/blob/dev/apps/www/src/content/docs/contribution.md) too. 2. If there are changes, you should review thoese changes and try to apply them on `shadcn/vue` codebase and create a PR, remember to update the `latestSyncCommitTag` in [this file](https://github.com/unovue/shadcn-vue/blob/dev/apps/www/src/content/docs/contribution.md) too.
## Debugging ## Debugging
Here are some tools and techniques that can help you debug more effectively while contributing to `shadcn/vue` or developing your own projects. Here are some tools and techniques that can help you debug more effectively while contributing to `shadcn/vue` or developing your own projects.

2
apps/www/src/content/docs/installation/astro.md
View File

@ -50,7 +50,7 @@ This will install `vue` and `@astrojs/vue` as dependencies and automatically set
### Install TypeScript ### Install TypeScript
If you encounter the error `Cannot find module 'typescript'`, please proceed to install TypeScript as a dev dependency, as discussed [here](https://github.com/radix-vue/shadcn-vue/pull/118) If you encounter the error `Cannot find module 'typescript'`, please proceed to install TypeScript as a dev dependency, as discussed [here](https://github.com/unovue/shadcn-vue/pull/118)
```bash ```bash
npm install -D typescript npm install -D typescript

6
apps/www/src/content/docs/installation/nuxt.md
View File

@ -147,21 +147,21 @@ export default defineNuxtModule<ShadcnVueOptions>({
} }
addComponent({ addComponent({
filePath: 'radix-vue', filePath: 'reka-ui',
export: 'PaginationRoot', export: 'PaginationRoot',
name: `${prefix}Pagination`, name: `${prefix}Pagination`,
priority: 999, priority: 999,
}); });
addComponent({ addComponent({
filePath: 'radix-vue', filePath: 'reka-ui',
export: 'PaginationList', export: 'PaginationList',
name: `${prefix}PaginationList`, name: `${prefix}PaginationList`,
priority: 999, priority: 999,
}); });
addComponent({ addComponent({
filePath: 'radix-vue', filePath: 'reka-ui',
export: 'PaginationListItem', export: 'PaginationListItem',
name: `${prefix}PaginationListItem`, name: `${prefix}PaginationListItem`,
priority: 999, priority: 999,

2
apps/www/src/examples/dashboard/components/DateRangePicker.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { DateRange } from 'radix-vue' import type { DateRange } from 'reka-ui'
import { Button } from '@/lib/registry/new-york/ui/button' import { Button } from '@/lib/registry/new-york/ui/button'
import { import {
Popover, Popover,

2
apps/www/src/examples/forms/components/AccountForm.vue
View File

@ -25,7 +25,7 @@ import { CalendarDate, DateFormatter, getLocalTimeZone, today } from '@internati
import { toTypedSchema } from '@vee-validate/zod' import { toTypedSchema } from '@vee-validate/zod'
import RadixIconsCalendar from '~icons/radix-icons/calendar' import RadixIconsCalendar from '~icons/radix-icons/calendar'
import { Check, ChevronsUpDown } from 'lucide-vue-next' import { Check, ChevronsUpDown } from 'lucide-vue-next'
import { toDate } from 'radix-vue/date' import { toDate } from 'reka-ui/date'
import { h, ref } from 'vue' import { h, ref } from 'vue'
import * as z from 'zod' import * as z from 'zod'

2
apps/www/src/examples/playground/components/MaxLengthSelector.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { SliderRootProps } from 'radix-vue' import type { SliderRootProps } from 'reka-ui'
import { import {
HoverCard, HoverCard,
HoverCardContent, HoverCardContent,

2
apps/www/src/examples/playground/components/TemperatureSelector.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { SliderRootProps } from 'radix-vue' import type { SliderRootProps } from 'reka-ui'
import { import {
HoverCard, HoverCard,

2
apps/www/src/examples/playground/components/TopPSelector.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { SliderRootProps } from 'radix-vue' import type { SliderRootProps } from 'reka-ui'
import { import {
HoverCard, HoverCard,

2
apps/www/src/lib/registry/default/example/AvatarDemo.vue
View File

@ -4,7 +4,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/default/ui/a
<template> <template>
<Avatar> <Avatar>
<AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" /> <AvatarImage src="https://github.com/unovue.png" alt="@unovue" />
<AvatarFallback>CN</AvatarFallback> <AvatarFallback>CN</AvatarFallback>
</Avatar> </Avatar>
</template> </template>

2
apps/www/src/lib/registry/default/example/CalendarForm.vue
View File

@ -15,7 +15,7 @@ import { cn } from '@/lib/utils'
import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date' import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
import { toTypedSchema } from '@vee-validate/zod' import { toTypedSchema } from '@vee-validate/zod'
import { Calendar as CalendarIcon } from 'lucide-vue-next' import { Calendar as CalendarIcon } from 'lucide-vue-next'
import { toDate } from 'radix-vue/date' import { toDate } from 'reka-ui/date'
import { useForm } from 'vee-validate' import { useForm } from 'vee-validate'
import { computed, h, ref } from 'vue' import { computed, h, ref } from 'vue'
import { z } from 'zod' import { z } from 'zod'

4
apps/www/src/lib/registry/default/example/CalendarWithSelect.vue
View File

@ -10,8 +10,8 @@ import {
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { type DateValue, getLocalTimeZone, today } from '@internationalized/date' import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
import { useVModel } from '@vueuse/core' import { useVModel } from '@vueuse/core'
import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'radix-vue' import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'
import { createDecade, createYear, toDate } from 'radix-vue/date' import { createDecade, createYear, toDate } from 'reka-ui/date'
import { computed, type HTMLAttributes, type Ref } from 'vue' import { computed, type HTMLAttributes, type Ref } from 'vue'
const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), { const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {

2
apps/www/src/lib/registry/default/example/DatePickerForm.vue
View File

@ -15,7 +15,7 @@ import { cn } from '@/lib/utils'
import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date' import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
import { toTypedSchema } from '@vee-validate/zod' import { toTypedSchema } from '@vee-validate/zod'
import { Calendar as CalendarIcon } from 'lucide-vue-next' import { Calendar as CalendarIcon } from 'lucide-vue-next'
import { toDate } from 'radix-vue/date' import { toDate } from 'reka-ui/date'
import { useForm } from 'vee-validate' import { useForm } from 'vee-validate'
import { computed, h, ref } from 'vue' import { computed, h, ref } from 'vue'
import { z } from 'zod' import { z } from 'zod'

4
apps/www/src/lib/registry/default/example/DatePickerWithIndependentMonths.vue
View File

@ -27,8 +27,8 @@ import {
ChevronLeft, ChevronLeft,
ChevronRight, ChevronRight,
} from 'lucide-vue-next' } from 'lucide-vue-next'
import { type DateRange, RangeCalendarRoot, useDateFormatter } from 'radix-vue' import { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'
import { createMonth, type Grid, toDate } from 'radix-vue/date' import { createMonth, type Grid, toDate } from 'reka-ui/date'
import { type Ref, ref, watch } from 'vue' import { type Ref, ref, watch } from 'vue'
const value = ref({ const value = ref({

2
apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { DateRange } from 'radix-vue' import type { DateRange } from 'reka-ui'
import { Button } from '@/lib/registry/default/ui/button' import { Button } from '@/lib/registry/default/ui/button'
import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover' import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'

2
apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue
View File

@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { DropdownMenuCheckboxItemProps } from 'radix-vue' import type { DropdownMenuCheckboxItemProps } from 'reka-ui'
import { Button } from '@/lib/registry/default/ui/button' import { Button } from '@/lib/registry/default/ui/button'
import { import {
DropdownMenu, DropdownMenu,

2
apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue
View File

@ -61,7 +61,7 @@ const components: { title: string, href: string, description: string }[] = [
class="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md" class="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
href="/" href="/"
> >
<img src="https://www.radix-vue.com/logo.svg" class="h-6 w-6"> <img src="https://www.reka-ui.com/logo.svg" class="h-6 w-6">
<div class="mb-2 mt-4 text-lg font-medium"> <div class="mb-2 mt-4 text-lg font-medium">
shadcn/ui shadcn/ui
</div> </div>

2
apps/www/src/lib/registry/default/example/RangeCalendarDemo.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { DateRange } from 'radix-vue' import type { DateRange } from 'reka-ui'
import { RangeCalendar } from '@/lib/registry/default/ui/range-calendar' import { RangeCalendar } from '@/lib/registry/default/ui/range-calendar'
import { getLocalTimeZone, today } from '@internationalized/date' import { getLocalTimeZone, today } from '@internationalized/date'
import { type Ref, ref } from 'vue' import { type Ref, ref } from 'vue'

2
apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/default/ui/command' import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/default/ui/command'
import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input' import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue' import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'reka-ui'
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
const frameworks = [ const frameworks = [

2
apps/www/src/lib/registry/default/example/TypographyInlineCode.vue
View File

@ -2,6 +2,6 @@
<code <code
class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold" class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"
> >
radix-vue reka-ui
</code> </code>
</template> </template>

2
apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
View File

@ -4,7 +4,7 @@ import {
type AccordionRootEmits, type AccordionRootEmits,
type AccordionRootProps, type AccordionRootProps,
useForwardPropsEmits, useForwardPropsEmits,
} from 'radix-vue' } from 'reka-ui'
const props = defineProps<AccordionRootProps>() const props = defineProps<AccordionRootProps>()
const emits = defineEmits<AccordionRootEmits>() const emits = defineEmits<AccordionRootEmits>()

2
apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { AccordionContent, type AccordionContentProps } from 'radix-vue' import { AccordionContent, type AccordionContentProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()

2
apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue' import { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()

2
apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue
View File

@ -5,7 +5,7 @@ import {
AccordionHeader, AccordionHeader,
AccordionTrigger, AccordionTrigger,
type AccordionTriggerProps, type AccordionTriggerProps,
} from 'radix-vue' } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()

2
apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue' import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'
const props = defineProps<AlertDialogProps>() const props = defineProps<AlertDialogProps>()
const emits = defineEmits<AlertDialogEmits>() const emits = defineEmits<AlertDialogEmits>()

2
apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { buttonVariants } from '@/lib/registry/default/ui/button' import { buttonVariants } from '@/lib/registry/default/ui/button'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue' import { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()

2
apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { buttonVariants } from '@/lib/registry/default/ui/button' import { buttonVariants } from '@/lib/registry/default/ui/button'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue' import { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()

2
apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
View File

@ -7,7 +7,7 @@ import {
AlertDialogOverlay, AlertDialogOverlay,
AlertDialogPortal, AlertDialogPortal,
useForwardPropsEmits, useForwardPropsEmits,
} from 'radix-vue' } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()

2
apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue
View File

@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
import { import {
AlertDialogDescription, AlertDialogDescription,
type AlertDialogDescriptionProps, type AlertDialogDescriptionProps,
} from 'radix-vue' } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()

2
apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTitle.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue' import { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()

2
apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTrigger.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue' import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'
const props = defineProps<AlertDialogTriggerProps>() const props = defineProps<AlertDialogTriggerProps>()
</script> </script>

2
apps/www/src/lib/registry/default/ui/aspect-ratio/AspectRatio.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { AspectRatio, type AspectRatioProps } from 'radix-vue' import { AspectRatio, type AspectRatioProps } from 'reka-ui'
const props = defineProps<AspectRatioProps>() const props = defineProps<AspectRatioProps>()
</script> </script>

2
apps/www/src/lib/registry/default/ui/auto-form/dependencies.ts
View File

@ -1,6 +1,6 @@
import type { Ref } from 'vue' import type { Ref } from 'vue'
import type * as z from 'zod' import type * as z from 'zod'
import { createContext } from 'radix-vue' import { createContext } from 'reka-ui'
import { useFieldValue, useFormValues } from 'vee-validate' import { useFieldValue, useFormValues } from 'vee-validate'
import { computed, ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
import { type Dependency, DependencyType, type EnumValues } from './interface' import { type Dependency, DependencyType, type EnumValues } from './interface'

2
apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { AvatarRoot } from 'radix-vue' import { AvatarRoot } from 'reka-ui'
import { avatarVariant, type AvatarVariants } from '.' import { avatarVariant, type AvatarVariants } from '.'
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{

2
apps/www/src/lib/registry/default/ui/avatar/AvatarFallback.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue' import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'
const props = defineProps<AvatarFallbackProps>() const props = defineProps<AvatarFallbackProps>()
</script> </script>

2
apps/www/src/lib/registry/default/ui/avatar/AvatarImage.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { AvatarImage, type AvatarImageProps } from 'radix-vue' import { AvatarImage, type AvatarImageProps } from 'reka-ui'
const props = defineProps<AvatarImageProps>() const props = defineProps<AvatarImageProps>()
</script> </script>

2
apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue
View File

@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { Primitive, type PrimitiveProps } from 'radix-vue' import { Primitive, type PrimitiveProps } from 'reka-ui'
const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), { const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
as: 'a', as: 'a',

2
apps/www/src/lib/registry/default/ui/button/Button.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { Primitive, type PrimitiveProps } from 'radix-vue' import { Primitive, type PrimitiveProps } from 'reka-ui'
import { type ButtonVariants, buttonVariants } from '.' import { type ButtonVariants, buttonVariants } from '.'
interface Props extends PrimitiveProps { interface Props extends PrimitiveProps {

2
apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
View File

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue' import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue'
import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.' import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'

Some files were not shown because too many files have changed in this diff Show More