Beautiful MUI Building Blocks
UI Foundations Kit provides 100+ well-designed, React components that work seamlessly with MUI v5. Build your next SaaS app without worrying about layouts, designs, or CSS, and modify whatever you want.
import { Box, Paper } from '@mui/material';import { Sidebar, SIDEBAR_WIDTH } from '../components/Sidebar';import { useRegisterTours } from '../context/TourProvider';export function DashboardLayout() {useRegisterTours();return (<Boxsx={{display: 'grid',gridTemplateColumns: { xs: '1fr', sm: '200px 1fr' },width: '100%',height: '100%',minHeight: '100vh',}}><Sidebar /><MobileNav /><HelpMenu /><Boxsx={{py: { xs: 0, sm: 1 },pr: { xs: 0, sm: 1 },height: '100%',width: {xs: 'calc(100vw)',sm: 'calc(100vw - 200px)',},display: 'flex',flexDirection: 'column',justifyContent: 'center',gap: 2,}}><Papersx={{height: '100%',width: '100%',display: 'flex',flexDirection: 'column',gap: 2,boxShadow: 1,borderRadius: { xs: 0, sm: 1.5 },backgroundColor: 'background.paper',}}><Outlet /></Paper></Box></Box>);}
Beautiful default theme
Powered by harmonic scales and high-level utility abstractions like Tailwind and Styled System.Fully responsive
Supports all shapes and mobile sizes ergonomically built with the responsive object syntax.Completely themeable
TypeScript defined theme tokens, variants, and scales, or vanilla JavaScript if that's your thing.Modern techniques
Grid and flex native, using modern, supported syntax & properties like gap + layout components.Full featured components
Hundreds of pre-built Kit Components
From autocompletes to entire data grids, we have you covered. Don't settle for just the common use cases.
Modern UI Kit
Everything you need to start building
Our comprehensive React UI kit provides you with all the frontend tools and components you need to create stunning, responsive, and accessible web applications quickly and efficiently.
Comprehensive Component Library
Access a wide range of pre-built, customizable components to rapidly construct your user interface from copy/paste-able code.
Accessibility-First Design
Ensure your application is usable by everyone with our WCAG 2.1 compliant components built on top of MUI primitives.
Flexible Theming System
Easily customize the look and feel of your application by extending our beautiful default theme using the APIs native to MUI projects.
Free Updates for 1 year
Stay current with the latest design trends and best practices through our regular updates to the components and MUI best practices.
Frequently Asked Questions
Updates are released through the MUI Store and include new components, bug fixes, and updates to the theme.
All components are written with the MUI Material package, on version 5 or greater. Version 5 brought support for the sx prop and theming provided by the widely popular emotion package. Components will be kept up to date with the latest version of MUI to the best of our ability.
UI is the most popular React component library in the world. With as extensive of APIs provides, you can build extremely complex business applications with fewer lines of code. Other libraries offer great alternatives, as well as novel approaches to styling, but MUI has continued to provide the most sophisticated components like Autocompletes and Data Grids with a consistent API.
For the time being, no. As the library matures we will reconsider that decision, but the current resources for Joy UI are less extensive and less tested. Because of the large collection of components that the MUI Material library provides, we support it first and foremost.
Access includes all source code for the landing page, dashboard, authentication pages, as well as the MUI theme and funcational code in a React JavaScript or TypeScript app. All components, hooks, and layouts are also included.
Reach out to @uifoundatons on Twitter, or email our support through the MUI store. We are always looking for ways to improve the kit and make it more useful for developers.
No, though we do offer a variety of free components that you can use to explore the various design decisions made for various components.
Yes, everything you see on this site is built with the same components that are offered through the UI kit, as well as the same theme. If you can see it on this domain, it is available with the full source code.