Components
Learn the page tabs and start with the most useful primitives.
- - Read the Components Introduction page.
- - Open a Configurator page and test states with keyboard.
v2.042 ComponentsWCAG 2.2 AA
Build Accessible
Interfaces Faster.
Diwa is a framework-agnostic design system built on Web Components and shared CSS tokens. Load once, use anywhere — React, Angular, Vue, Next.js, or plain HTML.
ReactAngularVueNext.jsVanilla JS
42Components
TypeScriptReady
CSS TokensSystem
WCAG 2.2 AACompliant
Quick Start in 3 Steps
1. Install packages
Install the Diwa component package in your app.
npm install @diwacopilot/components2. Load global tokens and web components
Include generated CSS tokens and the ESM loader in your root layout.
<link rel="stylesheet" href="/stencil/diwa-components.css" /> <Script src="/stencil/diwa-components.esm.js" type="module" strategy="beforeInteractive" />3. Render your first component
Use a Diwa element directly in JSX, HTML, or your framework template.
<diwa-button variant="primary">Save</diwa-button>
Choose Your Path
Developing
Choose your framework setup path and integration strategy.
- - Use the support matrix to pick a framework guide.
- - Follow install, setup, events, and readiness steps.
Styles
Learn tokens, theming, and the interaction contract before customization.
- - Review CSS and JS token usage snippets.
- - Read Focus, Hover, and Motion guidance before overrides.
Designing
Align design intent with token architecture and component usage.
- - Use token-first workflow for design decisions.
- - Map design handoff notes to component docs tabs.
News
Track releases, roadmap priorities, and future migration guidance.
- - Review changelog before upgrades.
- - Check roadmap for upcoming framework documentation.
Recommended First Components
Start with these components to cover common product surfaces: actions, forms, feedback, and navigation.