Oddkin 1.0.0-beta.1
Web components, design tokens, and the tools around them.
Use as little or as much as you need: every package works without the ones above it.
Supported browsers: Chrome 130, Edge 130, Firefox 132, and Safari 18.2, and later.
Component examples
Weekly report
Revenue grew 12% since last week.
color.action. default color.text. primary color.surface. raised color.success. foreground color.warning. foreground
Five starting points
- Tokens onlyUse the design tokens as CSS custom properties in your own CSS.
- Components in any appRegister the elements you use, then write ordinary HTML.
- Author custom elementsTyped properties, templates that update only what changed, scoped styles, and cleanup that follows the element.
- A full Oddkin applicationAn application root that owns its services, a store provided as context, a router, and requests that cancel themselves.
- Document your library with WorkbenchGenerate component pages, API tables, and live previews for any custom-element library, from its Custom Elements Manifest.
Reference
Explore the framework
Each package depends only on the ones it needs. Tokens work without JavaScript; components work in any framework or none; state, app services, and the tooling are optional.
Components
Themed custom elements, Oddkin layout presets, and component metadata.
Foundations
Theme configuration, pure token generation, and CSS, JSON, DTCG, and TypeScript outputs. Browser entry points are DOM-free.
AI components
Optional AI interaction elements, headless controllers, and stream adapters for conversation, inline assistance, research, and agent workflows.
Tools
Tools for your system
Component documentation generated from a library's metadata, served locally, with interactive pages and Theme Studio.
Theme Studio
Light and dark come from one theme: each mode is a scope, data-odd-mode, over the same components.
Workbench
Generate component pages, API tables, and live previews for any custom-element library, from its Custom Elements Manifest.
odd-buttonQuick start
Start with one element
Register the elements you use, then write ordinary HTML. They work in plain pages and in every framework.
import '@oddkin/components/define/button';<link rel="stylesheet" href="/node_modules/@oddkin/tokens/dist/css/default.css" />
<odd-button appearance="primary">Continue</odd-button>