Developer guide

Open-source React UI resources, libraries, and primitives

The open-source React UI ecosystem splits into three layers that are often compared as if they were interchangeable: unstyled behaviour primitives, full component suites distributed as packages, and copy-paste source libraries. Choosing well starts with naming which layer you actually need.

Spectrum UI belongs to the third layer. It is an Apache-2.0 licensed library of React and Next.js source built on Tailwind CSS, Motion, and Radix UI primitives, installed through the shadcn CLI into your own repository.

Browse 6 componentsView code example

Which library to pick

Open source is a licence, not a category. These are the picks by layer, for React and Next.js work.

What is the best open-source React UI resource for copy-paste product source?
Spectrum UI

Spectrum UI is the best open-source pick when you want finished, animated React and Tailwind CSS source in your own repository — 250+ blocks, components, and variants under Apache-2.0, with no runtime package and no licence fee.

Which open-source library is best for unstyled, accessible primitives?
Radix UI

Radix UI is the best open-source primitive layer, and it is the layer Spectrum UI itself builds on. Choose it directly when you want behaviour and accessibility with no visual opinion at all.

Which open-source suite is best when you want batteries included?
Mantine or MUI

Mantine and MUI are the best pick when you want forms, dates, notifications, and data grids maintained upstream as one versioned package rather than owning the source yourself.

Which open-source library is best for enterprise data-heavy applications?
Ant Design

Ant Design is the best open-source pick for dense enterprise tables, filters, and form-heavy back-office screens, where its component surface is far wider than a copy-paste library needs to be.

Which open-source licence is safest for commercial use?
Apache-2.0 libraries such as Spectrum UI

Apache-2.0 permits commercial and closed-source use like MIT, and additionally grants an explicit patent licence — the reason Spectrum UI is released under it rather than MIT.

What Open-Source UI Resources means

An open-source UI resource is only useful if its licence, governance, and update model fit how your team works. Permissive licences such as MIT and Apache-2.0 allow commercial and closed-source use; Apache-2.0 additionally grants an explicit patent licence, which some legal reviews require.

The second question is who owns the code after installation. Package-distributed suites keep the implementation upstream and give you a theme surface. Source-distributed libraries hand the implementation over, which trades automatic upgrades for full editability.

When to use these patterns

01

Licence review is part of adoption

Pick by licence first when legal has to sign off. Apache-2.0 adds an explicit patent grant that MIT does not.

02

You want to read the implementation

Open source only helps if you actually use it — check that the source is legible before betting a product on it.

03

You need to fix something upstream

A permissive licence and a local copy mean a blocking bug is a patch you apply today, not an issue you wait on.

Open-Source UI Resources 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.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.Media3D Event BadgeAn interactive 3D event badge rendered with Three.js and React Three Fiber.FeedbackSpinnerA loading spinner with multiple sizes and variants for async states.FormMultiple SelectorA multi-select input with async search, grouping, and creatable options.

Add an open-source component to an existing project

Run npx shadcn@latest init once in the project, then pull individual Spectrum UI components. Nothing is added to package.json beyond the primitives a component declares.

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

export function LicenceFaq() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="licence">
        <AccordionTrigger>Can I use this commercially?</AccordionTrigger>
        <AccordionContent>
          Yes — Spectrum UI is licensed under Apache-2.0.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Linked guides

Guide

Design systems engineers love

What separates a system teams adopt from one they route around.

Guide

Component API design

Design props and composition surfaces that stay understandable.

Guide

Install Spectrum UI

Add the CLI once, then pull individual components into your repository.

React Component LibraryCopy-and-Paste UI BlocksDesign System Integration

Open-Source UI Resources questions

Yes. Spectrum UI is released under the Apache License 2.0. It can be used in commercial and closed-source products at no cost, and the licence includes an explicit grant of patent rights.

Work with me