●Change8

ui@0.4.0

Breaking Changes
📦 remixView on GitHub →
⚠ 4 breaking✨ 8 features🐛 3 fixes🔧 13 symbols

Summary

This release introduces new styling mixins for native form elements (button, checkbox, input, radio) and adds full support for Tabs and Toggle components. Several subpath exports and internal helper functions have been removed, constituting breaking changes for consumers relying on them.

⚠️ Breaking Changes

  • The styled button component API was replaced. Users must now use the default `button()` mixin exported from `@remix-run/ui/button` directly on button-like hosts instead of importing `Button` or composing previous slot style exports.
  • Removed the `@remix-run/ui/components/*` subpath exports. Component modules must now be imported directly from `@remix-run/ui/*`.
  • Removed root helper exports that were only intended for first-party component internals: `flashAttribute`, `hiddenTypeahead`, `matchNextItemBySearchText`, `onKeyDown`, `SearchValue`, `wait`, and `waitForCssTransition`.
  • Removed the `@remix-run/ui/scroll-lock` subpath export, as scroll locking is now an internal popover implementation detail.

Migration Steps

  1. Replace usage of the old styled button component API with the new `button()` mixin from `@remix-run/ui/button`:
  2. If you were importing from `@remix-run/ui/components/*`, update imports to use `@remix-run/ui/*` instead.
  3. Remove usage of removed root helper exports: `flashAttribute`, `hiddenTypeahead`, `matchNextItemBySearchText`, `onKeyDown`, `SearchValue`, `wait`, and `waitForCssTransition`.
  4. Remove imports from `@remix-run/ui/scroll-lock`.

✨ New Features

  • Added a default `button()` mixin exported from `@remix-run/ui/button` for styling buttons.
  • Added a default `checkbox()` mixin exported from `@remix-run/ui/checkbox` for styling native checkbox inputs, supporting optional visual `state` for app-owned states.
  • Added top-level component exports for headless primitives and styled components. Primitive-only modules import directly from their component path, while styled wrappers expose lower-level behavior under `/primitives` (e.g., `@remix-run/ui/select/primitives`).
  • Added a default `input()` mixin exported from `@remix-run/ui/input`, plus `input.root()` and `input.field()` for icon-capable input layouts.
  • Added a default `radio()` mixin exported from `@remix-run/ui/radio` for styling native radio inputs.
  • Added styled component subpath exports under `@remix-run/ui/*` for accordion, breadcrumbs, checkbox, combobox, menu, and select.
  • Added `tabs` and `tabs/primitives` exports for controlled and uncontrolled tab groups featuring toggle-slider active tabs, keyboard activation, and bubbling tab change events.
  • Added `toggle()` styles and `toggle/primitives` for boolean switch controls with medium and large sizes.

🐛 Bug Fixes

  • Forwarded the frame's name as the resolve target when a named `<Frame>` is resolved on the client, ensuring correct content is served when frames branch on the target.
  • Fixed hydration for multiple `clientEntry` components in the same module.
  • A Fragment-nested `<Frame>` now adopts its streamed hydration marker at `clientEntry` boundaries instead of taking the fresh-insert path, preventing re-fetching of `src`.

Affected Symbols

button() mixin (@remix-run/ui/button)checkbox() mixin (@remix-run/ui/checkbox)input() mixin (@remix-run/ui/input)radio() mixin (@remix-run/ui/radio)tabs exports (@remix-run/ui/tabs)toggle() styles (@remix-run/ui/toggle)<Frame>clientEntryaccordion exportsbreadcrumbs exportscombobox exportsmenu exportsselect exports