structyl is an open-source, TypeScript-first React component library with 90+ accessible components. It combines WAI-ARIA compliant headless primitives with Tailwind CSS v4 styled wrappers, a runtime theming system, and a first-class DataTable — all in independently-versioned npm packages.

How does structyl differ from shadcn/ui?

structyl ships as actual npm packages (pnpm add @structyl/styled) rather than copy-paste code snippets. It adds a runtime theming system that switches themes without a page reload, a feature-complete DataTable, 24+ React hooks, and 90+ components — significantly more than shadcn/ui out of the box.

How does structyl compare to Radix UI?

structyl builds on the same headless-first philosophy as Radix UI but adds a complete Tailwind-styled layer, runtime theming with CSS variables, dark mode, a DataTable, and chart components. Radix is primitives-only; structyl is a full component library ready to use.

Is structyl compatible with Next.js App Router?

Yes. All structyl components that use React hooks are marked with 'use client'. The library is SSR-safe and fully compatible with Next.js 15 App Router and React Server Components.

Does structyl support dark mode?

Yes. structyl includes a ThemeProvider that supports system, light, and dark modes. Theme switches happen instantly using CSS custom properties — no page reload required and no flash of unstyled content.

How do I install structyl?

Install the main package with: pnpm add @structyl/styled (or npm install @structyl/styled). Then wrap your app in ThemeProvider from @structyl/themes and add Toaster from @structyl/styled to your root layout.

Is structyl free and open source?

Yes. structyl is MIT licensed and completely free. All packages are published to npm under the @structyl scope.

Does structyl support TypeScript?

Yes. structyl is built with TypeScript strict mode throughout. All components export their prop types and the library ships with full type definitions. There is no any usage in the public API.

What styling system does structyl use?

structyl uses Tailwind CSS v4 for styling, tailwind-variants for type-safe variant APIs, and tailwind-merge for class conflict resolution. All colors and design tokens are CSS custom properties that integrate with the runtime theming system.

Does structyl have a DataTable component?

Yes. structyl includes a first-class DataTable in the @structyl/data-table package, built on @tanstack/table-core. It supports sorting, multi-column filtering, pagination, row selection, column resizing, and row virtualization via @tanstack/react-virtual.

Resources

Changelog

All notable changes to structyl packages. We follow semantic versioning.

featurefixbreakingperfdocs

v0.5.0

May 2026

feature

Add virtual scrolling with @tanstack/react-virtual for 100k+ row datasets

@structyl/data-table

feature

Column pinning — pin columns left or right with drag-and-drop reorder

@structyl/data-table

feature

Add Combobox component with multi-select and async search support

@structyl/styled

feature

Add DatePicker and DateRangePicker components

@structyl/styled

feature

Add useIntersectionObserver, useResizeObserver, useEventListener hooks

@structyl/hooks

perf

Tree-shake unused variant classes at build time via tailwind-variants v0.3

@structyl/styled

fix

Fix color-scheme flash on initial page load in dark mode

@structyl/themes

docs

Add interactive design tokens page and component status badges

docs

v0.4.0

April 2026

feature

Add Skeleton component with animated pulse and wave variants

@structyl/styled

feature

Add Select component with search, groups, and virtualised options

@structyl/styled

feature

Add Slider, Switch, and Checkbox with indeterminate state

@structyl/styled

feature

Add useDarkMode, useHotkeys, useClickOutside, useCopyToClipboard

@structyl/hooks

breaking

Rename Dialog.Panel → Dialog.Content to align with Radix naming

@structyl/primitives

fix

Fix focus-ring not visible in high-contrast mode

@structyl/styled

fix

Fix row selection state not preserved across paginated views

@structyl/data-table

v0.3.0

March 2026

feature

Add Dialog, Sheet, and Drawer components with focus trapping

@structyl/styled

feature

Add Tabs and Accordion with compound component API

@structyl/styled

feature

Add Tooltip and Popover via @floating-ui/react

@structyl/styled

feature

Initial DataTable release with sorting, filtering, and pagination

@structyl/data-table

feature

Add zinc and rose theme presets in addition to the default slate

@structyl/themes

perf

Lazy-load icons via dynamic import to reduce initial bundle

@structyl/icons

docs

Launch interactive icon browser with search and copy-to-clipboard

docs

v0.2.0

February 2026

feature

Add Badge, Card, Avatar, and Separator components

@structyl/styled

feature

Add Input, Textarea, and Label with form integration

@structyl/styled

feature

Add useDebounce, useThrottle, useLocalStorage, useMediaQuery

@structyl/hooks

feature

Initial ThemeProvider with CSS variable injection and system mode support

@structyl/themes

breaking

Move Button variants from class strings to tailwind-variants API

@structyl/styled

fix

Fix Slot component not merging event handlers correctly

@structyl/core

v0.1.0

January 2026

feature

Initial release with Slot, Primitive, and createContext utilities

@structyl/core

feature

Initial headless primitives: Button, Dialog (partial), Tooltip

@structyl/primitives

feature

Initial styled layer: Button with size/variant/shape axes

@structyl/styled

feature

Initial hooks: useBoolean, useToggle, useCounter, usePrevious, useMount

@structyl/hooks

docs

Launch docs site with getting-started guide and component API reference

docs

For the full git history, see the commit log on GitHub.