Introduction
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.
Components
- AccordionA set of collapsible panels with headings.
- AlertA callout for displaying important information.
- Alert DialogA dialog that requires user response to proceed.
- AutocompleteAn input that suggests options as you type.
- AvatarAn image element with a fallback for representing the user.
- BadgeA badge or a component that looks like a badge.
- BreadcrumbDisplays the path to the current resource using a hierarchy of links.
- ButtonA button or a component that looks like a button.
- CardA content container for grouping related information.
- CheckboxA control allowing the user to toggle between checked and not checked.
- Checkbox GroupProvides shared state to a series of checkboxes.
- CollapsibleA collapsible panel controlled by a button.
- ComboboxAn input combined with a list of predefined items to select.
- DialogA popup that opens on top of the entire page.
- EmptyA container for displaying empty state information.
- FieldA component that provides labelling and validation for form controls.
- FieldsetA native fieldset element with a legend.
- FormA form wrapper component that simplifies validation and submission.
- FrameA framed container for grouping related information.
- GroupA component for visually grouping a series of controls.
- InputA native input element.
- LabelRenders an accessible label associated with controls.
- MenuA list of actions in a dropdown, enhanced with keyboard navigation.
- MeterA graphical display of a numeric value within a range.
- Number FieldA numeric input element with increment and decrement buttons, and a scrub area.
- PaginationA pagination with page navigation, next and previous links.
- PopoverAn accessible popup anchored to a button.
- Preview CardA popup that appears when a link is hovered, showing a preview for sighted users.
- ProgressDisplays the status of a task that takes a long time.
- Radio GroupA set of checkable buttons where no more than one of the buttons can be checked at a time.
- Scroll AreaA native scroll container with custom scrollbars.
- SelectA common form component for choosing a predefined value in a dropdown menu.
- SeparatorA separator element accessible to screen readers.
- SheetA flyout that opens from the side of the screen, based on the dialog component.
- SkeletonA loading state skeleton for your components.
- SliderAn input where the user selects a value from within a given range.
- SwitchA control that indicates whether a setting is on or off.
- TableA simple table component for displaying tabular data.
- TabsA component for toggling between related panels on the same page.
- TextareaA native textarea element.
- ToastGenerates toast notifications.
- ToggleA two-state button that can be on or off.
- Toggle GroupProvides a shared state to a series of toggle buttons.
- ToolbarA container for grouping a set of buttons and controls.
- TooltipA popup that appears when an element is hovered or focused, showing a hint for sighted users.