The tabs-wc component supports animated tab switching via the data-transition attribute. Built on the View Transitions API, each transition type offers a distinct visual effect while progressively enhancing the default instant-switch behavior.
The default transition crossfades between panels. Use data-transition or data-transition="fade" to enable it.
Vanilla Breeze builds on native HTML elements rather than replacing them. Every component starts with valid, accessible markup and enhances it progressively. Screen readers, search engines, and unstyled browsers all get a solid baseline experience.
A unified set of CSS custom properties controls spacing, color, typography, and motion across every component. Change a single token and the entire system responds — no hunting through scattered overrides.
No build step, no runtime library, no framework lock-in. Ship a single CSS file and a single JS module. The entire toolkit works with a plain <link> and <script> tag.
Directional sliding that moves content forward or backward based on tab order. Ideal for sequential flows where the user progresses through steps.
Install — Add Vanilla Breeze to your project. Drop the CSS and JS files into your document head, or install from npm. No bundler configuration required; a simple <link> and <script type="module"> is all you need.
Author — Write semantic HTML using native elements and VB custom elements. Add layout attributes like data-layout="stack" or data-layout="grid" to compose your page structure without wrapper divs.
Ship — Deploy your site. Every component works without JavaScript for core content, then enhances with interactivity when the module loads. Your users get a fast, accessible experience on any device.
Panels scale down on exit and scale up on enter, creating a zoom-style transition. Works well for before/after comparisons or state changes.
A typical page built with utility classes: dozens of div wrappers, cryptic class names stacked four deep, and no semantic meaning. Screen readers announce a flat list of text. Developers reading the source have to decode the intent from abbreviated tokens.
The refactoring process: replace each div with the semantic element it was pretending to be. Move layout concerns to data-layout attributes. Let VB's native-element styles handle typography, spacing, and color automatically.
Clean, readable markup where every element communicates its purpose. The heading structure is correct. Landmarks are in place. Spacing flows from the design-token system. The page looks the same but the source tells a story.
A standard tabs-wc without the data-transition attribute. Tabs switch instantly with no animation, providing a baseline for comparison.
Without data-transition, tab panels swap immediately. This is the default behavior and requires no View Transitions API support. It works in every browser.
Instant switching has zero animation overhead. For content-heavy panels or low-powered devices, this may be the preferred mode. The transition attribute is purely additive — removing it never breaks functionality.
All transition modes respect prefers-reduced-motion. When the user or system requests reduced motion, animations resolve in under 1ms, providing the same instant-switch experience regardless of the data-transition value.
View transitions require Chrome 111+, Safari 18+, or Firefox 131+. In browsers without support, tabs-wc falls back gracefully to instant panel switching — the data-transition attribute is simply ignored. This is progressive enhancement: the tabs always work, and the animation is a bonus when the browser supports it.