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-componentsstyles - 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
- Open the link above
- Copy the full source files from the page
- 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/
Top comments (3)
the crossfade on hover is a nice touch. i've been using embla for carousels but honestly most of the time i end up ripping out half the features anyway, so copy-paste with just the source makes more sense for simpler cases.
Thanks a lot for the feedback - I really appreciate you taking the time to comment.
You’re absolutely right: having the assets tied to my repo makes it inconvenient to experiment, especially if you want to plug in your own app and iterate quickly. I’m actively working on improving this, and as soon as I settle on a clean, reliable way to support external URLs / custom data in the demo, I’ll update it so it’s truly convenient for others to copy-paste and play with.
I’m building more components in parallel, and making the demos easier to reuse is a priority - I want people to be able to grab the code, swap assets in seconds, and iterate without friction.
Thanks again - I genuinely read every piece of feedback and it helps a lot.
yeah that makes sense. a prop for image src array or even just accepting children instead of hardcoded assets would go a long way. looking forward to seeing the other components too.