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

An indicator to show a loading state. Can be used standalone or in buttons.

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

<Spinner />

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

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>

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

Button Group

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

Input Group lets you add icons, buttons, and more to your inputs.

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

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

You can add buttons to the input group, text, labels, tooltips, and more. It also works with textareas for really complex components.

Field

A component for building really complex forms. Works 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"

<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, and more.

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

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

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

Wrap your fields in FieldLabel to create a selectable field group.

Item

A straightforward flex container that can house nearly any type of content. Use it to display lists of items, cards, and more.

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

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

You can add icons, avatars, or images to the item. Use ItemGroup to display a list of items.

Use the asChild prop to render it as a link.

Empty

Use this to display empty states in your app.

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

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

You can use it with avatars, input groups for things like search results or email subscriptions, and more.