Skip to content
WovenUI

WovenUI Components 1.0.0

HTML and CSS UI components built on WovenUI core

Buttons, forms, dialogs and tables as one class on native HTML. Every color, space and radius comes from core tokens, so every theme just works: light, dark and your own core theme.

pnpm add @wovenui/core @wovenui/componentsBrowse components

Live components

Team plan

Active
Seats used8 of 10
Projects24+3 this month

Manage seats

Eight seats are in use.

Invite a teammate

Enter an email address, like [email protected].

Warning

Two seats left on this plan.

72%

Invites expire after seven days.

Enter an email address, like [email protected].

Switching from Bootstrap or Tailwind

Ready components like Bootstrap's, on native elements and design tokens instead of a JavaScript bundle. Each guide maps the classes you use today to WovenUI classes.

WovenUI compared with BootstrapMigrate from BootstrapMigrate from BulmaMigrate from FoundationMigrate from Pico CSSMigrate from TailwindMigrate from UnoCSS

Modals and dropdowns without JavaScript

The browser already opens dialogs, shows menus and checks forms. The kit styles those built-in features, and the preview above runs on them: Manage seats and Invite open a dialog, Editor opens a menu, and Send checks the email.

  • Modal and drawer. The native <dialog>, opened with commandfor. See the modal and the drawer.
  • Dropdown and popover. The popover attribute. See the dropdown and the popover.
  • Menus that follow their button. CSS anchor positioning opens the menu under its button and flips it when there is no room.
  • Accordion and tooltip. <details name> and the data-tooltip attribute. See the accordion and the tooltip.

4 components need the small kit script: Autocomplete, Data table, Tabs and Toast notification. Everything else is HTML and CSS, apart from a few optional extras listed on the JavaScript page.

Load it after core

Use the prebuilt CSS, or the SCSS source through a bundler. Core provides the tokens and base styles once; the kit emits only its own rules.

HTML, prebuilt CSS
<link rel="stylesheet" href="node_modules/@wovenui/core/dist/wovenui.min.css">
<link rel="stylesheet" href="node_modules/@wovenui/components/dist/wovenui-kit.min.css">
SCSS, through a bundler
@use "@wovenui/core";
@use "@wovenui/components";

One root class, then plain words

Every component has a wu- root. Variants and sizes are bare words after it, valid only with the root. Motion is off until you add animated or wu-animated.

HTML
<button class="wu-btn brand sm" type="button">Save</button>
<span class="wu-badge success">Active</span>
Result
Active

Components

54 components. Each page renders every variant, part and state live, with the HTML to copy.

Actions

Data display

Feedback and status

Surfaces and text

Navigation and layout

Forms

Overlays and disclosure

Interactive components

Add the components with one line

pnpm add @wovenui/core @wovenui/componentsRead the docs@wovenui/components on npm