July 2026 - Rhea & Components for Chat Interfaces
Two big additions this month: a new style, Rhea, and a set of components for building chat interfaces.
Rhea
Say hello to Rhea, a new style for shadcn-vue.
Rhea is the latest shadcn/ui look, mirroring the upstream base-rhea style as closely as possible. It keeps the rounded, soft aesthetic you already know but refines the details: denser surfaces, ring-based focus states, and subtle press interactions on buttons. Built for focused product interfaces.
Rhea is opt-in. The default style stays the same, so nothing changes for your existing projects. Head to the customizer and pick Rhea from the style switcher to preview it, then copy the theme into your app.
Chat interface components
We're also releasing a new set of components for building chat interfaces: Message Scroller, Message, Bubble, Attachment, and Marker. Plus two new CSS utilities to round them out.
- Message Scroller: The scroll container for a conversation.
- Message: Lay out a row in the conversation.
- Bubble: Render the message surface.
- Attachment: Render files and images.
- Marker: Render status updates and separators.
Message Scroller
The scroll container for a conversation. It handles the parts that are easy to get wrong: anchored turns, streamed replies, saved thread restore, prepended history, jump-to-message, scroll controls, and visibility tracking.
Press send to stream a scripted launch summary.
Message
Message lays out a row in the conversation with avatar, alignment, header, content, footer, and grouped messages.
Bubble
Bubble renders the message surface, with variants, alignment, reactions, links, buttons, and collapsible content.
Attachment
Attachment renders files and images with media, metadata, upload state, actions, and a full-card trigger.
Marker
Marker renders status updates, system notes, bordered rows, and labeled separators.
scroll-fade and shimmer
Two CSS utilities to finish off the set. scroll-fade dissolves content at the edges of a scroll container, and shimmer adds a shimmer effect to text, perfect for streaming and loading states. Both ship with the shadcn-vue package, so there's nothing to install after init.
November 2025 - Catch up
We've upgraded shadcn-vue.com to Nuxt v4 and Tailwind v4. The site now uses the upgraded new-york components.
We've also made some minor design updates to make the site faster and easier to navigate.
Chart
We also refactored the Chart component to match the original component, and stick to the API as close as possible.
October 2025 - New Components
For this round of components, I looked at what we build every day, the boring stuff we rebuild over and over, and made reusable abstractions you can actually use.
- Spinner: An indicator to show a loading state.
- Kbd: Display a keyboard key or group of keys.
- Button Group: A group of buttons for actions and split buttons.
- Input Group: Input with icons, buttons, labels and more.
- Field: One component. All your forms.
- Item: Display lists of items, cards, and more.
- Empty: Use this one for empty states.
Spinner
Okay let's start with the easiest ones: Spinner and Kbd. Pretty basic. We all know what they do.
Here's how you render a spinner:
<script setup lang="ts">
import { Spinner } from '@/components/ui/spinner'
</script>
<template>
<Spinner />
</template>Here's what it looks like:
Here's what it looks like in a button:
You can edit the code and replace it with your own spinner.
Kbd
Kbd is a component that renders a keyboard key.
<script setup lang="ts">
import { Kbd, KbdGroup } from '@/components/ui/kbd'
</script>
<template>
<Kbd>Ctrl</Kbd>
</template>Use KbdGroup to group keyboard keys together.
<template>
<KbdGroup>
<Kbd>Ctrl</Kbd>
<Kbd>B</Kbd>
</KbdGroup>
</template>You can add it to buttons, tooltips, input groups, and more.
Button Group
I got a lot of requests for this one: Button Group. It's a container that groups related buttons together with consistent styling. Great for action groups, split buttons, and more.
Here's the code:
<script setup lang="ts">
import { ButtonGroup } from '@/components/ui/button-group'
</script>
<template>
<ButtonGroup>
<Button>Button 1</Button>
<Button>Button 2</Button>
</ButtonGroup>
</template>You can nest button groups to create more complex layouts with spacing.
<template>
<ButtonGroup>
<ButtonGroup>
<Button>Button 1</Button>
<Button>Button 2</Button>
</ButtonGroup>
<ButtonGroup>
<Button>Button 3</Button>
<Button>Button 4</Button>
</ButtonGroup>
</ButtonGroup>
</template>Use ButtonGroupSeparator to create split buttons. Classic dropdown pattern.
You can also use it to add prefix or suffix buttons and text to inputs.
<template>
<ButtonGroup>
<ButtonGroupText>Prefix</ButtonGroupText>
<Input placeholder="Type something here..." />
<Button>Button</Button>
</ButtonGroup>
</template>Input Group
Input Group lets you add icons, buttons, and more to your inputs. You know, all those little bits you always need around your inputs.
<script setup lang="ts">
import { InputGroup, InputGroupAddon, InputGroupInput } from '@/components/ui/input-group'
</script>
<template>
<InputGroup>
<InputGroupInput placeholder="Search..." />
<InputGroupAddon>
<SearchIcon />
</InputGroupAddon>
</InputGroup>
</template>Here's a preview with icons:
You can also add buttons to the input group.
Or text, labels, tooltips,...
It also works with textareas so you can build really complex components with lots of knobs and dials or yet another prompt form.
Oh here are some cool ones with spinners:
Field
Introducing Field, a component for building really complex forms. The abstraction here is beautiful.
It took me a long time to get it right but I made it work with all your form libraries: Vee Validate, TanStack Form, Bring Your Own Form.
Here's a basic field with an input:
<script setup lang="ts">
import {
Field,
FieldDescription,
FieldError,
FieldLabel,
} from '@/components/ui/field'
</script>
<template>
<Field>
<FieldLabel html-for="username">
Username
</FieldLabel>
<Input id="username" placeholder="Max Leiter" />
<FieldDescription>
Choose a unique username for your account.
</FieldDescription>
</Field>
</template>It works with all form controls. Inputs, textareas, selects, checkboxes, radios, switches, sliders, you name it. Here's a full example:
Here are some checkbox fields:
Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.
You can group fields together using FieldGroup and FieldSet. Perfect for
multi-section forms.
<template>
<FieldSet>
<FieldLegend />
<FieldGroup>
<Field />
<Field />
</FieldGroup>
</FieldSet>
</template>Making it responsive is easy. Use orientation="responsive" and it switches
between vertical and horizontal layouts based on container width. Done.
Wait here's more. Wrap your fields in FieldLabel to create a selectable field group. Really easy. And it looks great.
Item
This one is a straightforward flex container that can house nearly any type of content.
I've built this so many times that I decided to create a component for it. Now I use it all the time. I use it to display lists of items, cards, and more.
Here's a basic item:
<script setup lang="ts">
import {
Item,
ItemContent,
ItemDescription,
ItemMedia,
ItemTitle,
} from '@/components/ui/item'
</script>
<template>
<Item>
<ItemMedia variant="icon">
<HomeIcon />
</ItemMedia>
<ItemContent>
<ItemTitle>Dashboard</ItemTitle>
<ItemDescription>Overview of your account and activity.</ItemDescription>
</ItemContent>
</Item>
</template>A simple item with title and description.
You can add icons, avatars, or images to the item.
New login detected from unknown device.
Last seen 5 months ago
Invite your team to collaborate on this project.
And here's what a list of items looks like with ItemGroup:
shadcn@vercel.com
maxleiter@vercel.com
evilrabbit@vercel.com
Need it as a link? Use the asChild prop:
<template>
<Item as-child>
<a href="/dashboard">
<ItemMedia variant="icon">
<HomeIcon />
</ItemMedia>
<ItemContent>
<ItemTitle>Dashboard</ItemTitle>
<ItemDescription>Overview of your account and activity.</ItemDescription>
</ItemContent>
</a>
</Item>
</template>Empty
Okay last one: Empty. Use this to display empty states in your app.
Here's how you use it:
<script setup lang="ts">
import {
Empty,
EmptyContent,
EmptyDescription,
EmptyMedia,
EmptyTitle,
} from '@/components/ui/empty'
</script>
<template>
<Empty>
<EmptyMedia variant="icon">
<InboxIcon />
</EmptyMedia>
<EmptyTitle>No messages</EmptyTitle>
<EmptyDescription>You don't have any messages yet.</EmptyDescription>
<EmptyContent>
<Button>Send a message</Button>
</EmptyContent>
</Empty>
</template>You haven't created any projects yet. Get started by creating your first project.
You can use it with avatars:
This user is currently offline. You can leave a message to notify them or try again later.
Or with input groups for things like search results or email subscriptions:
The page you're looking for doesn't exist. Try searching for what you need below.
Need help? Contact support
That's it. Seven new components. Works with all your libraries. Ready for your projects.
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.