UI Foundations Kit – SaaS Dashboard Template

Description

UI Foundations Kit is a SaaS starter for Material UI apps. It contains components, hooks, styles, and modules helpful for developers who are building dashboards for consumers, businesses, or internal teams.

It features a beautiful default theme and easily copy/paste-able UI components to build dashboards and apps faster.

See the differences between the default Material UI theme and the UI Foundations theme in the 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/Walkthroughs – 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 filtering – 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 adjusts 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 the app
• 🌗 Dark mode – built-in, without any flicker (FOUC) for all components
• 🧰 Beautiful native Material UI v6 components – everything you’ve come to know from the work of the MUI team, like the MUI X <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

The best way to get a feel for what is available is by clicking around the live preview yourself!

With your purchase, you get access to the starter template codebase, with the different frameworks and flavors of JavaScript listed below:

What are “Kit” components?

In addition to all the components used in the live preview that are included in the source code, the Plus, and Extended licenses also include a library of easily copy/pasteable Material UI components with no external dependencies and simple state and data requirements.

This makes them ideal for lifting individual modules into your project, or extracting just the pieces you are interested in, and integrating them with your logic or state management.

All the components used in the live preview are available for use as well, but are interdependent on state and imports from other components in the dashboard, making them more attuned for use as a starter template that you make changes to instead.

You can read more about the differences between “App” and “Kit” components in the docs.

Available pages

The following pages demonstrate the included App components and their functionality within a working dashboard. Kit Components can be copied and pasted to modify the layout or add new charts or functionality:

• Homepage
• Landing page
• Changelog
• Sign-in
• Register
• Dashboard Home
• Table List
• Card List
• Profile List
• Analytics Dashboard
• Profile
• Checkout

Application Kit

Layouts (7 examples)

• Sidebar Layouts (5 examples)
• Stacked Layouts (1 example)
• Dual Sidebar Layouts (1 example)

Elements (25 examples)

• Buttons (8 examples)
• Button Groups (3 examples)
• Stats (3 examples)
• Avatars (4 examples)
• Menus (2 examples)
• Badges (5 examples)

Lists (5 examples)

• Tables (2 examples)
• Card Grids (3 examples)

Layout (5 examples)

• Containers (2 examples)
• Dividers (2 examples)
• Decorations (1 example)

Forms (16 examples)

• Authentication (5 examples)
• Inputs (6 examples)
• Selects & Comboboxes (5 examples)

Navigation (7 examples)

• Navbars (4 examples)
• Breadcrumbs (3 examples)

Overlays (7 examples)

• Drawers (3 examples)
• Help Menus (2 examples)
• Notifications (2 examples)

Marketing Kit

Page Sections (6 examples)

• Hero Sections (3 examples)
• Features Sections (3 examples)

What’s not included?

A few commonly requested features for some teams are not included as part of UI Foundations Kit. If you are interested in seeing these features, feel free to reach out on Twitter or via email.

• A Figma file
• Backend support for various authentication providers
• CRUD (Create, Read, Update, Delete) examples

The philosophy for UI Foundations Kit is that other tools can fill the need for these cases better than it can, and to defer to their docs and resources to stay modern and up-to-date.

Based on requests and suggestions from the community, these features may be considered and added in the future.

Documentation

All features and how to get started with them are kept up-to-date on the UI Foundations Kit docs.

Updates and Support

We’re available to help with issues you encounter or questions you have about how or why something is implemented a certain way. Feel free to reach out via email.

All licenses include 1 year of free updates and 6 months of support to handle any errors you encounter with the features supported by UI Foundations Kit.

Feedback and Support

What is our template missing? Email us or make suggestions on Twitter to prioritize features you need for your long-term goals and initiatives.

License

Purchases are subject to the terms of the MUI Store, please refer to them for additional details about acceptable use with a purchased license.