React packages for carousels, video, drawers and sites, built on the browser's own scroll snap, <video> and <dialog>. The browser does the heavy lifting, so each deck ships little JavaScript, and none on a page with nothing interactive. No styles ship either: bring your tokens, your CSS, or your agent.
Carousel
A carousel that lets the browser do the scrolling.
Native momentum, snapping and focus scrolling. Loop, fade, curve and autoplay as effects you import only when you use them.
pnpm add @carouseldeck/react12.78 KB
for a carousel with Prev and Next
min+gzip, React external
Video player
A video player you compose, not one you configure.
React primitives and hooks over native video, HLS, YouTube, Vimeo and Wistia. The same six lines drive all five.
pnpm add @playdeck/react0
requests to YouTube or Vimeo before play
Site framework
Zero JavaScript until a page needs it.
A React framework for CMS-driven sites. Each page ships only what it uses, and a per-page budget fails the build when it ships more.
npm create pagedeck0 B
of JavaScript on a page with nothing interactive
Drawer
A drawer that lets the browser do the dragging.
Native scroll snap drives the drag, momentum and snap points, and <dialog> gives the top layer, focus trap and Escape for free.
pnpm add @drawerdeck/react0
third-party libraries driving the drag
Every deck renders plain HTML and needs no stylesheet, so there is no theme to fight. carouseldeck and playdeck give every part a stable name, and pagedeck renders your own components. Point your CSS or your tokens at the markup, and the look is yours.
[data-playdeck-part='play-button'] {
border-radius: 999px;
}The browser already knows how to scroll, play video and show a page. The decks build on what it does instead of rebuilding it, so there is less code to ship.
Momentum, snapping and keyboard scrolling come from CSS scroll snap in a real scroll container.
Files and HLS streams play in the browser's own video element.
Pages render to HTML when the site builds. A page with nothing interactive ships no JavaScript at all.
Whether you write the code or your coding agent does, the decks leave less to guess.
Every deck is written in TypeScript and ships its types, so your editor and your agent see every prop.
Each deck's CI checks its examples, so the code you copy from the docs compiles.
carouseldeck and playdeck name every part, and in pagedeck the markup is your own, so an agent never has to guess.
The decks take care of the keyboard, focus and screen readers for you. Each line below is backed by a test in that deck's own repo.