structyl
v1.0.0 — Stable release

The React UI library
with structure.

90+ accessible components. Tailwind-styled. Runtime theming with no FOUC. A first-class DataTable that Radix deliberately omits.

Get started GitHub
$pnpm add@structyl/styled @structyl/themes

Buttons

Badges

DefaultSuccessWarningDestructiveInfo

Inputs & controls

Select…
90+Components
9Packages
100%TypeScript
WAI-ARIAAccessible
MITLicense

Why structyl

Everything you need. Nothing you don't.

Four layers working together so you spend time building products, not configuring UI infrastructure.

WAI-ARIA APG

Headless Primitives

WAI-ARIA compliant behavior with zero styling. Every keyboard interaction, ARIA role, and focus management pattern follows the official spec. Bring your own styles, get accessibility for free.

Learn more
tailwind-variants

Tailwind Styled

A full-coverage styled layer built on top of the headless primitives. Variant-driven with tailwind-variants. Ships as a real package — not a copy-paste collection.

Learn more
No FOUC

Runtime Theming

Switch themes at runtime without a page reload. CSS variables, ThemeProvider, zero FOUC. Build multi-brand apps, user-customizable UIs, or simple dark mode — all in one system.

Learn more
@tanstack/table

First-class DataTable

The feature every app needs and every headless library skips. Built on @tanstack/table-core with sorting, filtering, virtualization, server-side pagination, row selection, and column resizing.

Learn more

How it compares

The gaps other libraries leave open.

FeaturestructylRadix UIshadcn/uiMUI
Headless primitives
Tailwind styled layer
Runtime theming
Built-in DataTable
TypeScript first
Real npm package
WAI-ARIA compliant

Runtime theming

10 accent presets. Instant switching.

Click any preset — the entire page updates live with no reload and no flash of unstyled content. Your choice is remembered across pages.

Build a fully custom theme — colors, radius, shadows, fonts — in the playground.

Open Theme Playground

Get started

Up and running in minutes.

01Install packages
pnpm add @structyl/styled
pnpm add @structyl/themes
02Wrap with ThemeProvider
import { ThemeProvider } from '@structyl/themes';

export default function Layout({ children }) {
  return (
    <ThemeProvider defaultTheme="slate">
      {children}
    </ThemeProvider>
  );
}
03Use components
import { Button } from '@structyl/styled';

export default function Page() {
  return (
    <Button variant="outline">
      Hello, structyl
    </Button>
  );
}
Read the full guide

Architecture

Nine focused, tree-shakeable packages.

Install only what you use. Each package is independently versioned, fully typed, and ships both ESM and CJS.

@structyl/primitives

Headless WAI-ARIA primitives

@structyl/styled

Tailwind-styled component layer

@structyl/themes

ThemeProvider + runtime token system

@structyl/data-table

Feature-complete DataTable component

@structyl/hooks

24 SSR-safe, tree-shakeable hooks

@structyl/icons

Lucide icon set, typed and consistent

@structyl/utils

cn(), type guards, and pure utilities

@structyl/core

Slot, Primitive, createContext helpers

@structyl/cli

shadcn-style component installer

Start building today.

Free, open-source, MIT licensed. No hidden costs, no vendor lock-in.

Get started Browse components