Built to move ✱
made to ship
Components, sections and full pages for landing sites and dashboards. One command, and the code is yours.
Tomei is a growing registry of motion-first UI. The elements, techniques and code behind award-level sites, ready to drop into your React project.
Landing ↗
Marketing sites with motion, type and character.
Dashboard ↗
Product UI for data-dense apps.
How it works
- 01
Pick a scenario
Landing pages want motion and character, dashboards want density and clarity. Everything is grouped by where it lives.
- 02
Install with one command
Every item is a shadcn registry item. Run the command and the files, dependencies and imports land in your project.
- 03
Own the code
No package to update, no black box. It is your file now, so bend it until it fits the brand.
Contributors
Built in the open, by people who care
Questions
Is Tomei free?+
Yes. Browse, install and edit anything in the registry.
What do I need to use it?+
A React project with Tailwind CSS v4 and shadcn set up. If you haven’t yet, run npx shadcn@latest init first.
How do I install an item?+
Copy the command from its page, or add the registry to components.json and run npx shadcn@latest add @tomei/<name>. Dependencies and other Tomei items it needs come with it.
Which frameworks does it work with?+
Any React setup: Next.js, Vite, React Router, Farm.js, Astro islands and more. Items are plain components styled with shadcn tokens.
Can I change the code?+
Yes, it’s yours. Files are copied into components/<scenario> in your project, so edit them like any other component.
What is the difference between Landing and Dashboard?+
They are scenarios. Landing items aim for motion, typography and character; Dashboard items for dense, practical product UI.
Can I contribute?+
Yes. Read CONTRIBUTING.md in the repository. Fixes, docs and tooling are welcome straight away; open an issue first for new items.
Make it
award-worthy
pnpm dlx shadcn@latest add https://tomei.zubeyr.dev/ui/r/date-picker.json