Just add HTML, get styled components. No classes. No
configuration.
About
EdibleCSS styles native HTML5 elements automatically. But some UI
patterns genuinely require JavaScript — a searchable dropdown, a
multi-tag input, a toast notification. Native HTML has no equivalent
elements for these.
edible-web-components fills that gap with custom elements
that look and feel like native HTML5 tags, inherit EdibleCSS design
tokens automatically, and activate with a single
<script> tag.
Key Features
Zero Classes: Use attribute APIs just like native
HTML attributes.
EdibleCSS Tokens: Colors, spacing, and dark mode
work automatically.
Accessible: Full ARIA wiring, keyboard navigation,
and focus management built in.
Form-ready: Form components participate in
FormData natively.
Tiny: Under 6 KB gzipped for the full component
set.
No Shadow DOM: Light DOM first — EdibleCSS styles
cascade in naturally.
Installation
CDN
Add both EdibleCSS and the components to your
<head>:
All components are now available as HTML tags. No JavaScript required
in your own code.
Always use defer when loading in
<head>. Without it the script runs before child
elements (like <option> inside
<edible-combobox>) are parsed. Alternatively, place
the script at the end of <body>.
This is the overview panel. Click another tab or press
Arrow Left / Arrow Right to navigate.
This is the details panel. Full keyboard and ARIA support is built
in.
This is the history panel. No configuration required.
edible-nav-dropdown
Design Tokens
All components inherit EdibleCSS custom properties. Override at
:root
to affect both EdibleCSS and the components at once — no
component-specific variables needed.