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.

  1. First up, when you init into a new app, we update your existing Tailwind files instead of overriding.
  2. 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.
  3. You can also install remote components using url. npx shadcn-vue add https://acme.com/registry/navbar.json.
  1. 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.
  2. And a few more updates like better error handling and monorepo support.

You can try the new cli today.

bash
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.

json
{
  "$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.

bash
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.

  1. Area Chart - An area chart visually represents data over time, displaying trends and patterns through filled-in areas under a line graph.
  1. Bar Chart - A line chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups.
  1. 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.
  1. 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.

Your favourite number between 1 and 10.

I agree to the .

We need your birthday to send you a gift.

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.

February 2025
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
Event Date, February 2025
Event Date, February 2025
February 2025
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.

Building Blocks

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.

One
Two
Three

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.

Apple
Banana

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.

Carousel - A carousel with motion and swipe built using Embla library.

1
2
3
4
5
Edit this page on GitHub