Introduction

Why this exists

This started as a simple question: how many shadcn components can be recreated using only HTML and CSS? It turns out more than you'd expect. Recent web platform features like the Popover API, invoker commands, anchor positioning, scroll-state queries, the customizable select, and many more allow for relatively smooth replacements. This website collects the results as a coherent set: each component is a copyable HTML fragment styled with Tailwind utilities with the same design tokens as shadcn/ui uses, so an existing shadcn theme works unchanged.

Browser support philosophy

Some components use features that are already Baseline, others use features that shipped in Chromium first. The rule for every component is that the fallback must be functional. A select without base-select is the classic native select. A dropdown without anchor positioning opens centered. A carousel without scroll markers still scrolls. Each component page has a support table with the exact versions and the exact fallback behavior.

The colored badges you see on component pages show your browser support using the @supports CSS query. One honest limitation of @supports is that we can only test CSS, so HTML features like commandfor get a manual table row entry but no live badge.

Accessibility notes

• Since all of the HTML components are native, it's mostly the browser's job to handle accessibility features like trapping focus and keyboard navigation.
• Where a pattern bends semantics, the component page says so (as seen on theTabs, which announces as a radio group and explains why that's the honest trade).
• Reduced motion is handled once, globally, so every transition and animation in the library collapses to instant for users who ask for that.