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 Range Picker API

View component

The full prop reference for the Date Range Picker component. Pick a start and end date from a popover calendar.

Import

tsx

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

Props

DateRangePicker

Main date range picker component with integrated label, trigger, and popover content. Accepts all Root props plus styling variants.

Prop	Type	Default
value#	`DateRange \| DateRangeTuple \| null \| undefined` The selected date range (controlled)	—
defaultValue#	`DateRange \| DateRangeTuple \| null \| undefined` Initial date range (uncontrolled)	{}
onChange#	`(range: DateRangeTuple, context: PickerChangeContext<DateRangeValidationError>) => void` Fired when range changes with validation context	—
onValueChange#	`(range: DateRange) => void` Fired when range changes (alternative callback)	—
onAccept#	`(range: DateRangeTuple, context: PickerChangeContext<DateRangeValidationError>) => void` Fired when both start and end dates are selected	—
onError#	`(error: DateRangeValidationError \| null, value: DateRangeTuple) => void` Fired when validation error changes	—
open#	`boolean` Whether the popover is open (controlled)	—
defaultOpen#	`boolean` Initial open state (uncontrolled)	false
onOpenChange#	`(open: boolean) => void` Fired when open state changes	—
onOpen#	`() => void` Fired when popover opens	—
onClose#	`() => void` Fired when popover closes	—
closeOnSelect#	`boolean` Close popover after both dates are selected	true
disabled#	`boolean` Disable the entire picker	—
readOnly#	`boolean` Prevent changes to the range	—
minDate#	`Date` Minimum selectable date	—
maxDate#	`Date` Maximum selectable date	—
disablePast#	`boolean` Disable all dates before today	—
disableFuture#	`boolean` Disable all dates after today	—
disabledDays#	`(date: Date) => boolean` Function to determine if a date is disabled	—
shouldDisableDate#	`(date: Date, position: DateRangePosition) => boolean` Function to disable dates by position ('start' \| 'end')	—
weekStartsOn#	`number` Day of week calendar starts (0=Sunday, 1=Monday, etc.)	—
locale#	`string` BCP 47 locale for date formatting	—
autoFocus#	`boolean` Auto-focus the trigger on mount	—
calendars#	`1 \| 2 \| 3` Number of calendars to display	2
currentMonthCalendarPosition#	`1 \| 2 \| 3` Which calendar position shows the current month	—
dayOfWeekFormatter#	`(date: Date) => string` Custom formatter for day-of-week headers	—
defaultRangePosition#	`'start' \| 'end'` Which part of the range to edit initially	'start'
desktopModeMediaQuery#	`string` CSS media query for desktop mode	—
disableAutoMonthSwitching#	`boolean` Prevent automatic month switching while selecting	—
disableDragEditing#	`boolean` Disable drag-to-select range	—
disableHighlightToday#	`boolean` Don't highlight today's date	—
disableOpenPicker#	`boolean` Disable opening the picker popover	—
displayWeekNumber#	`boolean` Show week numbers in calendar	—
fixedWeekNumber#	`number` Fixed number of weeks to display	—
format#	`Intl.DateTimeFormatOptions \| string` Date format for display (e.g., { dateStyle: 'short' } or 'yyyy-MM-dd')	{ dateStyle: 'medium' }
formatDensity#	`'dense' \| 'spacious'` Spacing in formatted date output	'dense'
inputRef#	`React.Ref<HTMLInputElement>` Ref to the underlying input element	—
keepOpenDuringFieldFocus#	`boolean` Keep popover open while field is focused	—
label#	`React.ReactNode` Label text displayed above the trigger	—
loading#	`boolean` Show loading state	—
localeText#	`PickerLocaleText` Locale-specific text overrides	—
name#	`string` Name attribute for the trigger input	—
onMonthChange#	`(month: Date) => void` Fired when displayed month changes	—
onRangePositionChange#	`(position: 'start' \| 'end') => void` Fired when range position changes	—
onSelectedSectionsChange#	`(sections: PickerSelectedSections) => void` Fired when selected date sections change	—
rangePosition#	`'start' \| 'end'` Which part of range is being edited (controlled)	—
referenceDate#	`Date \| DateRangeTuple` Reference date for picker logic	—
renderLoading#	`() => React.ReactNode` Custom loading state renderer	—
selectedSections#	`PickerSelectedSections` Which date sections are selected (controlled)	—
defaultSelectedSections#	`PickerSelectedSections` Initial selected sections (uncontrolled)	—
showDaysOutsideCurrentMonth#	`boolean` Show days from adjacent months	—
slotProps#	`PickerSlotProps` Props passed to internal slot components	—
slots#	`PickerSlots` Custom components for internal slots	—
sx#	`PickerSx` Emotion-style sx prop for styling	—
timezone#	`string` IANA timezone for date operations	—
viewRenderers#	`{ day?: DateRangePickerViewRenderer \| null }` Custom renderer for day view	—
shortcuts#	`DateRangePickerShortcut[] \| false` Quick-select shortcuts (e.g., 'Last 7 days'); false hides shortcuts	—
className#	`string` CSS class for the root wrapper	—
triggerClassName#	`string` CSS class for the trigger button	—
contentClassName#	`string` CSS class for the popover content	—
calendarClassName#	`string` CSS class for the calendar grid	—
helperText#	`React.ReactNode` Helper text displayed below the trigger	—
placeholder#	`React.ReactNode` Placeholder when no date is selected	'MM/DD/YYYY - MM/DD/YYYY'
separator#	`string` Separator between start and end dates	' – '
id#	`string` HTML id for the trigger element	—
required#	`boolean` Show required indicator in label	—
error#	`boolean` Display error state styling	—
shortcutsClassName#	`string` CSS class for the shortcuts container	—
showOutsideDays#	`boolean` Show days from adjacent months (alias for showDaysOutsideCurrentMonth)	—
rootProps#	`React.ComponentPropsWithoutRef<'div'>` Native HTML attributes (onClick, style, data-, aria-, etc.) on root wrapper	—

DateRangePicker.Root

Low-level root container for date range picker state (primitives layer)

Prop	Type	Default
value#	`DateRange \| DateRangeTuple \| null \| undefined` The selected date range (controlled)	—
defaultValue#	`DateRange \| DateRangeTuple \| null \| undefined` Initial date range (uncontrolled)	{}
onChange#	`(range: DateRangeTuple, context: PickerChangeContext<DateRangeValidationError>) => void` Fired when range changes	—
onValueChange#	`(range: DateRange) => void` Fired when range changes (alternative)	—
onAccept#	`(range: DateRangeTuple, context: PickerChangeContext<DateRangeValidationError>) => void` Fired when complete range is selected	—
onError#	`(error: DateRangeValidationError \| null, value: DateRangeTuple) => void` Fired when validation error changes	—
open#	`boolean` Popover open state (controlled)	—
defaultOpen#	`boolean` Initial popover state (uncontrolled)	false
onOpenChange#	`(open: boolean) => void` Fired when open state changes	—
onOpen#	`() => void` Fired when popover opens	—
onClose#	`() => void` Fired when popover closes	—
closeOnSelect#	`boolean` Close popover after both dates selected	true
disabled#	`boolean` Disable the picker	—
readOnly#	`boolean` Prevent changes	—
minDate#	`Date` Minimum selectable date	—
maxDate#	`Date` Maximum selectable date	—
disablePast#	`boolean` Disable dates before today	—
disableFuture#	`boolean` Disable dates after today	—
disabledDays#	`(date: Date) => boolean` Custom date disable function	—
shouldDisableDate#	`(date: Date, position: 'start' \| 'end') => boolean` Disable by range position	—
weekStartsOn#	`number` First day of week (0-6)	—
locale#	`string` BCP 47 locale	—
autoFocus#	`boolean` Auto-focus on mount	—
calendars#	`1 \| 2 \| 3` Number of calendars	—
currentMonthCalendarPosition#	`1 \| 2 \| 3` Calendar position showing current month	—
dayOfWeekFormatter#	`(date: Date) => string` Custom weekday formatter	—
defaultRangePosition#	`'start' \| 'end'` Initial range position	'start'
desktopModeMediaQuery#	`string` Desktop mode media query	—
disableAutoMonthSwitching#	`boolean` Prevent auto month switch	—
disableDragEditing#	`boolean` Disable drag-to-select	—
disableHighlightToday#	`boolean` Don't highlight today	—
disableOpenPicker#	`boolean` Disable opening picker	—
displayWeekNumber#	`boolean` Show week numbers	—
fixedWeekNumber#	`number` Fixed week count	—
format#	`Intl.DateTimeFormatOptions \| string` Date format options	—
formatDensity#	`'dense' \| 'spacious'` Format spacing	'dense'
inputRef#	`React.Ref<HTMLInputElement>` Ref to input element	—
keepOpenDuringFieldFocus#	`boolean` Keep open during focus	—
label#	`React.ReactNode` Label text	—
loading#	`boolean` Loading state	—
localeText#	`Record<string, React.ReactNode>` Locale text overrides	—
name#	`string` Input name attribute	—
onMonthChange#	`(month: Date) => void` Fired when displayed month changes	—
onRangePositionChange#	`(position: 'start' \| 'end') => void` Fired when range position changes	—
onSelectedSectionsChange#	`(sections: PickerSelectedSections) => void` Fired when selected sections change	—
rangePosition#	`'start' \| 'end'` Current range position (controlled)	—
referenceDate#	`Date \| DateRangeTuple` Reference date	—
renderLoading#	`() => React.ReactNode` Custom loading renderer	—
selectedSections#	`PickerSelectedSections` Selected sections (controlled)	—
defaultSelectedSections#	`PickerSelectedSections` Initial sections (uncontrolled)	—
showDaysOutsideCurrentMonth#	`boolean` Show adjacent month days	—
slotProps#	`Record<string, unknown>` Slot component props	—
slots#	`Record<string, React.ElementType \| null \| undefined>` Custom slot components	—
sx#	`PickerSx` Emotion sx prop	—
timezone#	`string` IANA timezone	—
viewRenderers#	`{ day?: DateRangePickerViewRenderer \| null }` Custom view renderer	—
shortcuts#	`DateRangePickerShortcut[] \| false` Shortcut buttons	—
children#	`React.ReactNode` Child components	—

DateRangePicker.Trigger

Button that opens the date range picker popover

Prop	Type	Default
children#	`React.ReactNode` Trigger content (icon, text, etc.)	—
className#	`string` CSS class name	—
disabled#	`boolean` Disable the trigger	—
aria-invalid#	`boolean \| 'true' \| 'false'` Marks invalid state for assistive tech	—
aria-describedby#	`string` Helper text element id	—
aria-label#	`string` Accessible label	—

DateRangePicker.Content

Popover content containing calendar and shortcuts

Prop	Type	Default
children#	`React.ReactNode` Custom content (overrides defaults)	—
className#	`string` CSS class on content wrapper	—
align#	`'start' \| 'center' \| 'end'` Popover alignment relative to trigger	'center'
sideOffset#	`number` Distance from trigger in pixels	6
calendars#	`1 \| 2 \| 3` Number of calendars to display	—
calendarClassName#	`string` CSS class on calendar wrapper	—
loading#	`boolean` Show loading state	—
shortcuts#	`DateRangePickerShortcut[] \| false` Quick-select shortcuts (false hides)	—
shortcutsClassName#	`string` CSS class on shortcuts container	—
showOutsideDays#	`boolean` Show adjacent month days	—
showDaysOutsideCurrentMonth#	`boolean` Show adjacent month days (alias)	—

DateRangePicker.Calendar

Styled calendar display with 1-3 month grids

Prop	Type	Default
calendars#	`1 \| 2 \| 3` Number of calendars to show	2
month#	`Date` Displayed month (controlled)	—
defaultMonth#	`Date` Initial month (uncontrolled)	—
onMonthChange#	`(month: Date) => void` Fired when month changes	—
className#	`string` CSS class on wrapper	—
showOutsideDays#	`boolean` Show adjacent month days	—
showDaysOutsideCurrentMonth#	`boolean` Show adjacent month days (alias)	—
locale#	`string` BCP 47 locale	—

DateRangePicker.CalendarMonth

Single month calendar grid

Prop	Type	Default
month#	`Date` Month to display	—
showOutsideDays#	`boolean` Show adjacent month days	—
showDaysOutsideCurrentMonth#	`boolean` Show adjacent month days (alias)	—
className#	`string` CSS class name	—
locale#	`string` BCP 47 locale	—

DateRangePicker.Shortcuts

Container for quick-select shortcut buttons

Prop	Type	Default
shortcuts#	`DateRangePickerShortcut[]` Array of shortcut definitions	—
className#	`string` CSS class on container	—

DateRangePicker.Value

Displays the formatted selected date range

Prop	Type	Default
format#	`Intl.DateTimeFormatOptions \| string` Date format (e.g., { dateStyle: 'short' } or 'yyyy-MM-dd')	{ dateStyle: 'medium' }
formatDensity#	`'dense' \| 'spacious'` Spacing in formatted output	'dense'
locale#	`string` BCP 47 locale for formatting	—
separator#	`string` Separator between dates	' – '
placeholder#	`React.ReactNode` Text when no date selected	'Pick a date range'

DateRangePicker.Loading

Displays loading state message

Prop	Type	Default

DateRangePicker.Portal

Portal container for popover content (re-exported from Popover primitive)

Prop	Type	Default
children#	`React.ReactNode` Content to portal	—

DateRangePicker.Anchor

Anchor point for popover positioning (re-exported from Popover primitive)

Prop	Type	Default
children#	`React.ReactNode` Anchor content	—

DateRangePickerShortcut

Type definition for quick-select shortcuts

Prop	Type	Default
label#	`React.ReactNode` Display text for the shortcut button	—
getValue#	`(today: Date) => DateRange \| DateRangeTuple \| null \| undefined` Function returning the range when shortcut is selected	—
disabled#	`boolean` Disable this shortcut	—
closeOnSelect#	`boolean` Close popover after selecting this shortcut	—

Source code

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