BlockReactregistry:block5 dependencies

Accordion With Live Media

feature1

Accordion on the left, swappable media surface on the right. Each row picks its own media kind: image, video, or live registry-component asset.

@beste-ui Registry JSON

Live

Starting the live preview…

Runs in a sandboxed frame on a separate origin, in its registry's own theme. Mounted with no props — an item that paints an empty box is given its name as text, and some items need input to show anything.

Install

npx shadcn@latest add @beste-ui/feature1

Needs @beste-ui in your components.json registries — switch to URL if it doesn't resolve.

Registry: @beste-ui
Kind: Block
Framework: React
Files: 6 · 29.6 KB
Preview: Live
License: MIT

npm dependencies

clsx tailwind-merge lucide-react

Registry dependencies

accordionshadcn/ui
badgeshadcn/ui

9 variants

Variants of this

Other takes on Accordion With Live Media from @beste-ui — the same idea in another design, language or styling.

Three side-by-side step cards with a media surface anchored to the bottom of each card. Each slot accepts an image, video, or live registry-component asset.

Open

@beste-ui