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.

Mentions API

View component

The full prop reference for the Mentions component. A textarea with @-mention autocomplete.

Import

tsx

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

Props

Root

Container component that manages mentions state and provides context to child components. Supports controlled/uncontrolled value and custom trigger characters.

Prop	Type	Default
value#	`string` Controlled text value of the mentions textarea	—
defaultValue#	`string` Default uncontrolled initial value	''
onValueChange#	`(value: string) => void` Callback fired when the textarea value changes	—
triggerChar#	`string` Character that triggers mention suggestions (e.g., '@' for people, '#' for tags)	'@'
asChild#	`boolean` Whether to render the component as its single child instead of a div wrapper	—
className#	`string` CSS class names to apply to the root div element	—

Textarea

Textarea input that manages caret position detection, query tracking, and keyboard navigation (arrow keys, escape). Automatically handles mention trigger detection and suggestion filtering.

Prop	Type	Default
onChange#	`(event: React.ChangeEvent<HTMLTextAreaElement>) => void` Native textarea onChange handler (composed with internal mention logic)	—
onKeyDown#	`(event: React.KeyboardEvent<HTMLTextAreaElement>) => void` Native textarea onKeyDown handler (composed with arrow key and escape navigation)	—
className#	`string` CSS class names to apply to the textarea element	—
placeholder#	`string` Placeholder text shown when textarea is empty	—

Suggestions

Container for filtered mention suggestions. Renders suggestions in a portal by default unless disablePortal is true. Handles visibility based on open state and filtered items.

Prop	Type	Default
items#	`MentionSuggestion[]` Array of suggestion objects with id and label properties to filter and display	—
container#	`Element \| DocumentFragment \| null` Portal container element; if not provided, portals to document.body	—
className#	`string` CSS class names to apply to the wrapper div element	—
children#	`React.ReactNode` Child elements (typically a div containing Items component)	—

Items

Render prop component that iterates over filtered suggestions and calls the render function for each item with access to the item, index, and highlighted state.

Prop	Type	Default
children#	`(item: MentionSuggestion, index: number, highlighted: boolean) => React.ReactNode` Render function called for each filtered suggestion item with the item data, its index, and boolean indicating if it's currently highlighted	—

Item

Individual suggestion item component. Handles click selection, pointer move highlighting, and semantic option role for accessibility.

Prop	Type	Default
suggestion#	`MentionSuggestion` The suggestion object with id and label to be inserted when selected	—
index#	`number` The index of this item in the filtered suggestions list	—
children#	`React.ReactNode` Content to render inside the item; defaults to suggestion.label if not provided	—
onClick#	`(event: React.MouseEvent<HTMLDivElement>) => void` Native click handler (composed with suggestion selection logic)	—
onPointerMove#	`(event: React.PointerEvent<HTMLDivElement>) => void` Native pointer move handler (composed with highlight logic)	—
className#	`string` CSS class names to apply to the item div	—

Source code

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