The accordion-wc component supports view transitions for smooth, animated panel reveals. Add data-transition to enable the default fade, or choose "scale" or "slide" for alternative effects. In browsers without view transition support, the component falls back gracefully to the native ::details-content height animation.
The default data-transition (or data-transition="fade") cross-fades panel content in and out.
Vanilla Breeze is a CSS framework built on native HTML semantics and design tokens. It provides layout primitives, web components, and progressive enhancement patterns that work without a build step.
No. Vanilla Breeze is framework-agnostic. Its web components are standard custom elements that work in any HTML page, whether you use React, Vue, plain HTML, or a static site generator like Eleventy.
Every accordion is built on native <details> and <summary> elements. Without JavaScript, panels still open and close using the browser's built-in disclosure behavior. The web component layer adds keyboard navigation, ARIA attributes, single-open mode, and view transitions on top.
The base accordion works in all modern browsers. The ::details-content height animation requires Chrome 131+ or Safari 17.5+. View transitions require Chrome 111+ or Safari 18+. Both enhancements degrade gracefully in older browsers.
Use data-transition="scale" for a subtle scale-up/scale-down effect when panels open and close. Combined here with the data-indicator="plus-minus" variant.
All spacing, color, typography, and motion values are defined as CSS custom properties. Override any token at the root or scope level to theme the entire system without touching component internals.
Stack, cluster, grid, sidebar, and regions layouts are available as both custom elements and data-layout attributes. They compose together to handle any page structure without writing custom CSS.
Accordion, tabs, dialog, combobox, and other interactive patterns are provided as web components. Each is built on semantic HTML, provides full keyboard support, and enhances progressively.
Use data-transition="slide" for a horizontal slide animation. This example also uses data-single so only one panel can be open at a time.
Add Vanilla Breeze to your project via npm or link the CDN stylesheet directly. No build tooling is required for basic usage -- just include the CSS and optional JS module.
Structure your content with native HTML elements like <header>, <nav>, <main>, <section>, and <footer>. Vanilla Breeze styles these elements directly via its native-elements layer, so your markup stays clean and meaningful.
Use data-layout attributes for spatial arrangement and drop in web components like <accordion-wc> or <tabs-wc> for interactive patterns. Every component is opt-in and enhances the semantic base without replacing it.
A standard accordion-wc without data-transition. Panels still animate via the native ::details-content CSS animation in supported browsers, but without the view transition layer.
Opening and closing this panel uses only the CSS ::details-content height animation. There is no cross-fade, scale, or slide effect. Compare the feel to the sections above to see the difference view transitions make.
View transitions add a small JavaScript overhead for each toggle. If your accordion is in a performance-critical path or you prefer the simpler CSS-only animation, omit data-transition entirely.
Yes. Each accordion-wc instance manages its own view transition names and classes independently. You can have fade, scale, slide, and no-transition accordions all on the same page without conflict.