October 2025 - New Components

Spinner, Kbd, Button Group, Input Group, Field, Item, and Empty 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.

These components work with every component library, Radix, Base UI, React Aria, you name it. Copy and paste to your projects.

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:

import { Spinner } from "@/components/ui/spinner"

On This Page

Spinner Kbd Button Group Input Group Field Item Empty

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.

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 is a component that renders a keyboard key.

import { Kbd, KbdGroup } from "@/components/ui/kbd"

Use KbdGroup to group keyboard keys together.

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>

⌘⇧⌥⌃Ctrl+B

You can add it to buttons, tooltips, input groups, and more.

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.

import { ButtonGroup } from "@/components/ui/button-group"

<ButtonGroup>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

You can nest button groups to create more complex layouts with spacing.

<ButtonGroup>
  <ButtonGroup>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button>Button 3</Button>
    <Button>Button 4</Button>
  </ButtonGroup>
</ButtonGroup>

Use ButtonGroupSeparator to create split buttons. Classic dropdown pattern.

You can also use it to add prefix or suffix buttons and text to inputs.

<ButtonGroup>
  <ButtonGroupText>Prefix</ButtonGroupText>
  <Input placeholder="Type something here..." />
  <Button>Button</Button>
</ButtonGroup>

Input Group lets you add icons, buttons, and more to your inputs. You know, all those little bits you always need around your inputs.

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"

<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

Here's a preview with icons:

You can also add buttons to the input group.

Or text, labels, tooltips,...

USD

https://

.com

@company.com

120 characters left

It also works with textareas so you can build really complex components with lots of knobs and dials or yet another prompt form.

Line 1, Column 1

script.js

Oh here are some cool ones with spinners:

Saving...

Please wait...

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: Server Actions, React Hook Form, TanStack Form, Bring Your Own Form.

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"

Here's a basic field with an input:

<Field>
  <FieldLabel htmlFor="username">Username</FieldLabel>
  <Input id="username" placeholder="Max Leiter" />
  <FieldDescription>
    Choose a unique username for your account.
  </FieldDescription>
</Field>

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:

Show these items on the desktop

Select the items you want to show on the desktop.

Hard disks

External disks

CDs, DVDs, and iPods

Connected servers

Sync Desktop & Documents folders

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.

<FieldSet>
  <FieldLegend />
  <FieldGroup>
    <Field />
    <Field />
  </FieldGroup>
</FieldSet>

Address Information

We need your address to deliver your order.

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.

Compute Environment

Select the compute environment for your cluster.

Kubernetes

Run GPU workloads on a K8s configured cluster.

Virtual Machine

Access a VM configured cluster to run GPU workloads.

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.

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"

Here's a basic item:

<Item>
  <ItemMedia variant="icon">
    <HomeIcon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Dashboard</ItemTitle>
    <ItemDescription>Overview of your account and activity.</ItemDescription>
  </ItemContent>
</Item>

Basic Item

A simple item with title and description.

Your profile has been verified.

You can add icons, avatars, or images to the item.

Security Alert

New login detected from unknown device.

Evil Rabbit

Last seen 5 months ago

CNLRER

No Team Members

Invite your team to collaborate on this project.

And here's what a list of items looks like with ItemGroup:

shadcn

shadcn@vercel.com

maxleiter

maxleiter@vercel.com

evilrabbit

evilrabbit@vercel.com

Need it as a link? Use the asChild prop:

<Item asChild>
  <a href="/dashboard">
    <ItemMedia variant="icon">
      <HomeIcon />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Dashboard</ItemTitle>
      <ItemDescription>Overview of your account and activity.</ItemDescription>
    </ItemContent>
  </a>
</Item>

Okay last one: Empty. Use this to display empty states in your app.

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

Here's how you use it:

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

No Projects Yet

You haven't created any projects yet. Get started by creating your first project.

Learn More

You can use it with avatars:

User Offline

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:

404 - Not Found

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.

import { Spinner } from "@/components/ui/spinner"

export function SpinnerBasic() {

import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"

import { LoaderIcon } from "lucide-react"

import { cn } from "@/lib/utils"

import { Kbd, KbdGroup } from "@/components/ui/kbd"

export function KbdDemo() {

"use client"

import * as React from "react"

"use client"

import {

"use client"

import * as React from "react"

import {
  CheckIcon,
  CreditCardIcon,

"use client"

import * as React from "react"

import {
  InputGroup,
  InputGroupAddon,

import {
  IconBrandJavascript,
  IconCopy,

import { LoaderIcon } from "lucide-react"

import {

import {
  Field,
  FieldDescription,

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,

import {
  Field,
  FieldDescription,

import {
  Field,
  FieldContent,

import { ShieldAlertIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

import { ChevronRightIcon, ExternalLinkIcon } from "lucide-react"

import {

import {
  Avatar,
  AvatarFallback,

import { SearchIcon } from "lucide-react"

import {

import { Button } from "@/components/ui/button"
import {
  Field,

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {

import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

import { Plus } from "lucide-react"

import {

import * as React from "react"
import { PlusIcon } from "lucide-react"

import { IconFolderCode } from "@tabler/icons-react"
import { ArrowUpRightIcon } from "lucide-react"