Developer guide

Tailwind component library with editable React source

A Tailwind component library packages reusable interface behavior with utility-class styling that can be inspected beside the JSX. This guide explains how Spectrum UI components use local Tailwind CSS source and where that approach fits forms, cards, navigation, status, and layout work.

Because the utilities live in the copied file, teams can replace spacing, color, typography, breakpoints, and state styles without waiting for a theme API. Component pages identify additional packages or shadcn/ui primitives when the source requires them.

Browse 10 componentsView code example

What Tailwind Component Library means

Tailwind CSS supplies low-level utility classes; a component library supplies repeatable structure, states, and interaction behavior. Combining them makes the styling contract visible at the point where the component renders.

This approach is most useful when a team already has Tailwind tokens and wants to keep component changes inside normal code review. It still requires testing responsive layouts, focus states, contrast, and any class changes introduced by a Tailwind upgrade.

When to use these patterns

01

Your product already uses Tailwind CSS

Local utilities let the component inherit existing spacing, color, typography, and breakpoint conventions.

02

You want styling changes in code review

Utility changes remain beside the JSX, making the visual diff and affected states easier to inspect together.

03

A fixed theme API is too limiting

Edit the source directly when a component needs structural changes beyond colors or variant names.

Tailwind Component Library to explore

Open a component page to inspect its live example, editable source, installation command, dependencies, API details, accessibility notes, and related components.

ActionButtonA set of pre-designed buttons including gradient, outline, loading, and icon styles.CardCardA set of pre-designed cards for login, signup, pricing, and dashboards.FeedbackStatus BadgeA status badge with icon and color variants for success, error, warning, and pending states.FormFloating Label InputAn input whose label floats above the field when focused or filled.FormDual Range SliderA slider with two draggable thumbs for selecting a range of values.DisclosureAccordionA vertically stacked set of interactive headings that each reveal a section of content.ProfileProfile DropdownA user profile dropdown menu with avatar, settings, and logout actions.FormQuantity StepperA quantity input with rolling digits, hold-to-repeat buttons, and boundary shake.FormTask CheckboxA todo checkbox that celebrates completion with a confetti burst and strikethrough.ActionLoading ButtonA shadcn/ui button with a built-in loading spinner state.

Adapt a button with local Tailwind utilities

The shadcn/ui button remains composable while route-specific spacing and focus treatment stay at the call site.

pnpm dlx shadcn@latest add button
SaveActions.tsx
import { Button } from '@/components/ui/button';

export function SaveActions() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button className="rounded-full px-5">Save changes</Button>
      <Button variant="outline" className="rounded-full">
        Cancel
      </Button>
    </div>
  );
}

Linked guides

Guide

Tailwind CSS v4 migration guide

Review utilities, configuration, and migration boundaries before upgrading.

Guide

Tailwind tips and tricks

Apply utility patterns without obscuring component intent.

Guide

shadcn/ui customization guide

Understand how local primitives and Tailwind tokens work together.

React Component LibraryNext.js UI LibraryMotion Components

Tailwind Component Library questions

The documented components expose their source and Tailwind utility classes. Install any declared global styles or dependencies shown by the specific component.