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.

Date Time Picker

stable

Pick a date first, then choose the time from one popover with MUI-style props.

Basic usage

Deployment window

Select the date, then choose the time.

Examples

With AM/PM and helper text

Enable 12-hour clock and guide the user with helper text.

Publish at

Pick the date and then the time.

MUI-style date time field

Pick the date first, then choose the time from the staged time picker.

Deployment window

Date and time validation share one Date value.

AM/PM with seconds

Enable AM/PM and seconds while keeping the date-first, time-second flow.

Audit timestamp

After selecting a date, the time picker shows hours, minutes and seconds.

Features

Date-first time picker flow.
Min/max date-time validation.
AM/PM and seconds support.

Installation

bash

pnpm dlx structyl add date-time-picker

API Reference

DateTimePicker

MUI-style date-time field that selects the date first, then shows the time picker.

Prop	Type	Default
value / defaultValue	`Date \| null` Controlled or uncontrolled date-time value.	—
onChange / onAccept	`(value, context) => void` MUI-style callbacks with validation context.	—
minDateTime / maxDateTime	`Date` Absolute date-time validation bounds.	—
minDate / maxDate / minTime / maxTime	`Date` Separate date and time validation bounds.	—
ampm / minutesStep / timeSteps	`boolean / number / object` Time selection behavior.	—
shouldDisableDate / shouldDisableMonth / shouldDisableYear / shouldDisableTime	`validation callbacks` Custom validation callbacks.	—
views / view / openTo / onViewChange	`date-time views` MUI-compatible view control props.	—
loading / renderLoading / format / formatDensity	`MUI field props` Display and loading props.	—
slots / slotProps / sx / viewRenderers / timezone	`object / string` MUI customization and timezone compatibility props.	—

DateTimePicker.Root

Compound date-time input with one controlled Date value.

Prop	Type	Default
value	`Date \| null` Controlled date-time.	—

DateTimePicker.Trigger

Opens the date-time popover.

Prop	Type	Default

DateTimePicker.Content

The popover with staged calendar and time controls.

Prop	Type	Default

DateTimePicker.Calendar

Styled calendar bound to DateTimePicker state.

Prop	Type	Default

DateTimePicker.DatePanel

Renders children only while the active view is date-based.

Prop	Type	Default

DateTimePicker.TimePanel

Renders children after date selection and exposes analog time panel render props.

Prop	Type	Default
children	`ReactNode \| (props) => ReactNode` Custom time picker panel renderer.	—

DateTimePicker.DateButton

Returns from the time panel to the date calendar.

Prop	Type	Default

DateTimePicker.Segment

Time segment bound to DateTimePicker state.

Prop	Type	Default
segment	`'hour' \| 'minute' \| 'second' \| 'period'` Time unit to edit.	—

Edit on GitHub

PreviousTime Picker Next Color Picker