From 0efae7b4751b0e4aae188a9dd602fe795839d954 Mon Sep 17 00:00:00 2001 From: ankit-thesys Date: Thu, 28 May 2026 17:02:18 +0530 Subject: [PATCH 1/6] feat(react-ui): declare browserslist floor for cascade-layers support CSS @layer rules require Chrome 99+ / Firefox 97+ / Safari 15.4+ / Edge 99+. Declaring the floor before the cascade-layer wrap lands so consumers and tooling can detect incompatible target browsers. Co-Authored-By: Claude Opus 4.7 (1M context) --- packages/react-ui/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index d381a04fb..7014497d5 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -193,6 +193,7 @@ "bugs": { "url": "https://github.com/thesysdev/openui/issues" }, + "browserslist": "defaults and supports css-cascade-layers", "eslintConfig": { "extends": [ "plugin:storybook/recommended" From f14358e82b3d5dd4328d666914669633fb62162b Mon Sep 17 00:00:00 2001 From: ankit-thesys Date: Thu, 28 May 2026 18:18:24 +0530 Subject: [PATCH 2/6] docs(react-ui): document @layer openui contract in readme Add a Styling Integration section to the package README covering the cascade-layer contract: consumer CSS overrides OpenUI components without specificity matching, with a Tailwind v4 layer-order example, a note that Tailwind v3 / CSS Modules / CSS-in-JS work zero-config, and the browser support floor declared via browserslist. Co-Authored-By: Claude Opus 4.7 (1M context) --- packages/react-ui/README.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/packages/react-ui/README.md b/packages/react-ui/README.md index 460cfef42..2f3044661 100644 --- a/packages/react-ui/README.md +++ b/packages/react-ui/README.md @@ -139,6 +139,37 @@ function App() { | `defaultDarkTheme` | Built-in dark theme | | `swatchTokens` | Token palette for use in theme builders | +## Styling integration + +OpenUI's component styles live inside a CSS cascade layer named `openui`. Any unlayered consumer CSS overrides OpenUI without `!important` or specificity matching: + +```css +@import "@openuidev/react-ui/components.css"; + +/* Wins, no specificity tricks needed */ +.openui-button-base-primary { background: hotpink; } +``` + +### With Tailwind v4 + +Declare layer order at the top of your entry stylesheet so `openui` sits above Tailwind's reset but below `components` and `utilities`: + +```css +@layer theme, base, openui, components, utilities; +@import "@openuidev/react-ui/components.css"; +@import "tailwindcss"; +``` + +This places Tailwind's Preflight (in `base`) below OpenUI components so its element resets don't override them, while keeping utilities (`bg-red-500`, etc.) winning over OpenUI styles. + +### With Tailwind v3, CSS Modules, or CSS-in-JS + +No configuration needed — these all emit unlayered CSS, which automatically beats anything in `@layer openui`. + +### Browser support + +CSS cascade layers require Chrome 99+, Firefox 97+, Safari 15.4+, or Edge 99+ (all baseline from March 2022). On older browsers, the `@layer { ... }` block is dropped entirely and components render unstyled. The package declares this floor via the `browserslist` field in its `package.json`. + ## Components All components are available as individual imports: From 93707abddbe0217160c46226e1082f99e2824cf6 Mon Sep 17 00:00:00 2001 From: ankit-thesys Date: Fri, 29 May 2026 05:12:32 +0530 Subject: [PATCH 3/6] docs(react-ui): note ThemeProvider runtime injection is intentionally unlayered Add a two-line comment above the useInsertionEffect that writes