Component library
Devmachinist ships with over 100 production-ready components, all React + Tailwind CSS with no extra packages. Each one renders with realistic sample content and takes props so you can replace it with your own.
Categories #
| Category | Examples |
|---|---|
| Marketing | Heroes, navbars, feature grids, bento grid, logo clouds, testimonials, pricing tables, calls to action, footers, contact sections |
| App UI | KPI cards, data tables, charts, kanban board, calendar, settings, user tables |
| Feedback & navigation | Alerts, toasts, modal, drawer, empty states, tabs, breadcrumbs, pagination, accordion, stepper, command palette |
| Forms | Sign-up with password strength, login, contact, newsletter, search with suggestions, file drop zone |
| Commerce | Product grid and detail, cart drawer, order summary, reviews, wishlist, promo countdown |
| Content | Blog grid and article layout, team, job listings, timeline, roadmap, changelog, galleries, FAQ, 404, coming soon, cookie banner |
Using a component #
Open the Library tab → Library, find a component (search or browse by folder) and press +. It is copied into your project's src/components/ so you can change it freely, and its import is added for you.
Your own library #
Upload .jsx/.tsx files or whole folders, or paste JSX, to build a personal library you can reuse across projects. Library files can import npm packages installed in the project.
The Shop #
Find more templates, components and libraries — free and paid — in the Shop.