One UI system for every stack.

Developers

Readable utilities such as between, x-center and p-4@md, tokens that follow the theme, and apply() for any value with a unit. Core documentation

AI coding agents

A complete reference in plain text, and compile errors that name the valid options. Agent reference

Developers using agents

A wrong class or token stops the build with the fix named, so guessed CSS never reaches review. Compile-time errors

Agencies and freelancers

Brand and theme in one with() block, a palette generated from your colors, and the same markup in every stack. Setup guides

Founders and indie hackers

Ready-made components with live docs and HTML to copy, under the MIT license. Browse components

Product managers

One token system under classes, mixins and components, so every product looks like the same product. What WovenUI is

Tech leads and CTOs

Plain CSS out with no runtime in core, HTML components with a small optional script, test suites and an MIT license. WovenUI facts

Accessibility owners

Native dialogs, details, progress and form controls, shape markers so color is never the only signal, and high-contrast themes. Native HTML

47 of the 53 kit components need no JavaScript. Autocomplete, data table, tabs and toast need the small kit script; input and table use it optionally.

@use "../styles/woven" as *;

.card {
  @include apply(
    p(4), bg(surface), rounded(md),
    shadow(md) hover, p(6) md
  );
}

.card {
  padding: var(--wu-space-4);
  background-color: var(--wu-bg-surface);
  border-radius: var(--wu-radius-md);
}
.card:hover {
  box-shadow: var(--wu-shadow-md);
}
@media (min-width: 768px) {
  .card {
    padding: var(--wu-space-6);
  }
}

Component styles guide

@include apply(px(4), py(1.125));

Error: "py: 1.125 is not a configured key. Valid keys: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64. Write a unit for a custom value (1.125px, 1.125rem)."

@include apply(px(4), py(1.125rem));

@include apply(bg(primary) hover);

Error: "bg(primary): unknown color. Use a role (brand, success, danger, warning, info), a palette name (gray, red, blue, green, yellow, purple, pink), a theme word (base, surface, alternate, raised, hover, selected, disabled), a hex color, a CSS color name, ..."

@include apply(bg(brand) hover);

color: token(text-mutd);

Error: "token(text-mutd): unknown token. Close matches: text-muted."

color: token(text-muted);

Break it yourself

• /llms.txt
• /llms-full.txt
• /components/llms.txt
• /components/llms-full.txt

Output

Plain CSS from SCSS modules loaded with @use. Sass is the only build requirement. Prebuilt CSS needs no build at all.

Classes and mixins

Every utility is also a mixin for apply(), with states and breakpoints. Utility classes are opt-in; the mixins entry outputs nothing until you use it.

Runtime

None in core. 47 of the 53 kit components need no JavaScript. Autocomplete, data table, tabs and toast need the small kit script; input and table use it optionally.

Native HTML

Dialogs, drawers, dropdowns, popovers, accordions, sidebar groups, progress, select, textarea, toggles, checkboxes, radios and form validation run on the browser's own elements and attributes.

Themes

Light, dark and inverse through data-theme, high contrast through data-contrast. Without data-theme the operating system decides.

Direction

Logical utilities and kit components mirror under dir="rtl".

Contrast

Text on a brand or status fill is chosen for the higher contrast at build, with a warning below 4.5:1.

Color and shape

Dot, alert, field message and empty state change marker shape by role, so color is never the only signal.

Reduced motion

Kit motion is opt-in and runs only when the user allows motion.

Forced colors

Autocomplete, checkbox, input, progress circle, progress, radio, segmented, select, skeleton, tabs, toast and toggle have rules for the operating system's forced colors mode.

Errors

Unknown keys, colors, tokens, modifiers and mixins stop the compile and name the valid options.

Build speed

apply() caches what it parses, so compile time follows the values you write, not the size of the framework. Run the stress test

Tests

Core and Components each run a test suite: contrast, tokens, mixins and configuration in core; compile, entries, script exports and docs in Components.

Releases

Semantic versioning and a changelog.

Browsers

Chrome and Edge 135+, Firefox 144+, Safari 26.2+.

Accessibility

Follows WCAG 2.2 AA.

Editor

The WovenUI extension for VS Code: completion, hover, diagnostics and quick fixes for apply(), classes and tokens. Marketplace

License

MIT, for Core and Components.

Try it in the Playground·Get the VS Code extension