Theme changelog

Minor Changes

• dc6aaa7: feat(build): publish per-component Clarity style sources

  Each component's Clarity styles now ship in the package and can be imported from @radui/ui/styles/clarity/<Component>/<file>.clarity.scss. For example, @radui/ui/styles/clarity/Button/button.clarity.scss.

  • The folder structure matches the source, so relative @use imports between components still resolve when you compile a single file with Sass.
  • @radui/ui/themes/default.css is unchanged and remains the recommended way to load the full Clarity theme.
  • The docs site uses these files to show the exact styles that ship in each released version.

• 0bcb1ef: feat(theme): default Theme appearance to dark

  <Theme> now renders data-rad-ui-theme="dark" when no appearance is passed. Previously it defaulted to 'system' and followed the OS color scheme.

  To keep the old behavior, pass it explicitly:

  <Theme appearance="system">...</Theme>

  appearance="light" and appearance="dark" are unchanged.

Major Changes

• 56ab619: Tailwind CSS v4 support. Tailwind v3 is no longer supported.

  The Tailwind preset is now a CSS file instead of a JavaScript config object. Import it after Tailwind itself:

  @import "tailwindcss";
  @import "@radui/ui/themes/tailwind-presets/default.css";

  Breaking changes:

  • The @radui/ui/themes/tailwind-presets/default.js export has been removed. Upgrade Tailwind to v4 before upgrading Rad UI.

  • The preset covers colours only, as before. Spacing, radius, shadow, blur and typography keep Tailwind's own defaults.

  • The colour ramp no longer contains <alpha-value>. Opacity modifiers keep working (bg-gray-500/90), so nothing needs replacing.

  • Tailwind v4 dropped its default border colour, so bare border now inherits currentColor instead of gray-200. To restore the old default, add this to your base layer:

    @layer base {
      *,
      ::after,
      ::before,
      ::backdrop,
      ::file-selector-button {
        border-color: oklch(from var(--rad-ui-color-gray-200) l c h);
      }
    }

  • var(--color-gray-500) no longer resolves. Read var(--rad-ui-color-gray-500) instead, which is what v3 emitted anyway.

  Applying v4's utility renames to your own markup: shadow-sm → shadow-xs, shadow → shadow-sm, blur-sm → blur-xs, blur → blur-sm, backdrop-blur-sm → backdrop-blur-xs, backdrop-blur → backdrop-blur-sm, outline-none → outline-hidden, bg-gradient-to-* → bg-linear-to-*, and bare ring → ring-3. Running npx @tailwindcss/upgrade handles most of this automatically.

Minor Changes

• 56ab619: Release TextField and add theme styles for Fieldset.

  • TextField is now published. Previously it shipped with styles and tests but was missing from the export list, so @radui/ui/TextField did not resolve.
  • Fieldset now renders with Rad UI styling in both themes instead of the browser default, and its invalid and disabled props have a visual effect.