Changelog | design-system-ui

Use this page to publish notable registry updates, new items, breaking changes, and migration notes.

v1.5.5: September 20, 2026

Docs: Pointed the @design-system-ui registry URL on Installation and Styles at https://reactdocs.canceydejean.dev/r/{name}.json.

Docs: Replaced leftover _cn template copy on Agents with the Markdown and llms.txt routes coding tools actually need.
Docs: Updated the Bun install command on Installation and Styles to bunx shadcn add "@design-system-ui/...", which works in new Bun projects.
Theming: Documented how consumer apps apply brand accents after installing Styles: ship data-theme palettes from globals.css, add a custom [data-theme] CSS file, or keep one component set with a palette file per brand for multi-brand teams. See Theming.
Styles: The styles item now publishes theme-secondary.css and theme-tertiary.css so the accent imports in globals.css resolve after install.

Added useBodyOverflow, a hook that locks page scroll by toggling overflow-hidden on document.body.
Added useCloseMobileMenuOnResize, a hook that dismisses mobile menus and overlays when the viewport is resized.

Announcement Bar: Moved the block from registry/items/blocks/hero/announcement-bar/ to registry/items/blocks/announcement-bar/ as a standalone block item. Install targets now publish under components/ui/announcement-bar/ and declare container as a local registry dependency.

Logos: The Instagram logo now renders the full-color gradient brand mark instead of the flat black glyph. It sizes from its viewBox rather than fixed width/height, so it scales with the Logo size variants.

Component variants: Components that use class-variance-authority now keep every cva() call in a colocated <name>.variants.ts file (.ts, not .tsx). The component file imports the helper; it does not define CVA inline.
Extracted variants: Moved CVA out of component source for Alert, Attachment, Badge, Bubble, Button Group, Empty, Field, Input Group, Item, Marker, Navigation Menu, Sidebar, Tabs, and Toggle. Toggle Group now imports toggleVariants from toggle.variants.ts.
Container: Renamed container.variants.tsx / container.types.tsx to .ts so the file extension matches the variants convention.
Docs: Documented the Component Variants pattern on the Registry authoring page, with pointers from Agents docs, AGENTS.md, and the shadcn-registry skill so maintainers and coding agents follow the same layout as button.variants.ts.

Install paths: Multi-file components now publish nested folder structure instead of flattening basename-only into ui/. Nested packages such as Icons and Logos install under components/icons/** and components/logos/** (including icon/, icon-set/, logo/, and logo-set/).
Published package imports: Same-item relative imports are preserved in installed source so multi-file packages keep working after shadcn add (for example ./icon.variants, ./logo-set/apple, ../index).
Icons / Logos: Added explicit install targets for every published file; removed unused icon-set/types.ts and logo-set/types.ts stubs.
Data Table: Sample payments.tsx (columns + fixture data) is now a published registry file, not story-only source.
Targets & docs: Install targets and usage examples updated across registry items (including Accordion, Button, Hero, and many component _registry.mdx pages) so install paths match consumers’ components.json aliases.
Previews: Component registry preview exports and docs samples tightened for catalog rendering.

Documented how to register @design-system-ui in components.json on the Installation and Styles pages, so new projects can resolve namespaced install commands.
Added Container, a centered content wrapper with max-width size variants.
Published registry metadata and preview files for Container so it is discoverable in the registry catalog and docs.
Added Icons, a typed icon component with size variants and a searchable gallery for browsing and copying icons.
Published registry metadata and preview files for Icons so it is discoverable in the registry catalog and docs.
Added Logos, brand logo SVGs with a searchable gallery for browsing and copying.
Published registry metadata and preview files for Logos so it is discoverable in the registry catalog and docs.

Added a new Heading preview component to demonstrate sizing in the docs.
Updated Heading styles to use CSS variables for size and tone, improving theme consistency.
Improved Heading component compatibility and docs examples/stories.
Added centralized theme style imports and refined global selection styling.
Added Link Text, a polymorphic text-link component with tone, underline, size, and external-link options.
Added Link Spread, an absolute-positioned anchor helper for making full card surfaces clickable.
Published registry metadata and preview files for both link components so they are discoverable in the registry catalog and docs.
Added Section, a semantic wrapper component with responsive vertical padding variants.
Published registry metadata and preview files for Section so it is discoverable in the registry catalog and docs.
Added a reusable DemoSection for Storybook and aligned the Section story to render that shared demo.
Added Spinner, an accessible loading indicator built on Lucide's Loader2 icon.
Published registry metadata and preview files for Spinner so it is discoverable in the registry catalog and docs.
Added Text, a polymorphic body-text component with size, weight, tone, and alignment controls.
Published registry metadata and preview files for Text so it is discoverable in the registry catalog and docs.
Published Hero as a registry block, including metadata and preview files so it is discoverable in the registry catalog and docs.

Updated Button variants and sizes to use CSS variables for colors and typography, improving theme support (including dark mode on the primary variant).
Simplified default icon (svg) sizing inside buttons.
Breaking: Removed the link variant. Use an as="a" button (or a link styled separately) instead.
Breaking: Removed the icon-xs size. Use icon-sm, icon-md, or icon-lg.
Breaking: Resized icon buttons — icon-md is now size-9 (was size-10) and icon-lg is now size-10 (was size-12).