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.

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"

<Spinner />

Here's what it looks like:

Component preview · Base UI
spinner-basic

Here's what it looks like in a button:

Component preview · Base UI
spinner-button

You can edit the code and replace it with your own spinner.

Component preview · Base UI
spinner-custom

Kbd

Kbd is a component that renders a keyboard key.

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

<Kbd>Ctrl</Kbd>

Use KbdGroup to group keyboard keys together.

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

Component preview · Base UI
kbd-demo

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.

Component preview · Base UI
button-group-demo

Here's the code:

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.

Component preview · Base UI
button-group-dropdown

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

Component preview · Base UI
button-group-select

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

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.

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

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

Here's a preview with icons:

Component preview · Base UI
input-group-icon

You can also add buttons to the input group.

Component preview · Base UI
input-group-button

Or text, labels, tooltips, ...

Component preview · Base UI
input-group-text

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

Component preview · Base UI
input-group-textarea

Oh here are some cool ones with spinners:

Component preview · Base UI
input-group-spinner

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

Component preview · Base UI
field-input

It works with all form controls. Inputs, textareas, selects, checkboxes, radios, switches, sliders, you name it. Here's a full example:

Component preview · Base UI
field-demo

Here are some checkbox fields:

Component preview · Base UI
field-checkbox

You can group fields together using FieldGroup and FieldSet. Perfect for multi-section forms.

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

Component preview · Base UI
field-fieldset

Making it responsive is easy. Use orientation="responsive" and it switches between vertical and horizontal layouts based on container width. Done.

Component preview · Base UI
field-responsive

Wait, here's more. Wrap your fields in FieldLabel to create a selectable field group. Really easy. And it looks great.

Component preview · Base UI
field-choice-card

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.

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>

Component preview · Base UI
item-demo

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

Component preview · Base UI
item-icon

Component preview · Base UI
item-avatar

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

Component preview · Base UI
item-group

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>

Component preview · Base UI
item-link

Empty

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>

Component preview · Base UI
empty-demo

You can use it with avatars:

Component preview · Base UI
empty-avatar

Or with input groups for things like search results or email subscriptions:

Component preview · Base UI
empty-input-group

That's it. Seven new components. Works with all your libraries. Ready for your projects.