Skip to content
WovenUI LogoWovenUI

Patterns

Ready-made interface parts in WovenUI core utility classes. Blocks are single parts such as a card or a navbar; templates are whole screens. Each one renders live, switches theme and direction, and gives you the HTML to copy. The prebuilt core stylesheet is all it needs.

Blocks

  • Card pattern

    A content card with a title, a status badge, a short description and two actions.

  • Dark mode toggle pattern

    A toggle button that switches the page between light and dark themes, remembers the choice and follows the operating system until a choice is made.

  • Form field pattern

    Three labeled form fields: an email input with a hint, a select, and an input showing an error message.

  • Navbar pattern

    A top navigation bar with a wordmark, four page links and an account link. Below the md breakpoint the links move to their own row.

Templates

  • Dashboard layout template

    A dashboard shell with a side navigation, a page header, three stat tiles and a recent orders list. The navigation sits above the content below the md breakpoint.

  • Mail client template

    A mail client with a tool rail, folders and labels, an inbox and an open message. Panes give way below the xl, md and sm breakpoints.

  • Pricing table template

    A pricing table with three plans, one highlighted, each with a price, a feature list and a call to action. The plans stack below the md breakpoint.

  • Team settings template

    A team settings panel with tabs, an invite form, a warning and a members list with role badges. The two columns stack below the lg breakpoint.