Molecule UI

Shadcn-compatible component registry packed with animated, production-ready UI patterns you can drop into your Next.js app with a single shadcn add command.

Documentation

Visit for interactive demos, installation instructions, and usage snippets.

Quickstart (shadcn registry)

  1. Initialize shadcn if you haven’t already:
bash
npx shadcn@latest init
  1. Add any Molecule UI component:
bash
npx shadcn@latest add "https://moleculeui.design/r/swipe-row"

Swap swipe-row for any component name from the docs, e.g. accordion, voice-input, expandable-button, or warp-dialog.

What you get

  • Animated interactions built with motion and Radix primitives where it counts
  • Ready-to-copy source via the shadcn registry (no npm package required)
  • Demos and docs for each component under content/docs
  • Registry JSON at public/r/*.json for direct consumption

Components

A few highlights (more in docs): Swipe Row, Discussion, Spinning Circle, Morphing Square, Orbital Loader, Typewriter Loader, Profile Menu, Checkbox, Bouncing Dots, Wave Loader, Voice Input, Expandable Button, Liquid Glass Button, Warp Dialog, Word Rotate, Accordion, Dialog.

Contributing

Check out to add a component or demo (takes ~1 minute with pnpm generate:component). PRs are welcome!

Community & Support

  • Issues & feature requests:
  • Say hi on X:

License

Licensed under the .