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.

Form API

View component

The full prop reference for the Form component. A form with declarative validation built on native ValidityState.

Import

tsx

import { Form } from '@structyl/styled';

Props

Form.Root

The root form element that manages field validation state and provides context to child components

Prop	Type	Default
asChild#	`boolean` Render as a child element instead of native form; pass a single React element child	—
onClearServerErrors#	`() => void` Callback fired when the form changes, typically used to clear server-side validation errors	—
className#	`string` CSS class name (styled version applies 'flex flex-col gap-4' by default)	—
onInvalid#	`(event: Event) => void` HTML form onInvalid handler (preventDefault is composed automatically)	—
onChange#	`(event: ChangeEvent<HTMLFormElement>) => void` HTML form onChange handler (onClearServerErrors is composed automatically)	—

Form.Field

Container for a form field that associates label, control, and message elements

Prop	Type	Default
asChild#	`boolean` Render as a child element instead of native div	—
name#	`string` Field name; required and must match the input name	—
serverInvalid#	`boolean` Flag to mark field as invalid from server-side validation (shows error message)	false
className#	`string` CSS class name (styled version applies 'flex flex-col gap-1.5' by default)	—

Form.Label

Label element automatically associated with the field's input control via htmlFor

Prop	Type	Default
asChild#	`boolean` Render as a child element instead of native label	—
className#	`string` CSS class name (styled version applies text-sm font-medium and disabled styling)	—

Form.Control

Input element that tracks validation state and integrates with form validation

Prop	Type	Default
asChild#	`boolean` Render as a child element instead of native input	—
className#	`string` CSS class name (styled version applies border, focus, and invalid state styling)	—
aria-invalid#	`boolean` Auto-set based on validity state or serverInvalid flag; reflects HTML5 validation	—
aria-describedby#	`string` Auto-set to message element ID for accessibility	—
type#	`string` HTML input type (e.g., 'text', 'email', 'number', 'password')	—
required#	`boolean` HTML5 validation: field is required	—
disabled#	`boolean` Disable the input element	—
pattern#	`string` HTML5 validation: regex pattern for input value	—
minLength#	`number` HTML5 validation: minimum string length	—
maxLength#	`number` HTML5 validation: maximum string length	—
min#	`string \| number` HTML5 validation: minimum value for number/date inputs	—
max#	`string \| number` HTML5 validation: maximum value for number/date inputs	—
step#	`string \| number` HTML5 validation: step value for number/date inputs	—
placeholder#	`string` Placeholder text shown when input is empty	—
onChange#	`(event: ChangeEvent<HTMLInputElement>) => void` Change event handler (validity state is tracked automatically)	—
ref#	`React.Ref<HTMLInputElement>` Forward ref to underlying HTML input element	—

Form.Message

Validation error message element that displays based on field validity or server errors

Prop	Type	Default
asChild#	`boolean` Render as a child element instead of native span	—
match#	`'badInput' \| 'patternMismatch' \| 'rangeOverflow' \| 'rangeUnderflow' \| 'stepMismatch' \| 'tooLong' \| 'tooShort' \| 'typeMismatch' \| 'valid' \| 'valueMissing' \| string \| ((value: string, formData: FormData) => boolean \| Promise<boolean>)` Validity matcher: show message when this HTML5 validation state or custom matcher matches	—
forceMatch#	`boolean` Force message to display even if validity doesn't match	—
children#	`React.ReactNode` Message content; if omitted, shows default message for HTML5 validity matchers	—
className#	`string` CSS class name (styled version applies 'text-destructive text-xs')	—

Form.ValidityState

Render prop component that provides the current field's HTML5 ValidityState for custom UI

Prop	Type	Default
children#	`(validity: ValidityState \| undefined) => React.ReactNode` Render function receiving the field's ValidityState object or undefined	—

Form.Submit

Submit button element (HTML type='submit' automatically set)

Prop	Type	Default
asChild#	`boolean` Render as a child element instead of native button	—
className#	`string` CSS class name for styling	—
disabled#	`boolean` Disable the button	—
onClick#	`(event: React.MouseEvent<HTMLButtonElement>) => void` Click event handler	—
type#	`'submit'` Button type (automatically set to 'submit', overridable via props)	'submit'

Source code

If you didn't find what you need here, read the component implementation .