14 components · free to start

UI that feels alive

Hand-built, shader-driven components. Play with each one live, take the free Web Component, or go Pro for React + TypeScript and every preset.

New

Neon RainCity · 02:14

Code

<script src="/deck-carousel.free.js" defer></script>

<deck-carousel
  size="240"
  theme="light"
  autoplay="0"
>
  <img src="/library/photos/neon-rain.webp" alt="Neon Rain" data-title="Neon Rain" data-tag="City · 02:14">
  <img src="/library/photos/red-canyon.webp" alt="Red Canyon" data-title="Red Canyon" data-tag="Desert · 17:40">
  <img src="/library/photos/northern-lights.webp" alt="Northern Lights" data-title="Northern Lights" data-tag="Forest · 23:05">
  <!-- …one <img> per card -->
</deck-carousel>

In context

Install · Free Web Component

One file, no dependencies. Stack preset, every other option included. Host it yourself so your visitors never load anything from our servers.

1. Install with one command — or download the file

shadcn CLI · React

npx shadcn@latest add https://www.ui-design.co/r/deck-carousel.json

↓ deck-carousel.free.js 16 KB

2. Load it and use the element

HTML

<script src="/deck-carousel.free.js" defer></script>

<deck-carousel
  size="300"
  theme="light"
  autoplay="0"
>
  <img src="/library/photos/neon-rain.webp" alt="Neon Rain" data-title="Neon Rain" data-tag="City · 02:14">
  <img src="/library/photos/red-canyon.webp" alt="Red Canyon" data-title="Red Canyon" data-tag="Desert · 17:40">
  <img src="/library/photos/northern-lights.webp" alt="Northern Lights" data-title="Northern Lights" data-tag="Forest · 23:05">
  <!-- …one <img> per card -->
</deck-carousel>

3. React + TypeScript (optional)

The shadcn command adds a typed React wrapper for you. Using the file directly? Custom elements work in React as-is; for type checking add:

TypeScript

// deck-carousel.d.ts
declare namespace JSX {
  interface IntrinsicElements {
    'deck-carousel': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
      size?: number | string;
      theme?: 'light' | 'dark';
      autoplay?: number | string;
      speed?: number | string;
      caption?: 'true' | 'false';
    };
  }
}

Pro · React + TypeScript Pro

One payment of $4.99, yours forever. Use it in unlimited personal and commercial projects; no resale.

React component with TypeScript types — slides as data, onChange, imperative-free
Fan, Cascade and Scatter layouts — a hand of cards, a staircase and a pile of polaroids with handwritten titles
The vanilla Web Component with every layout, a demo page, README and license

Attributes & props

Name	Type	Default	Description
<img> children	src, alt, data-title, data-tag	—	One per card. React: slides={[{ src, title, tag, alt }]}.
size	number (px)	300	Card width; the card is 4:5.
theme	'light' \| 'dark'	'light'	Shadows, caption and buttons.
autoplay	seconds	0	Throws the top card every N seconds; pauses on hover, focus and off-screen. 0 = off.
speed	number	1	Spring speed of the cards settling.
caption	boolean	true	Title, tag, counter and arrows under the deck.
change	event · detail.index	—	Fires when another photo comes to the top. React: onChange(index).
preset Pro	'stack' \| 'fan' \| 'cascade' \| 'scatter'	'stack'	Deck layout. Free build ships Stack only.

Throw the top card past a third of its width — or flick it — and it flies off and slides in at the back; let go earlier and it springs home. It pivots around where you grabbed it. Arrow keys and the buttons work too; vertical swipes still scroll the page on touch screens. Pure CSS transforms (no WebGL), so any number fit on a page; it settles to zero work when idle and turns motion off for prefers-reduced-motion.