Themes from design tokens
Colors, radius and fonts live in tokens. Change them once and every component follows, in the light and the dark theme.
One web design system for Angular, React and plain HTML
Accessible web components with design tokens and themes. Build the same interface in Angular, React, Next.js, HTML or Spring Boot, from one source.
Works with the stack you already use
- Angular
- React
- Next.js
- HTML
- Spring Boot
- Web Components
- TypeScript
64 components, ready to use
5 groups, each page with examples in Angular, React and HTML.
- Accordion
- Accordion Multi
- Alert
- Alert Dialog
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table(new)
- Date Picker
- Dialog
- Drawer
- Dropdown
- Empty
- Event Calendar(new)
- Field
- File Upload(new)
- Filters(new)
- Flow
- Frame(new)
- Gantt
- Hover Card
- Icon
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Menubar(new)
- Navigation Menu(new)
- Number Field(new)
- Pagination
- Popover
- Progress
- Radio
- Scroll Area(new)
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Spinner
- Stepper(new)
- Switch
- Table(new)
- Tabs
- Textarea
- Time Picker
- Timeline(new)
- Toast
- Toggle
- Toggle Group
- Tooltip
- Tree(new)
One system for every screen you ship
Stop rebuilding the same button in every app. Bring your tokens, themes and components into one place that just works.
Accessible by default
Menus, dialogs and forms work with the keyboard and screen readers out of the box: focus you can see and the right ARIA roles.
One component, every stack
The same custom elements and tokens ship as Angular components, React wrappers and plain HTML. Write it once, use it everywhere.
app.component.ts
import { Component } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';
@Component({
selector: 'app-root',
imports: [WdsButtonComponent],
template: `<wds-button variant="outline">Get started</wds-button>`,
})
export class AppComponent {}53 icons, ready for every framework
One icon set grouped by category, with search on the gallery page and copy-ready code for Angular, React and HTML.
Why teams choose WDS
See what changes when every app shares one set of components, tokens and docs.
Building it yourself
- A separate component library for every framework
- Keyboard and screen reader support you test and fix yourself
- Colors and spacing hard-coded in every app
- Light and dark themes that drift apart
- Examples that go stale next to the code
With WDS
- One set of components for Angular, React and HTML
- Keyboard, focus and ARIA roles built in
- Design tokens for color, radius and type
- Light and dark themes from one CSS file
- Live examples in three frameworks on every page
Everything you need to know
Quick answers to common questions about WDS and how it fits into your apps.
01 Which frameworks does WDS support?
Angular, React, Next.js, plain HTML and Spring Boot. Every framework uses the same custom elements and design tokens, so a screen looks and behaves the same in each of them.
02 Can I change the look to match my brand?
Yes. Colors, radius and fonts are design tokens. Pick them on the Create page, copy the CSS and every component follows, in the light and the dark theme.
03 Are the components accessible?
Keyboard support, visible focus and ARIA roles are built into the components, so you do not have to add them in every app.
04 How do I add WDS to an existing app?
Install the packages for your framework and import the components you need. The installation guide shows the steps for each framework.
05 What comes with the icon set?
53 icons grouped by category, with search on the gallery page and copy-ready code for Angular, React and HTML.
Start building with WDS today
Install the packages for your framework and ship a consistent interface in every app.
Angular · React · Next.js · HTML · Spring Boot