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.

Menubar API

View component

The full prop reference for the Menubar component. A horizontal bar of dropdown menus, like a desktop app.

Import

tsx

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

Props

Root

Main container for the menubar. Manages open state and keyboard navigation across all menu items.

Prop	Type	Default
value#	`string` Controlled open menu ID (identifies which menu is currently open)	—
defaultValue#	`string` Initial open menu ID when uncontrolled	—
onValueChange#	`(value: string) => void` Callback when the open menu changes	—
dir#	`'ltr' \| 'rtl'` Text direction (left-to-right or right-to-left)	—
loop#	`boolean` Whether keyboard navigation wraps around at list boundaries	true
asChild#	`boolean` Render as child element instead of div	—
className#	`string` CSS class names	—

Prop	Type	Default
value#	`string` Optional unique identifier for this menu (auto-generated if not provided)	—
children#	`React.ReactNode` Child elements (typically Trigger and Content)	—

Trigger

Button that opens/closes a menu. Placed inside Menu.

Prop	Type	Default
disabled#	`boolean` Whether the trigger is disabled	—
asChild#	`boolean` Render as child element instead of button	—
className#	`string` CSS class names	—

Content

Container for menu items. Appears as a popover below the trigger.

Prop	Type	Default
side#	`'top' \| 'right' \| 'bottom' \| 'left'` Which side of the trigger to position the menu	—
sideOffset#	`number` Distance in pixels from the trigger	8
align#	`'start' \| 'center' \| 'end'` Alignment relative to trigger (start, center, or end)	—
alignOffset#	`number` Offset from the align position	—
forceMount#	`boolean` Keep in DOM even when closed	—
loop#	`boolean` Whether focus wraps around menu items	—
avoidCollisions#	`boolean` Flip position to avoid viewport collisions	—
collisionBoundary#	`Element \| Element[] \| null` Elements that define collision detection boundary	—
collisionPadding#	`number` Padding around collision boundary	—
sticky#	`'partial' \| 'always'` Keep menu visible during partial scrolling	—
hideWhenDetached#	`boolean` Hide when trigger becomes detached from viewport	—
updatePositionStrategy#	`'always' \| 'optimized'` When to update position during scroll	—
onCloseAutoFocus#	`(event: Event) => void` Called when focus returns to trigger on close	—
onEscapeKeyDown#	`(event: KeyboardEvent) => void` Called when Escape key is pressed	—
onPointerDownOutside#	`(event: PointerDownOutsideEvent) => void` Called when pointer down occurs outside content	—
onFocusOutside#	`(event: FocusOutsideEvent) => void` Called when focus moves outside content	—
onInteractOutside#	`(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void` Called for any interaction outside content	—
asChild#	`boolean` Render as child element instead of div	—
className#	`string` CSS class names	—

Item

A clickable menu item. Can contain text or arbitrary children.

Prop	Type	Default
disabled#	`boolean` Whether the item is disabled	—
onSelect#	`(event: Event) => void` Called when the item is selected (clicked or Enter pressed)	—
textValue#	`string` Optional text value for typeahead search	—
inset#	`boolean` Add left padding for alignment with checkbox/radio items (styled only)	—
asChild#	`boolean` Render as child element instead of div	—
className#	`string` CSS class names	—

CheckboxItem

Menu item with a checkbox that toggles on/off.

Prop	Type	Default
checked#	`boolean \| 'indeterminate'` Whether the checkbox is checked or in indeterminate state	false
onCheckedChange#	`(checked: boolean) => void` Called when the checked state changes	—
disabled#	`boolean` Whether the item is disabled	—
onSelect#	`(event: Event) => void` Called when the item is selected	—
textValue#	`string` Optional text value for typeahead search	—
asChild#	`boolean` Render as child element instead of div	—
className#	`string` CSS class names	—

RadioGroup

Container for radio items where only one can be selected at a time.

Prop	Type	Default
value#	`string` Currently selected radio item value	—
onValueChange#	`(value: string) => void` Called when the selected radio item changes	—
asChild#	`boolean` Render as child element instead of div	—
className#	`string` CSS class names	—

RadioItem

A radio button menu item. Must be inside RadioGroup.

Prop	Type	Default
value#	`string` Unique value for this radio item (required)	—
disabled#	`boolean` Whether the item is disabled	—
onSelect#	`(event: Event) => void` Called when the item is selected	—
textValue#	`string` Optional text value for typeahead search	—
asChild#	`boolean` Render as child element instead of div	—
className#	`string` CSS class names	—

Sub

Container for a submenu. Must contain SubTrigger and SubContent.

Prop	Type	Default
open#	`boolean` Controlled open state for the submenu	—
defaultOpen#	`boolean` Initial open state when uncontrolled	—
onOpenChange#	`(open: boolean) => void` Called when the submenu open state changes	—
children#	`React.ReactNode` Child elements (SubTrigger and SubContent)	—

SubTrigger

Button that opens/closes a submenu. Placed inside Sub.

Prop	Type	Default
disabled#	`boolean` Whether the trigger is disabled	—
onSelect#	`(event: Event) => void` Called when the trigger is selected	—
textValue#	`string` Optional text value for typeahead search	—
inset#	`boolean` Add left padding for alignment (styled only)	—
asChild#	`boolean` Render as child element instead of div	—
className#	`string` CSS class names	—

SubContent

Container for submenu items. Appears as a popover to the side of the SubTrigger.

Prop	Type	Default
loop#	`boolean` Whether focus wraps around submenu items	—
forceMount#	`boolean` Keep in DOM even when closed	—
onCloseAutoFocus#	`(event: Event) => void` Called when focus returns on close	—
onEscapeKeyDown#	`(event: KeyboardEvent) => void` Called when Escape key is pressed	—
onPointerDownOutside#	`(event: PointerDownOutsideEvent) => void` Called when pointer down occurs outside	—
onFocusOutside#	`(event: FocusOutsideEvent) => void` Called when focus moves outside	—
onInteractOutside#	`(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void` Called for any interaction outside	—
asChild#	`boolean` Render as child element instead of div	—
className#	`string` CSS class names	—

Group

Container to group related menu items.

Prop	Type	Default
asChild#	`boolean` Render as child element instead of div	—
className#	`string` CSS class names	—

Label

Non-interactive label or section heading inside a menu.

Prop	Type	Default
inset#	`boolean` Add left padding for alignment (styled only)	—
asChild#	`boolean` Render as child element instead of div	—
className#	`string` CSS class names	—

Separator

Visual divider between menu items.

Prop	Type	Default
asChild#	`boolean` Render as child element instead of div	—
className#	`string` CSS class names	—

ItemIndicator

Displays the check mark or radio dot icon. Automatically shown/hidden based on checked state.

Prop	Type	Default
forceMount#	`boolean` Keep in DOM even when not checked	—
asChild#	`boolean` Render as child element instead of span	—
className#	`string` CSS class names	—

Portal

Renders menu content in a portal (typically at document root). Optional; Content wraps this automatically.

Prop	Type	Default
container#	`Element \| DocumentFragment \| null` Optional custom DOM node to render portal into	—
forceMount#	`boolean` Keep portal content in DOM even when menu is closed	—
children#	`React.ReactNode` Child elements to render in portal	—

Source code

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