A considered component collection
Interfaces people
want to touch.
A focused set of crafted React components where motion clarifies, interaction feels natural, and every detail has a reason.
Tap the island to change context
Navigation / Dynamic IslandInteractive preview01 / The collectionFewer components.
Fewer components.
Deeper thinking.
No filler. Each component explores a distinct interaction idea and ships with readable source.
Tap the island to change context
Navigation / Dynamic IslandInteractive previewNavigationDynamic Island
System / Live ActivityInteractive preview
SystemLive Activity
System / Control CenterInteractive preview
SystemControl Center
Play audio on
SystemOutput Picker
Glass / Glass Segmented ControlInteractive preview
GlassGlass Segmented Control
Glass / Glass SheetInteractive preview
GlassGlass Sheet
MediaMedia Capsule
themaginui
NavigationLiquid Glass Navbar
themaginui
Tap menu to condenseSelected project
HeaderFloating Header
themaginui
Interfaces made with care and clear intent.
PRODUCTComponentsDocs
SOCIALGitHub ↗Discord ↗
© themaginuiMade for the web
FooterEditorial Footer
Command / Command OrbitInteractive preview
CommandCommand Orbit
Button / Magnetic ButtonInteractive preview
ButtonMagnetic Button
Button / Prism ActionInteractive preview
ButtonPrism Action
Tabs / Liquid TabsInteractive preview
TabsLiquid Tabs
PROJECT / 08
A surface with spatial memory.
CardSpatial Card
GLOBAL · 24
Clarity through layered light.
Move across the surfaceGlassLiquid Glass Card
Glass / Glass Command BarInteractive preview
GlassGlass Command Bar
Glass / Glass ToggleInteractive preview
GlassGlass Toggle
Glass / Glass Profile MenuInteractive preview
GlassGlass Profile Menu
Input / Focus CommandInteractive preview
InputFocus Command
Dialog / Morph DialogInteractive preview
DialogMorph Dialog
Feedback / Signal ToastInteractive preview
FeedbackSignal Toast
MAKEITFELT
TypographyKinetic Heading
Dock / Adaptive DockInteractive preview
DockAdaptive Dock
02 / PrinciplesA system with
A system with
clear opinions.
Purposeful motion
Every transition explains relationship, hierarchy, or state.
Source is the product
Readable TypeScript with composable APIs and no opaque runtime.
Inclusive by design
Keyboard paths, focus states, semantics, and reduced motion are built in.
Made for teams
Tokens and variants scale from prototypes to product systems.
Ship your first component
Source you can own.
Pick a component, copy its source, and make it unmistakably yours.
Browse copy-ready components