Changelog
What's new in Drivn.
April 2026 — Yarn Package Manager Support
The CLI now auto-detects Yarn projects and generates the correct commands. All documentation install tabs show npm, pnpm, and yarn side by side.
Automatic Detection
When running in a project with a yarn.lock file, the CLI automatically uses yarn add for dependencies and yarn dlx for one-off execution. No flags or configuration required — it just works.
1 yarn dlx drivn add button
Docs Install Tabs
Every component documentation page now includes a three-tab package manager switcher showing the install command for npm, pnpm, and yarn. The active tab persists as you navigate between pages.
March 2026 — Data Table
A data-driven table component that wraps the existing Table primitive with sorting, row selection, loading skeletons, and pagination. Pass typed columns and data — the component handles the rest.
Data Table
DataTable takes a data array, column definitions, and a row key. Columns are defined with just id and header — the id doubles as the data accessor. Features include click-to-sort headers with asc/desc/none cycling, checkbox row selection with indeterminate select-all, skeleton loading rows, and a built-in empty state. Toolbar and footer slots accept any ReactNode for search filters, column visibility toggles, or pagination.
1 npx drivn add data-table
DataTable.Pagination
A sub-component designed for backend-driven pagination. Renders a "Page X of Y" label on the left with Previous and Next buttons on the right, built on the existing Pagination component. The user slices data externally and passes the current page, total page count, and a change handler.
Table Bordered Variant
The bordered variant now includes alternating row backgrounds and explicit border-border colors, matching the visual weight of the striped variant for consistency across all table styles.
March 2026 — Time Picker
A new TimePicker component with scrollable hour, minute, and second columns. Supports 12-hour and 24-hour formats, AM/PM toggle, custom formatting, and a native input mode via TimePicker.Input.
Time Picker
The dropdown mode renders scrollable columns inside a Popover for selecting hours, minutes, and optional seconds. The 12-hour format adds an AM/PM toggle column. TimePicker.Input wraps the native time input with Drivn styling for keyboard-driven entry. Both modes use Date objects and integrate with React Hook Form via Controller.
1 npx drivn add time-picker
Popover Form Fix
Popover.Trigger now renders with type="button" to prevent accidental form submission when used inside forms.
March 2026 — Stepper
A new Stepper component for multi-step workflows. Supports horizontal and vertical orientation, connecting lines, custom icons, and clickable step navigation — all with the same dot notation API.
Stepper
A multi-step progress indicator built with dot notation. Stepper.Step renders each step with a label, optional description, and custom icon. Steps display completed, active, and upcoming states with smooth transitions. Supports both horizontal and vertical orientation via a single prop, optional connecting lines between steps, and clickable navigation with an onStepChange callback.
1 npx drivn add stepper
Navigation Menu Mobile Fix
NavigationMenu now works reliably on mobile devices. The trigger uses onPointerDown with explicit focus management instead of relying on CSS focus-within, fixing touch interactions on iOS and Android.
More updates
A new documentation page covers integrating Drivn components with React Hook Form and Zod. Select and Switch also receive a fix that prevents unintended form submissions when used inside form elements.
Two new components and smarter theming docs. Combobox brings searchable dropdown selection with single and multi-select modes, Toggle provides a pressable on/off button with group support, and the theming documentation page now auto-syncs token tables from globals.scss.
Three new components join the library. Skeleton provides loading placeholders with pulse animation, Collapsible toggles content visibility with smooth height transitions, and Scroll Area offers a themed scrollable container with custom scrollbar styling.
The docs site now includes a dedicated changelog section with an index of all releases and individual detail pages for each version. Every release links to its own page with full feature descriptions, code examples, and back navigation.
AI assistants can now connect directly to Drivn's component registry via the Model Context Protocol. Instead of copy-pasting component code into chat, your AI gets exact source code, design tokens, and coding conventions automatically.
Added a dedicated /docs/components page that shows every available component at a glance. Browse all 33 components with descriptions and quick links to their documentation pages.
Two new components join the library.
Three new components ship together — a collapsible sidebar for app layouts, a command palette for keyboard-driven navigation, and a range slider for numeric input.
A new Kbd component for displaying keyboard shortcuts and hotkeys. Renders with the appropriate platform-specific symbols (Cmd on Mac, Ctrl on Windows) and supports compound key combinations.
Five new components in one release — all following dot notation and the const styles pattern.
Four new components covering content display and date selection.
The Accordion component now supports a multiple prop for opening several panels simultaneously. Uses Set-based state management internally for clean open/close tracking. This release also standardized the compound component structure across all existing components.
The first stable release of Drivn — a React component library built on dot notation, zero runtime UI dependencies, and the copy-and-own philosophy. Ships with the CLI for scaffolding projects and adding components, plus a full documentation site.