Browsers & platforms
Yugen UI targets evergreen browsers and React 19 or later. The modern CSS features Tailwind CSS v4 relies on need no polyfills.
Browsers
The latest two versions of each evergreen browser. In practice the minimum versions are those of Tailwind CSS v4.
| Browser | Version | Status |
|---|---|---|
| Chrome, Edge (Chromium) | Latest 2 · minimum 111 | Supported |
| Firefox | Latest 2 · minimum 128 | Supported |
| Safari macOS & iOS / iPadOS | Latest 2 · minimum 16.4 | Supported |
| Chrome Android, Samsung Internet | Latest | Supported |
| Internet Explorer, Edge Legacy (EdgeHTML) | — | Not supported |
Need older browsers?Tailwind CSS v4 has no backward-compatible mode. In that case consider Tailwind 3 and move the token config to
tailwind.config.js yourself. This is outside what Yugen UI supports.CSS features used
All of them work in every browser in the table above. No polyfills or extra PostCSS plugins needed.
| Feature | Where it is used |
|---|---|
| CSS custom properties | All tokens: --colorNeutralForeground1, --spacingM, --brand-80… |
@layer | Tailwind v4 outputs CSS in cascade layers (theme, base, components, utilities), so utilities always win over base. |
@property | Tailwind v4 registers variables for transform, shadow and gradient so they animate smoothly. |
color-mix() | Opacity modifiers on token colors: bg-shell/85 (top bar), border-brand-stroke/30 (tint Badge). |
:has() | Disabled Input (has-[input:disabled]), Radio focus ring (has-[button:focus-visible]), disabled Switch. |
| Logical properties | ms-*, ps-*, start-*, border-s, rounded-s-*, text-start. The basis of RTL support. |
:focus-visible | The 2px focus ring shows only for keyboard use. |
:dir() / [dir] | The rtl: variant for flipping icons and transforms. |
| dvh unit | Dialog / Drawer / Toast height on mobile (max-h-dvh). |
clip-path: inset() | The 2px brand bar at the bottom of inputs. |
aspect-ratio | AspectRatio, Image. |
translate / scale / rotate | The individual transform properties Tailwind v4 generates. |
| prefers-reduced-motion, prefers-color-scheme | Turning off looping animations (motion-reduce:animate-none), picking the initial theme. |
oklch() | Not required: tokens use HEX values, and Tailwind's default (oklch) palette is turned off. |
React, TypeScript, Tailwind
| Technology | Version | Notes |
|---|---|---|
| React / React DOM | 19 or later (React 18 was supported until 0.14) | Takes ref as a prop, uses useId and useSyncExternalStore; Radix, cmdk and react-day-picker all support React 19. |
| TypeScript | 5.x | The source is written in strict mode; every prop type is exported with its component (ButtonProps, FieldProps…). |
| Tailwind CSS | 4.x | v4 is required: CSS-first config (@theme, @utility), syntax such as size-4! and max-h-(--var). |
| Bundler | Vite 6 or later · Next.js 14 / 15 · any bundler with PostCSS support | Components use no bundler-specific APIs; only the @/ alias is needed. |
| Radix UI | As in package.json | Each primitive is a separate package. Install only the ones you use. |
| Icons | Built in | The icons inside components ship with yugen-ui as small inline SVGs (Fluent System Icons), so no icon package is needed. For your own icons add @fluentui/react-icons, or any SVG icon set. |
Mouse, touch, keyboard
Every component works with all three input methods and with assistive technology.
| Input | Behavior |
|---|---|
| Mouse / pen | All states from hover to pressed. In Tailwind v4, hover: applies only on devices that can actually hover, so hover doesn't “stick” on touch screens. |
| Touch | Slider sets touch-none so dragging doesn't scroll the page; Toast can be swiped away; Drawer and Carousel work with touch gestures. Medium controls are 32px tall (≥ 24px per WCAG 2.5.8). Touch-first interfaces should use size="large" (40px). |
| Keyboard | Tab / Shift+Tab between controls, arrow keys inside groups (Tabs, Menu, RadioGroup, Toolbar, Tree, List…), Esc closes overlays. The full table is on the Accessibility overview page. |
| Screen readers | Test with NVDA + Firefox / Chrome, JAWS + Chrome, VoiceOver + Safari (macOS, iOS), TalkBack + Chrome (Android), Narrator + Edge. |
| Contrast mode (forced-colors) | Floating surfaces and buttons keep border-transparent instead of removing the border, so Windows High Contrast still draws an outline. Focus uses outline, so it always shows. |
| Zoom | Layouts use flex / grid and viewport-based max widths (calc(100vw - …)) so they reflow when zoomed in. |
Testing on each engine
Every PR runs E2E tests on Chromium. Firefox and WebKit run weekly and on release PRs into main.
Firefox and WebKit (desktop Safari, iPhone) run the tests for mouse dragging, Carousel, keyboard, the main docs flows and mobile layout. Accessibility checks (axe) run on Chromium only, since the results do not depend on the engine. Known differences:
| Engine | Difference | Impact |
|---|---|---|
| Safari / WebKit | A mouse click does not focus the button (the macOS default). | Component behavior is unchanged. Use the keyboard when testing focus. |
| Firefox, WebKit | Playwright cannot emulate touch dragging (Input.dispatchTouchEvent is Chromium only). | Sheet dragging and Carousel swiping are tested automatically on Chromium only; on iOS, test them by hand. |
| Firefox, WebKit | Pages cannot read the clipboard unless the user allows it. | The Copy button only writes (navigator.clipboard.writeText in the click handler), so it works on every engine. |