Reactcomponents

Small building blocks rather than whole pages: the button, badge and avatar primitives that every interface needs, plus a few more opinionated pieces. Every component page carries a live preview you can interact with, a props table generated from the component's own metadata, the source in full, and the steps to get it running in your project.

TypeScript and React, with framer-motion where an interaction genuinely benefits from motion and lucide-react for icons. Styling is inline, not utility classes — the trade-off is that a component carries its own look rather than inheriting your design tokens, and the payoff is that it works the moment you paste it in.

Yes. Every component on this page is free to copy into personal or commercial work. There is no sign-up, no attribution requirement and no package to install — the full source sits on each item's page under the Code tab.

No. The components are styled with inline styles rather than utility classes, so they render identically whether or not your project has Tailwind configured. Each one also accepts a className prop if you would rather restyle it with your own system.

Open the component, switch to the Code tab, copy the file into your own components folder and install the dependencies it lists. Most need only React; some also use framer-motion for animation and lucide-react for icons.