Overview
ui/topia is a space to explore UI components, motion, and interaction patterns. Shared openly as it evolves.
ui/topia is my personal sandbox — a place to play with Base UI, motion.dev, and the little details that make interfaces feel alive.
Nothing official here — just work in progress, shared as I go.
At its core, it’s a collection of React components built on Base UI and styled with Tailwind. You can copy them, tweak them, or tear them apart.
I love Base UI’s philosophy: solid, accessible primitives without any visual baggage. This project builds on that — giving those barebones components a bit of personality, polish, and motion.
How It Works
No packages. No installs. Just source code you can make your own.
The idea’s borrowed from shadcn/ui — own your code, understand it, bend it to your needs.
- No black boxes: you see every line.
- Edit freely: it’s yours once copied.
- Learn by building: I sure am.
Why Base UI
If you’ve used shadcn/ui (built on Radix), this will feel familiar.
I chose Base UI just fits how I think — it does the heavy lifting for a11y and interaction, but stays quiet on design.
that gives me room to shape things my way.
Primitives, Blocks, and Motion
At the bottom: Primitives — unstyled, accessible building blocks.
On top: Blocks — sign-in flows, sidebars, whatever I need next.
Then there’s Motion Playground — microinteractions and transitions built with motion.dev (formerly Framer Motion).
Different layers for different moods:
- Primitives → barebone foundation
- Blocks → structured UI patterns
- Motions → movement and feedback
Pick your layer, remix as needed.
Built for Humans (and maybe AI)
Every component’s written to be clear, readable, and predictable — good for you, and for any AI that might want to help you refactor someday.
Credits
Shoutout to shadcn/ui, motion primitives, coss.com, animations.dev, devouringdetails.com, and others who keep the craft alive.