Build your next admin panel on Materia

Materia is a powerful, lightweight and fully responsive admin dashboard template inspired by Google’s Material 3 design. It comes in two builds, React and vanilla JavaScript, that share one clean, modern design and more than 60 carefully crafted pages, each built to stay visually consistent with the rest.

Designed in line with Material 3 guidelines, Materia works smoothly on desktops, tablets and phones, in light and dark mode, and performs well in every modern browser. Both builds run on Vite, so development is fast and production bundles stay lean.

Live demos

• React
• Vanilla JS

Two builds, one design

• React: React 19, TypeScript, Tailwind CSS v4, shadcn/ui (Radix) and React Router
• Vanilla JS: Bootstrap 5.3, SCSS and plain JavaScript, with no framework

Pick the one that fits your stack. The two match page by page, so if your team switches stacks later, the product looks the same.

6 ready-made dashboards

• E-commerce: sales history, store sessions, top products
• Analytics: active users, acquisition, traffic sources, sessions by country
• CRM: lead generation, conversions, lead sources, outbound calls
• SaaS: MRR movement, plan mix, product engagement
• Email Marketing: campaign reach, delivery vs. opens, campaign sales
• Project Management: budget use, planned vs. actual, project status

Apps that work

• AI Agent chat with actions, a search palette and notifications
• Mail, Messages, Calendar, Contacts, File Manager, Photos and To-do lists
• Billing, Invoice, Pricing tables, Team, FAQ and Search results
• User pages: profile, timeline, connections, photos and preferences
• Login, Register, Forgot password, Error and Coming soon pages

Every component you'll need

Buttons, cards, dialogs, sheets, tabs, popovers, tooltips, toasts, carousels, accordions, pagination, skeletons and more. The forms section has inputs, input groups, layouts, ready-made templates and validation (React Hook Form + Zod in the React build). Also included: charts (Chart.js), vector maps, a full calendar, a rich text editor, date pickers, sliders and data tables.

Built to be extended

• Light and dark mode. Each visitor's choice is remembered. In React it can also follow the system setting. Charts update their colors when the mode changes.
• Fully responsive on desktop, tablet and phone
• Clean, consistent code: typed React components, or organized SCSS with Bootstrap variables
• Fast tooling: Vite dev server and production builds
• Documented: the Both build ships with detailed documentations

Start with a polished admin and spend your time on your product instead of the UI.