64 components for every framework
Buttons, forms, dialogs, tables and calendars that look the same in Angular, React and plain HTML, follow your theme and work with the keyboard.
Find the component you need
5 groups, from buttons and inputs to data tables, calendars and flows. Each one opens its page with live examples.
- 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)
What every component gives you
The parts you would otherwise build and test again in every app come with each component.
Accessible by default
Keyboard support, visible focus and the right ARIA roles are built in, so menus, dialogs and forms work with screen readers.
Light and dark
Every component follows the theme of the page. Switch it once and nothing needs a second stylesheet.
Design tokens
Colors, radius and fonts come from tokens. Change them on the Create page and every component follows.
One API everywhere
The same attributes, events and slots in Angular, React and plain HTML, because every component is a custom element.
Ready for Angular forms
Form components come with examples for Signal forms, template-driven and reactive forms.
Copy-ready examples
Every page has live examples with code for Angular, React and HTML, an API reference and the page as Markdown.
Write it once, use it everywhere
The same element with the same attributes in Angular, React and plain HTML.
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 {}Everything you need to know
Quick answers about frameworks, bundle size, styling and accessibility.
01 Do I need a specific framework?
No. Every component is a custom element, so it works in plain HTML. Angular and React get thin wrappers with typed inputs and events, and Next.js uses the React ones.
02 How do I use only a few components?
Import each component on its own, for example @wds/angular/button. Your bundle only gets the components you import.
03 Can I change how a component looks?
Start with the design tokens for colors, radius and fonts. For more control, components expose CSS parts and custom properties, listed in the API section of each page.
04 Are the components accessible?
Keyboard support, visible focus and ARIA roles are built in. The Accessibility section of a component page describes its keys and what screen readers announce.
05 What is new?
New components have a dot in the list above and a badge in the docs menu. The changelog lists every release.
Build your next screen with WDS
Install the packages for your framework and start with the components you need.
Angular · React · Next.js · HTML · Spring Boot