I’m publishing copy-paste React components from my product — here’s a Carousel (full source included)

I’m building Zafiro, and I’m starting to publish parts of the UI I use in the product as copy-paste components.

The idea is simple:

Open a page → copy the full source → paste into your project → tweak it however you want.

Demo + full source code (copy/paste):

https://playzafiro.com/ui/components/carousel/

What you can copy

The page includes everything needed to drop the component into a real codebase:

• React component source
• styled-components styles
• an example items file (so you instantly see the expected data shape)

What the Carousel does

• tile-based carousel / picker layout (worlds/templates/projects style)
• background crossfade (image/video) on hover/focus
• keyboard arrow navigation when focused/active
• easy theming via props + CSS variables

60-second workflow

1. Open the link above
2. Copy the full source files from the page
3. Paste into your project and replace the example items with your own

Notes

The live demo uses real destinations, so clicking a tile performs navigation.

If you want a “stay on page” demo mode, open links in a new tab or intercept navigation in your app.

Feedback welcome

If you try it, I’d love feedback specifically on the copy-paste workflow:

• file structure (what should be included by default)
• naming and defaults (what’s confusing / what’s missing)
• accessibility (focus behavior, keyboard pattern, ARIA suggestions)

Demo + full source again:

https://playzafiro.com/ui/components/carousel/