Source: /

# Built to move ✱ made to ship

Components, sections and full pages for landing sites and dashboards. One command, and the code is yours.

Browse landing ↗

Dashboard

Free & open source ✱ shadcn registry ✱ Own the code ✱ New every week ✱ Free & open source ✱ shadcn registry ✱ Own the code ✱ New every week ✱ Free & open source ✱ shadcn registry ✱ Own the code ✱ New every week ✱ Free & open source ✱ shadcn registry ✱ Own the code ✱ New every week ✱

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.

2 items

## Landing ↗

Marketing sites with motion, type and character.

1 Components 1 Sections 0 Pages

24 items

## Dashboard ↗

Product UI for data-dense apps.

15 Components 4 Blocks 5 Pages

## How it works

1. 01 ### Pick a scenario Landing pages want motion and character, dashboards want density and clarity. Everything is grouped by where it lives.
2. 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.
3. 03 ### Own the code No package to update, no black box. It is your file now, so bend it until it fits the brand.

The registry

## Fresh from the bench

View all ↗

2026-11-01 Components

### Date Picker

inputs & date

2026-11-01 Components

### Dialog

overlays

2026-11-01 Components

### Drawer

overlays

2026-11-01 Pages

### Order Edit

forms & crm

2026-11-01 Components

### Popover

overlays

2026-11-01 Components

### Toast

feedback & overlays

Contributors

## Built in the open, by people who care

- [![zubeyranwar](https://avatars.githubusercontent.com/u/51398270?v=4)](https://github.com/zubeyranwar)

Contribute ↗

## 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 Copy

Start browsing ↗

Read the docs