Hero Light Hero Dark

​
What is UI Foundations Kit?

UI Foundations Kit is a SaaS starter for MUI apps. It contains components, hooks, styles, and modules helpful for developers that are building dashboards for consumers, businesses, or internal teams. It’s main differentiating factor is its beautiful default theme.

​
Comparisons

The following comparison screenshots demonstrate some of the differences between the default Material Design theme and the UI Foundations theme, which makes it easier to pick up and make beautiful apps.

MUI Filters

UI Foundation Filters

MUI Actions

UI Foundation Actions

MUI CMD + K

UI Foundation CMD + K

MUI Help Menu

UI Foundation Help Menu

MUI Shadows

UI Foundation Shadows

MUI Checkout

UI Foundation Checkout

MUI Landing Page

UI Foundation Landing Page

Some differences include:
  • disabling of the button ripple effect
  • sharper borders
  • softer grays
  • harmonic typography
  • and more
These differences are described in more detail throughout these docs.

​
What’s Included

UI Foundations Kit offers all the bells and whistles you’d expect from a modern dashboard starter, including:
  • 🧭 In-app Tours - replace paid SaaS tools with a custom implementation for orienting new users, and highlighting elements using your own custom components
  • ⌘ Command Launcher - a global search bar that can be used to navigate your app, or execute commands, already assembled and ready to go
  • 📂 Custom Filters - a commonly implemented filtering pattern with great TypeScript support, as well as threshold based filters (field:price operator:> value:50) that integrates with the <DataGrid />, or your own custom backend
  • 🔠 Harmonic Typography - automatically adjusting harmonic typography that adjusts tracking (or line-height) for you, anywhere you use the <Typography /> component
  • 🎨 Palette/Theme Switcher - match your brand with any color/font/border-radius combination, modifiable in app
  • 🌗 Dark Mode - built-in, without any flicker (FOUC) for all components
  • 🧰 Beautiful Native MUI components - everything you’ve come to know from MUI like the <DataGrid />, the <DateRangeChanger />, but with better default styles
  • 📱 Fully responsive designs - looks great on mobile, desktop, tablet, etc
  • 🎆 Image file uploads - file type inputs with well styled controls and image previews
  • 📊 Themed Charts - MUI X Charts that match your brand and clean up default styles
In addition to these extra tools, UI Foundations Kit also runs on the latest version of MUI, including its newest features like the CSSVarsProvider for theming based on CSS variables. The best way to get a feel for what is available is clicking around the live demo yourself!

​
Pre-built components

There are 2 types of components pre-built in the UI Foundations Kit:
  1. Kit Components: (preview) with zero dependencies (besides MUI) and designed to be easily copy/pasted into any React project using MUI
  2. App Components: (preview) with more complex logic and state management, to demonstrate how to use the theme in a real-world application
You can read more about the differences in the Components section.