Changelog

What’s new in each version of Lucent UI.

0.35.0

April 2026

CodeBlock: wrap & minimal

CodeBlock wrap propNew wrap boolean prop enables line wrapping instead of horizontal scroll or truncation. Works with both code and prompt variants — ideal for displaying natural-language AI prompts that should be fully visible.

CodeBlock minimal propNew minimal boolean prop renders a headerless code block with a corner copy button. No language label or tab bar — just the code and a subtle copy action.

0.34.0

April 2026

4 New Patterns, Collapsible Card & Disabled Text

4 new patternsFour new pattern manifests for AI retrieval, expanding the Patterns tier with common real-world UI compositions.

—Product/Item Card — product card layout with article and team member variants

—Announcement Card — announcement card with media, system notice, and promo variants

—Confirmation Dialog — confirmation dialog with typed confirmation and non-destructive variants

—Bulk Action Bar — bulk action bar with minimal and extended variants

Collapsible Card improvementsStyle escape hatch and card recipe enhancements for more flexible Collapsible + Card compositions.

Disabled textLightened disabled text color for better visual distinction between disabled and enabled states.

0.33.0

April 2026

MCP Design Rules

Layout design rules in MCPDesign rules are now injected into the MCP system prompt. A new get_design_rules tool lets AI agents query layout guidelines, spacing conventions, and composition best practices.

0.32.1

April 2026

DevTools Preset Colors

Full palette presetsDevTools presets now apply full color palettes (background, surface, border, accent) instead of accent only. All colors are theme-aware with distinct light and dark variants.

—Dark mode accents use lighter palette variants for proper visibility

—Preset colors automatically re-apply when toggling between light/dark mode

—Dark mode surfaces use stronger hue tints for visible distinction between presets

0.31.0

March 2026

Stepper Molecule, Golden Compositions & Recipes → Patterns

New molecule: StepperStep indicator for multi-step flows — onboarding wizards, checkout funnels, and setup sequences. Horizontal or vertical orientation with animated checkmark on completion, numbered step labels, status badges, and custom per-step icons.

—Horizontal — continuous connector track behind circles with animated fill between steps

—Vertical — connector column on the left with labels, descriptions, and status

—Animated checkmark — spring scale (0→1.2→1) on step completion

—Status badges — Chip atoms (success/accent/neutral) for Completed / In Progress / Pending

—Custom icons — per-step icon prop overrides the default number/checkmark

6 golden compositionsInteractive compositions in the dev playground that serve as visual proof the component system produces polished, real-world UI.

—ProfileCard — avatar, name/status chip, bio, skill tags, stats row, follow/message buttons

—PreferencesCard — header with version badge, overflow menu, toggle setting rows, slider, select dropdown, save/reset actions

—PricingTable — three-tier pricing cards (Free/Pro/Enterprise) with feature lists, middle card highlighted with accent border

—NotificationFeed — notification list with read/unread states, type chips, icon action buttons with tooltips

—OnboardingFlow — multi-step form with Stepper, form fields, and back/next navigation

—DashboardHeader — breadcrumb navigation, page title with icon action buttons, four stat cards with trend chips

4 new patternsNew pattern manifests for AI retrieval: PricingTable, NotificationFeed, OnboardingFlow, and DashboardHeader.

Recipes renamed to PatternsThe "recipes" tier has been renamed to "patterns" across the entire codebase to clarify the design system hierarchy: Atoms → Molecules → Patterns → Compositions. Deprecated type aliases kept for backward compatibility.

0.30.0

March 2026

Timeline Redesign & FilterMultiSelect Enhancements

Timeline redesignRedesigned from outlined-ring event list to a modern activity-feed pattern with filled dots, inline title + date, and a new content prop for embedding rich nested blocks.

—Filled dots — compact 20px circles filled with the status color, white iconography (was 28px outlined rings)

—Inline title + date — date follows title on the same line instead of pushed to the far right

—content prop — new slot on TimelineItem for embedding rich blocks (e.g. Card) below the title/description

—info status icon — added (was missing)

—Default dot — small white inner dot on muted fill

—Thinner connector — 1.5px (was 2px)

FilterMultiSelect enhancementsNew xs size for compact toolbar usage, new ghost variant, and label-less triggers no longer render a chevron.

0.29.0

March 2026

Filter Molecules & Search / Filter Bar Pattern

Filter molecule familyFour new filter-oriented molecules designed for toolbar and filter bar layouts. Each is a button-style trigger with a popover — no visible input fields cluttering the bar.

—FilterSearch — collapsible square icon button that expands to an Input on click, collapses when blurred empty

—FilterSelect — single-select button + chevron opens a Menu with selectable items

—FilterMultiSelect — multi-select button with accent Chip count badge in the trigger label

—FilterDateRange — date range button + calendar popover, shows selected range on trigger

Pattern: Search / Filter BarNew composition pattern — search-filter-bar — a compact toolbar for filtering and sorting lists and data tables. Composes the Filter molecule family into a cohesive bar.

—Default variant — full toolbar with search, single/multi-select filters, date range, clear all, sort, and view toggle

—Minimal variant — search and sort only

—Pipeline variant — multi-select filters only, for kanban and pipeline views

DateRangePicker: trigger propNew optional trigger prop accepts a custom ReactNode, replacing the default input-style button. Ideal for compact toolbar layouts.

0.28.0

March 2026

LucentDevTools, Shadow Presets & Design Personalities

LucentDevTools — Live Token EditorNew lucent-ui/devtools entry point with a floating panel (Cmd+Shift+D). Three tabs: Design (preset gallery, color pickers, density/roundness/shadow controls), Typography (14 Google Fonts with auto-loading, type scale presets), and Tokens (raw editor for all ~80 tokens).

10 curated design presetsFull design personalities available via <LucentProvider preset="...">: Default, Modern, Liquid Glass, Bento, Brutalist, Terminal, Soft UI, Bloom, Minimal, Enterprise — each bundles accent color, font family, type scale, density, roundness, and shadow style.

8 shadow styles + dark-mode-native shadowsNew shadow presets: Liquid Glass, Brutalist, Neumorphic, Natural, Glow — added to Flat, Subtle, Elevated. Every dark-mode variant rewritten to simulate light sources instead of darkening.

—Default: lit edge (inset 0 1px white highlight)

—Subtle: ambient accent-tinted glow via color-mix()

—Elevated: internal luminosity via inset white glow

—Natural: layered lit edges at increasing intensity

—Liquid Glass: frosted backlight (inner + outer white diffusion)

—Neumorphic: chromatic accent glow + white highlight

—Brutalist: accent outline ring + offset block via color-mix()

—Glow: pure accent glow (already dark-mode-native)

Preset prop on LucentProviderNew preset prop accepts a string name or object: <LucentProvider preset="brutalist"> or preset={{ shadow: 'glow', shape: 'pill' }}.

Tabs: optional contentcontent is now optional on TabItem. When no tab has content, panel rendering is skipped — enables header-only / controlled-mode usage.

ColorPicker zIndex bumpPopover zIndex increased to 999999 to render above high-z-index containers.

tokenToCssVar exportNew utility exported from lucent-ui: converts camelCase token keys to --lucent-* CSS var names.

0.27.2

March 2026

Contained variant & Card selected: neutral fills

Contained wrapper neutral fillsCheckbox, Radio, and Toggle contained wrappers now use border-strong (no accent tint). Checked background uses color-mix(textPrimary 6%, transparent) — neutral and adapts to any parent. Unchecked is transparent (outline only).

Contained hover removedHover state removed from contained wrappers — simplified to static border-strong. Removed unused hovered/setHovered state and mouse handlers.

Card selected state unifiedCard selected state now uses accent-subtle for all variants instead of per-variant color-mix into opaque backgrounds.

0.27.1

March 2026

Accent token revamp & color-mix architecture

5-token accent modelAccent layer reduced to 5 tokens derived from a single color: accentDefault, accentHover, accentSubtle, accentBorder, and accentFg. accentActive and focusRing have been removed; textOnAccent renamed to accentFg with hue-tinted output instead of pure black/white.

accentTokens() & getAccentFg() helpersNew standalone exported functions: accentTokens(color, theme?) derives all 5 accent tokens from a single hex input; getAccentFg(color) returns a hue-tinted foreground color for text/icons on accent surfaces.

Button variant updatesSecondary uses color-mix(accent 16%, transparent) fill; Outline and Ghost use textPrimary text. All disabled states use color-mix(textPrimary 6%, transparent) with no border. Press ring replaced by a single translucent accent halo. Hover shadows use color-mix(accent, transparent).

color-mix(transparent) architectureNeutral fills across SegmentedControl, Toggle, Slider, Progress, CodeBlock, Card, Table/DataTable, and disabled inputs now use color-mix(in srgb, textPrimary N%, transparent) instead of opaque surfaceSecondary. Adapts to any parent background and eliminates accent bleed.

PageLayout: surfaceSecondary chromeNew chromeBackground="surfaceSecondary" option for visible stage/chrome separation. Playground sidebars switched from bgSubtle to surfaceSecondary.

Collapsible padding increaseTrigger vertical padding bumped from space-3 to space-4. Content padding bumped from space-2/space-3 to space-3/space-4.

0.26.0

March 2026

Composition Patterns & Divider zero spacing

CompositionPattern typeNew manifest type describing how multiple components compose into real UIs. Fields include id, name, description, category, components, structure (ASCII tree), code (working JSX), variants, and designNotes.

7 composition patternsReady-to-use patterns showing how lucent-ui components combine into production UIs.

—Profile Card — avatar, display-font name, bio, borderless clickable chips, stat row (2xl display), action buttons. Compact collapsible variant on filled Card.

—Settings Panel — toggle rows with descriptions, select dropdown, action footer. Drill-down variant with NavMenu sidebar.

—Stats Row — individual stat cards with trend chips and comparison text. Revenue variant with avatar headers.

—Action Bar — page header (breadcrumb + 3xl display title + divider) and card header (uppercase label + md title, tight letter-spacing).

—Form Layout — stacked form with section grouping, side-by-side fields, dividers, and submit/cancel footer.

—Empty State Card — icon illustration + heading + description + CTA in three variants (no results, getting started, error).

—Collapsible Card — all card variants with auto-bleed Collapsible, plus combo two-tone layout.

New MCP tool: get_composition_patternQuery patterns by name/id, by category, or list all. Returns full pattern with structure tree, working code, variants, and design notes.

search_components extendedNow returns both components and patterns in search results.

Patterns nav groupNew "Patterns" section in the sidebar with Cards and Layouts sub-groups, each pattern rendered as a live interactive demo.

Divider: zero default spacingDivider spacing default changed from var(--lucent-space-4) to 0. Dividers inside gap-based layouts (Stack, Row) no longer double up spacing. Pass spacing explicitly for standalone use outside flex containers.

0.25.1

March 2026

Collapsible + Card composition fix

Collapsible auto-bleed inside CardCollapsible consumes CardPaddingContext and applies negative margins to cancel the Card body's padding. Just wrap and it works — no padding="none" needed.

Card & Collapsible overflowCards without media default to overflow: visible so nested shadows aren't clipped. Collapsible uses overflow: hidden only during animation and switches to visible once expanded.

0.25.0

March 2026

Collapsible polish, Card hoverable & CollapsibleCard pattern

CollapsibleSmooth 180ms height animation via direct DOM measurement, CSS-driven hover feedback, focus-visible ring, and two new props.

—disabled — reduces opacity to 0.5, prevents toggling.

—padded — when false, removes content padding for composed layouts.

CardNew hoverable prop, larger default radius, and inset status accent.

—hoverable — hover lift + neutral glow without making the card a button or link.

—Default radius bumped from md to lg. Status bar rendered as inset box-shadow that curves with border-radius.

CollapsibleCard patternComposition pattern showing all five card variants with Collapsible inside. Combo variant gives a two-tone layout via pure composition.

0.24.0

March 2026

New Molecule: NavMenu

NavMenuHierarchical navigation for sidebar and top-bar layouts with a DOM-driven sliding highlight pill.

—Compound API: NavMenu.Item, NavMenu.Group, NavMenu.Sub, NavMenu.Separator.

—Three highlight states: child active, collapsed-with-active-child (tinted), self-active parent. CSS hover with translucent tint.

—Inverse mode with surface background and accent right-border. Three sizes (sm/md/lg), collapsible groups, horizontal dropdown with viewport collision.

0.23.0

March 2026

New Atoms: SplitButton & ButtonGroup

SplitButtonCompound button pairing a primary action with a chevron dropdown for secondary actions. All 7 variants, all 5 sizes, composes the Menu molecule for keyboard navigation and portal rendering.

ButtonGroupLayout wrapper that visually groups buttons with a token-based gap and flattened inner corner radius.

Button enhancementsWider horizontal padding across all sizes. Icon-only buttons auto-size to squares. Outline variants use transparent backgrounds for container-agnostic use.

0.22.0

March 2026

Chip: Pulse, Ghost & Dot-only Mode

Chip pulsePulsing ring animation on the status dot for live/in-progress states (deploying, syncing, live incident).

—pulse prop — only applies when dot is true.

—Uses injected @keyframes lucent-chip-pulse following the existing pattern.

Chip ghostTransparent background with text color only, no border. Ideal for inline status indicators in tables and lists.

—ghost prop — subtle 8% tint on hover when interactive.

Chip dot-only modeOmit children with dot to render a compact circular indicator (no padding, border-radius: 50%).

—Works with pulse for a minimal pulsing dot.

—children is now optional on Chip.

ManifestUpdated with status-first design intent and reorganized usage examples.

0.21.0

March 2026

New Atom: Progress Bar

ProgressHorizontal bar for completion, usage, or health metrics.

—Props: value, max (default 100), variant (accent/success/warning/danger), size (sm/md/lg), label (true for percentage, or custom ReactNode).

—Threshold auto-variant — warnAt and dangerAt props auto-switch color based on the current value. Ascending thresholds (warnAt < dangerAt) suit "high is bad" metrics (CPU, disk); descending (warnAt > dangerAt) suit "low is bad" metrics (battery, health).

—Accessible role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax.

—Smooth CSS transitions on value and variant changes.

PlaygroundProgress and Slider added to the component playground for side-by-side comparison with prop knobs.

Density previewWidened compact/comfortable multipliers (65%/140%) so density changes are actually visible.

0.20.0

March 2026

New Atoms: Stack & Row Layout Primitives

StackVertical flex container with gap spacing tokens.

—Default: gap="4", align="stretch".

—Gap values reference var(--lucent-space-{n}) tokens, so density presets scale layout automatically.

RowHorizontal flex container with the same API as Stack.

—Default: gap="3", align="center" — tuned for horizontal layouts like label/action pairs and button groups.

—Gap values reference spacing tokens, so density presets scale layout automatically.

Dev helpers refactoredInternal Section and Row dev helpers refactored to use the new primitives.

0.19.1

March 2026

Overlay Polish

Frosted glass overlaysAll overlay components (CommandPalette, Menu, MultiSelect, DatePicker, DateRangePicker, SearchInput, ColorPicker) now use a frosted glass backdrop: 85% opacity surface-overlay with backdrop-filter: blur(6px).

Accent glowOverlay borders are tinted with 15% accent-default via color-mix, and a soft 24px accent glow shadow adapts automatically to any palette preset.

Portal dropdownsMultiSelect, DatePicker, DateRangePicker, and SearchInput dropdowns now render via createPortal with position: fixed, so they escape Card overflow: hidden.

CommandPaletteArrow-key navigation and UI polish.

—Fixed keyboard navigation cycling through items; added wrapping at top/bottom (#91).

—Active highlight now uses accent-tinted background visible in both light and dark mode.

—Rounded inset item highlights, Button xs keycaps in footer and search bar, frosted glass panel with blurred backdrop.

DatePicker / DateRangePicker size scalingCalendar content (cell height, font size, nav buttons, padding, minWidth) now scales with the size prop (sm/md/lg).

DatePicker dark mode hoverDay hover uses color-mix(accent-default 20%, surface-secondary) for visibility in dark mode.

SearchInputFixed duplicate clear button (native type="search" X), aligned dropdown text/spacing/rounding with Menu pattern, text size now matches input size.

0.19.0

March 2026

Toast molecule — imperative notifications

ToastNew molecule for ephemeral notifications via ToastProvider + useToast hook. Imperative API — call toast() from anywhere, get a dismissible id back.

—Five variants (default, success, warning, danger, info) with semantic border colors and built-in 16×16 SVG icons (same set as Alert).

—Multi-line text with semibold title + optional secondary description (supports \n via white-space: pre-line).

—Inline action buttons in two styles: bordered pill (Sonner-style "Undo") or underlined link. Clicking fires the callback and auto-dismisses.

—Cascading card stack — multiple toasts stack as empty card shells with progressive scaleX reduction and opacity fade. Up to 3 shells visible. Hover to expand fans out all toasts with content fading in and heights animating.

—Six positions (top-left, top-center, top-right, bottom-left, bottom-center, bottom-right). Anchored edge pinned at fixed distance from screen edge. Enter/exit slide animations with opacity fade and scale-up.

—Auto-dismiss configurable per-provider (default 5s) and per-toast — pass Infinity to disable. Portal rendering via createPortal.

—Accessible: role="status" + aria-live="polite" on each toast, aria-hidden on stacked shells, aria-label="Dismiss" on close button.

0.18.0

March 2026

Menu molecule & MultiSelect font scaling

MenuNew compound-component dropdown menu with portal rendering, 8-direction placement, and full WAI-ARIA keyboard navigation.

—Compound API — Menu, MenuItem, MenuSeparator, and MenuGroup compose as JSX children.

—Portal rendering via createPortal escapes overflow: hidden ancestors. 8-direction placement with automatic viewport-edge flipping.

—Full WAI-ARIA Menu Button keyboard navigation (arrow keys, Enter/Space, Escape, Home/End). Outside-click and scroll dismissal.

—Scale + fade entrance/exit animations over 120ms.

—Selected state with trailing accent-colored checkmark. Danger items with danger-colored text and icon. Shortcut hints via shortcut prop. Disabled state.

—Three size variants (sm | md | lg) flow from the root Menu through context, with font sizes aligned to Button.

MultiSelect dropdown font scalingDropdown item text now scales with the size prop instead of being hardcoded to font-size-sm.

—sm → font-size-sm, md → font-size-md, lg → font-size-lg.

—Placeholder/input font for lg corrected from font-size-md to font-size-lg.

—"No options" and "Max N selected" text scale proportionally.

0.17.0

March 2026

Button ultra-dense size & danger compound variants

ButtonNew 2xs size and two danger compound variants.

—size="2xs" — 22px height with space-1 padding and radius-md for dashboard toolbars, table-inline actions, and icon triggers where xs (26px) is still too tall.

—danger-outline — red border + red text on surface background for destructive actions that need visual weight without a filled background.

—danger-ghost — red text on transparent background, no border for low-emphasis destructive actions in list rows or dense UIs.

0.16.0

March 2026

Chrome theming, unified customizer & inverse NavLink

PageLayout chrome themingNew chromeBackground prop to visually distinguish chrome regions from the main content area.

—Accepts "bgBase" | "bgSubtle" | "surface" for header, sidebar, and footer backgrounds.

—Outer wrapper background matches the chrome token, eliminating white gaps behind rounded content cards.

—Hidden scrollbars on all scrollable regions.

Unified Design CustomizerThe dev preview's right sidebar rebuilt into a single unified customizer.

—Quick-start presets (Modern / Enterprise / Playful), 12-palette picker.

—Anchor color pickers with live derived-variant dots. Accent cascading auto-derives bgBase and borderDefault.

—Layout sliders for radius, elevation, font scale, and spacing scale — all using Lucent UI components.

NavLink inverse propNew inverse prop for sidebar navigation on tinted chrome.

—Uses surface background with textPrimary instead of accent for the active state.

—Active inverse links render with border-default border, shadow-md elevation, and a 3px accent-colored right border indicator.

ColorPicker size & inlineNew size and inline props for compact color picker layouts.

—size prop ("sm" | "md") — sm renders a compact 24px swatch trigger.

—inline prop places the label beside the swatch.

—Popover now renders via createPortal to document.body, escaping overflow: hidden ancestors.

SegmentedControl improvementsElevation-aware indicator with improved positioning and keyboard focus.

—shadow-sm from the active shadow preset. Accurate positioning via getBoundingClientRect with ResizeObserver.

—Zero-padding track with 3px inset indicator.

—Focus ring only appears on keyboard navigation (:focus-visible), not mouse clicks.

CSS variable fix--lucent-bg-base was incorrectly referenced as --lucent-bgBase (camelCase). Now uses the correct kebab-case form.

0.15.0

March 2026

Card elevation hierarchy & interactive props

CardFive elevation variants, interactive props, status accents, and a media slot.

—Five variant levels: ghost (transparent, no border), outline (default), filled (surfaceTint background), elevated (surface + border + shadow), combo (filled wrapper with elevated body inset).

—onClick renders as <button> with hover lift, focus ring, and active press. href renders as <a> with the same interactive states. disabled reduces opacity and blocks interaction.

—status prop (success | warning | danger | info) adds a 3px colored bar on the left edge.

—selected prop adds an outer accent-subtle ring and subtle background tint with aria-pressed.

—media prop renders full-bleed content at the top of the card (before header) with no padding.

Token: surfaceTintNew hue-matched shade of bgBase used by filled and combo card variants.

—Derived automatically when bgBase is customized.

—surface is now auto-derived from bgBase and optional in ThemeAnchors.

Shadow presets updatedSubtle preset uses soft dual-layer shadows at ~60% opacity. Elevated preset uses wider blur radii (up to 32px) for more pronounced depth.

0.14.2

March 2026

Neutral text & control track colors

Neutral text colorsText colors now stay neutral gray regardless of accent palette.

—Removed textPrimary from all palette presets (#111827 light / #f3f4f6 dark).

—textPrimary is now optional in ThemeAnchors, falling through to the base theme default when omitted.

controlTrack tokenNew neutral gray background token for inactive control surfaces.

—Light: #d1d5db, dark: derived from bgBase. Decoupled from borderDefault so it isn't affected by accent-tinted palette borders.

—Toggle off-state track now uses controlTrack instead of borderStrong.

—Slider unfilled and disabled tracks use controlTrack instead of borderDefault (WebKit and Firefox).

0.14.0

March 2026

Form field consistency & picker labels

Form field consistencyTextarea and Select sizing aligned with Input.

—Textarea label font size is now size-aware (sm/md use font-size-sm, lg uses font-size-md). Horizontal padding aligned with Input.

—Select lg value font size corrected from font-size-lg to font-size-md to match Input.

DatePicker / DateRangePickerAdded label, helperText, and errorText props with full sizing consistency.

—Fixed box-sizing from content-box to border-box so width no longer grows with padding.

—Horizontal padding and icon-to-text gap are now size-aware, matching Input/Select.

—Focus ring updated to border + boxShadow pattern matching Input/Select. Manifests updated with new props and aria-invalid.

Chip accent variantThe accent variant now uses a solid accent background with auto-derived text-on-accent color for better visual weight and contrast.

PlaygroundDatePicker and DateRangePicker entries now include label, helperText, and errorText controls.

0.13.0

March 2026

Chip component, contained controls & token-based spacing

ChipNew unified label primitive replacing Tag and Badge for filters, tags, statuses, and categories.

—onDismiss for removable chips, onClick for clickable/selectable chips.

—swatch for color-coded categories, dot for status indicators, leftIcon for leading elements.

—borderless for a softer filled-only appearance. Three sizes (sm/md/lg) with six semantic variants.

—Heights scale with spacing tokens. Tag and Badge kept for backward compatibility.

Contained Checkbox, Radio & ToggleNew contained prop wraps controls in a bordered container with accent highlighting when checked.

—Designed for plan selection cards, feature toggles, and consent items.

—helperText prop for secondary context below the label — label auto-upgrades to medium weight.

—Checkbox and Radio gain an lg size (20px). Toggle adds an align prop (left | right).

Token-based heightsAll form control heights use dampened vertical scaling — height scales at 50% rate while horizontal padding scales fully.

—calc(space-token × 0.5 + fixed) applied to Input, Select, Button, DatePicker, DateRangePicker, MultiSelect, Chip, and contained controls.

—Playground adds spacing, font size, and roundness sliders to visualise scaling in real time.

MultiSelect enhancementsLabel, helperText, errorText props and improved dropdown scaling.

—Focus ring now matches Input (boxShadow instead of outline).

—Dropdown padding follows a size × density matrix. Checkboxes match the MultiSelect's size.

—Selected values render as Chips instead of Tags.

SearchInput & TextareaLabel, helperText, and errorText passthrough plus size-aware scaling.

—SearchInput search icon scales with size (14/18/20px).

—Textarea gains a size prop (sm/md/lg) with size-aware font and padding.

—Label and helper text font sizes now scale with component size across Input, Select, and MultiSelect.

Input focus fixFixed focus ring not appearing on SearchInput — {...rest} was spread after onFocus/onBlur handlers, overwriting them.

0.12.0

March 2026

xs button, component filter & picker alignment

Button xs sizeNew xs size (26px height, font-size-xs) for compact UIs like customizer panels and toolbars.

Component filterComponentPreview gains a search bar to filter sections by component name with a count of visible components.

MultiSelect, DatePicker & Tag alignmentSize prop and height/font alignment across picker components.

—MultiSelect adds a size prop (sm/md/lg) with heights, font sizes, and border radius matching Input. Tags inside use the Tag atom with size-matched variants.

—DatePicker and DateRangePicker gain a size prop with full-width triggers and content-box sizing. DateRangePicker highlights the range in real time.

—Tag adds an lg size (28px), hover animation on dismissible tags, and respects the roundness setting.

Manifest updatesButton: outline variant, xs size, chevron/spread props, swatch example. Tag: lg size. MultiSelect, DatePicker, DateRangePicker: size prop.

0.11.0

March 2026

Button overhaul, APCA contrast & new palettes

Component consistencySelect, Textarea, SearchInput, and Button sizing aligned across atoms.

—Select refactored to wrapper-div architecture matching Input (fixes height mismatch). Proper disabled states.

—Textarea border radius aligned to radius-lg with hover border and smooth focus-ring transitions.

—SearchInput gains a size prop (sm/md/lg) passthrough to Input.

—Button heights aligned to match Input/Select at every size.

Button overhaulNew outline variant, interactive animations, and theme-aware states.

—outline variant (bordered button); secondary is now a filled surface button.

—Hover animation with translateY(-1px) lift + accent-derived glow. Press state with translateY(1px) + accent ring.

—Theme-aware disabled state via color-mix (no accent tinting). Variant-aware focus ring.

—Primary border removed for a cleaner look.

APCA contrast algorithmReplaced WCAG 2.1 luminance with APCA for accessible text contrast — correctly handles saturated blues/purples.

—ensureContrast() nudges accent lightness until APCA Lc ≥ 60.

—LucentProvider auto-adjusts accentDefault so no accent color ever produces unreadable button text.

—New exports: apcaContrast, ensureContrast, getContrastRatio.

6 new palette presetsTrendy: violet, coral, teal, amber. Muted: slate, sage. Total palette count now 12.

0.10.0

March 2026

Design Presets & CLI

Design PresetsCurated presets for an instantly polished UI with zero manual configuration.

—3 combined presets (modern, enterprise, playful) and 4 mixable dimensions: palette (6), shape (3), density (3), shadow (3).

—Full-atmosphere palettes tint bg, surface, and border colors toward the accent hue.

—Works with both light and dark themes automatically.

npx lucent-ui initInteractive CLI that walks you through preset selection and writes a lucent.config.ts + provider snippet.

MCP preset toolsTwo new MCP tools: list_presets discovers all available presets and dimensions, get_preset_config generates ready-to-use provider config.

0.9.2

March 2026

CardBleed & Tabs overflow

CardBleedA companion to Card that lets specific children stretch edge-to-edge, cancelling the card's horizontal padding. Text inside stays aligned with the rest of the card content. Useful for full-width dividers, bordered sections, and settings-style lists.

Tabs — overflow menuWhen tabs are rendered in a constrained-width container, items that don't fit are automatically collected into a "more" overflow menu. No configuration needed — the component measures available space and adapts.

0.9.1

March 2026

Patch Changes

ColorPickerFix popover opening off-viewport when the trigger is near the right edge of the screen (now right-aligns automatically).

CardIncrease default padding sizes by ~1.5× (sm: space-3→4, md: space-4→6, lg: space-6→8).

0.9.0

March 2026

New components & Input enhancements

ColorPickerFully-featured color selection popover.

—Spectrum panel, hue/alpha sliders, four input formats (Hex, RGB, HSL, HSB).

—Eyedropper support and multi-group preset palettes switchable via dropdown.

ColorSwatchStandalone color swatch atom with circle or square shape, six sizes (xs–2xl), selected state, and checkerboard background for transparent colors.

SegmentedControlPill-style toggle group with a smooth sliding selection indicator. Fills its container by default.

Input — prefix, suffix, sizesInput now accepts prefix and suffix addons flush inside the field border, plus a size prop (sm / md / lg) for height and font control.

Select — style prop consistencyThe style prop on Select now applies to the outer wrapper div, matching Input behavior.

Breaking: ColorPicker presets APIpresets and presetsLabel props replaced by presetGroups: ColorPresetGroup[]. Single group hides the switcher, multiple groups show a dropdown.

0.8.0

March 2026

Token derivation system

createTheme()Generate a complete light/dark token set from a single accent hex — all surface, border, text, and semantic colors derived automatically.

ThemeAnchorsLower-level API for building custom themes with explicit control over the derivation inputs.

LucentProviderManifestMachine-readable manifest for the provider itself, so AI agents understand theming configuration.

Token rename: surfaceDefault → surfaceAdded surfaceSecondary, removed bgMuted. Affects custom token overrides — see the migration guide.

0.7.0

New atoms: Slider, CodeBlock, Table

SliderRange input with token-driven track and thumb styling.

CodeBlockSyntax-highlighted code display with tab support, a prompt variant for terminal-style output, and optional helperText.

TableStructural table primitive (Table, Table.Head, Table.Body, Table.Row, Table.Cell) for building data-dense layouts.

0.6.0

DataTable filtering

Per-column filteringSearchable multi-select filtering via filterable: true on column definitions. Filter dropdowns are searchable, multi-select, and reset pagination automatically. onFilterChange callback exposes the current filter state.

0.5.0

Theme customizer: border colors

Border color pickerBorder color picker in the theme customizer with theme-aware derivation.

Exported helpersgetThemeComplementBorderColor and deriveBorderVariants exported for use in custom token pipelines.

0.4.0 — 0.4.2

Molecules Wave 2 + COMPONENT_MANIFEST spec v1.0

New moleculesDataTable, CommandPalette, MultiSelect, DatePicker, DateRangePicker, FileUpload, Timeline. All ship with specVersion: "1.0" manifests — the stable manifest format AI tools can rely on.

PageLayout extendedAdded rightSidebar and footer slots.

Missing manifests backfilledNavLink, Breadcrumb, Tabs, Collapsible.

0.3.0

lucent-manifest CLI

npx lucent-manifest initFetch your Figma Variables and generate a lucent.manifest.json token override file with --figma-token and --file-key flags, or use --template for a pre-filled JSON template for manual editing.

0.2.0

Navigation & layout components

New componentsBreadcrumb, Tabs, Collapsible, NavLink, PageLayout.

0.1.0

Initial release — 15 components

AtomsButton, Badge, Avatar, Input, Textarea, Checkbox, Radio / RadioGroup, Toggle, Select, Tag, Tooltip, Icon, Text, Spinner, Divider.

MoleculesFormField, SearchInput, Card, Alert, EmptyState, Skeleton.

LLM-ready from day oneEvery component ships with a COMPONENT_MANIFEST and is accessible via the MCP server (lucent-mcp).