Changelog
Latest updates and announcements.
February 2025 - Reka UI & npx shadcn-vue@latest init
We've updated the latest registry to support Reka UI instead of Radix Vue.
The updated CLI is now available. You can now install components, themes, composables, utils and more using npx shadcn-vue add
.
This is a major step towards distributing code that you and your LLMs can access and use.
With the released of Reka UI v2, shadcn-vue@latest
command will now install Reka UI. If you want to keep using Radix Vue, please visit here and run shadcn-vue@radix
command instead.
- First up, when you init into a new app, we update your existing Tailwind files instead of overriding.
- A component now ship its own dependencies. Take the accordion for example, it can define its Tailwind keyframes. When you add it to your project, we’ll update your tailwind.config.ts file accordingly.
- You can also install remote components using url.
npx shadcn-vue add https://acme.com/registry/navbar.json
.
- We have created a new schema that you can use to ship your own component registry. And since it has support for urls, you can even use it to distribute private components.
- And a few more updates like better error handling and monorepo support.
You can try the new cli today.
npx shadcn-vue@latest init Sidebar01 Login01
Update Your Project
Update components.json
To update an existing project to use the new CLI, update your components.json
file to include import aliases for your components, utils, ui, lib and composables.
{
"$schema": "https://shadcn-vue.com/schema.json",
"style": "new-york",
"tailwind": {
// ...
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"composables": "@/composables"
}
}
If you're using a different import alias prefix eg ~
, replace @
with your prefix.
Run add components
In order to perform Radix Vue to Reka UI migration easily, you can run add
command for all your existing components.
npx shadcn-vue@latest add <components>
If you're using custom component, you need to migrate them manually.
June 2024
New Component - Number Field
A new component has been added to the project NumberField
.
A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
May 2024
New Component - Charts
Several kinds of chart components has been added to the project.
Charts are versatile visualization tools, allowing users to represent data using various options for effective analysis.
Area Chart
- An area chart visually represents data over time, displaying trends and patterns through filled-in areas under a line graph.
Bar Chart
- A line chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups.
Donut Chart
- A line chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories.
Line Chart
- A line chart visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis.
New Component - Auto Form
Auto Form
is a drop-in form builder for your internal and low-priority forms with existing zod schemas.
For example, if you already have zod schemas for your API and want to create a simple admin panel to edit user profiles, simply pass the schema to AutoForm and you're done.
The following form has been created by passing a zod
schema object to our AutoForm
component.
April 2024
Component Updated - Calendar
The Calendar
component has been updated and is now built on top of the RadixVue Calendar component, which uses the @internationalized/date package to handle dates.
If you're looking for a range calendar, check out the Range Calendar
component.
And if you're looking for a date picker input, check out the Date Picker
component.
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 1 |
S | M | T | W | T | F | S |
---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 1 |
Building Blocks for the Web
Blocks
are composed of different components that can be used to build your apps, with each block being a standalone section of your application. These blocks are fully responsive, accessible, and composable, and are built using the same principles as the other components in shadcn-vue
.
March 2024
New Component - Breadcrumb
Breadcrumb
displays the path to the current resource using a hierarchy of links.
New Component - Pin Input (OTP Input)
Pin Input
allows users to input a sequence of one-character alphanumeric inputs.
New Component - Resizable
Resizable
- Accessible resizable panel groups and layouts with keyboard support.
New Component - Drawer
Drawer
- A drawer component for vue that is built on top of Vaul Vue.
February 2024
New Component - Tag Inputs
Tag inputs
render tags inside an input, followed by an actual text input.
January 2024
New Component - Sonner
Sonner
is an opinionated toast component for Vue.
The Sonner component is provided by vue-sonner, which is a Vue port of Sonner, originally created by Emil Kowalski for React.
New Component - Toggle Group
Toggle Group
- A set of two-state buttons that can be toggled on or off.
New Component - Carousel
Carousel
- A carousel with motion and swipe built using Embla library.