Developer guide

Open-source React component library with copy-paste source

A React component library is a reusable set of interface primitives with documented behavior and APIs. This guide explains Spectrum UI’s open-source, copy-paste approach and connects the core components used for forms, navigation, feedback, overlays, and data display.

Instead of adding one runtime package that owns every visual decision, you install or copy individual component source files. The source then lives in your application, where it can follow your TypeScript, styling, accessibility, and release requirements.

Browse 7 componentsView code example

What React Component Library means

Component libraries reduce repeated interface work by giving teams named, testable building blocks. Useful libraries document installation, dependencies, props, behavior, and accessibility constraints so a component can be evaluated before it enters an application.

Spectrum UI combines local React source with Tailwind CSS and, where the implementation requires it, Motion or shadcn/ui primitives. Each component page identifies the actual technologies and dependencies used by that source rather than assigning one stack to the entire catalog.

When to use these patterns

01

You need reusable interface primitives

Use components when buttons, inputs, disclosures, status feedback, or overlays repeat across more than one screen.

02

Your team needs source ownership

A copy-paste library fits teams that want to review, test, and change component internals inside the application repository.

03

You are assembling a design system

Start from documented behavior, then align spacing, color, type, motion, and variants with your product tokens.

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

DisclosureAccordionA vertically stacked set of interactive headings that each reveal a section of content.FeedbackAnimated AlertAn animated alert that displays notifications, warnings, and success messages.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.DataInfinite ScrollAn infinite scroll container that loads more content using the IntersectionObserver API.ProgressProgress With ValueA progress bar that displays the current value.FeedbackSpinnerA loading spinner with multiple sizes and variants for async states.

Compose an accessible product FAQ

The Accordion installation provides the local primitive used by this minimal React example.

pnpm dlx shadcn@latest add @spectrumui/accordion
ProductFaq.tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion';

export function ProductFaq() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="billing">
        <AccordionTrigger>Can I change plans later?</AccordionTrigger>
        <AccordionContent>
          Yes. Plan changes can be handled from the billing settings page.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Linked guides

Guide

Building a production component library

Plan ownership, documentation, testing, and release boundaries.

Guide

Component API design

Design props and composition surfaces that remain understandable.

Guide

Install Spectrum UI

Initialize shadcn/ui and add the first local source file.

React Block LibraryTailwind Component LibraryNext.js UI Library

React Component Library questions

Its documented components are installed as source files that remain in your project. You can inspect and edit the implementation instead of depending on a closed visual runtime.