UI Foundations kit includes a set of components that can be used to build applications. These components are designed to be used in a consistent way across applications to ensure a cohesive user experience.

After purchasing the source code, you’ll find 2 types of components in the projects /src directory:

  1. Kit Components: These are standalone components that can be used in any React project. They are designed to be used with the sx prop or the theme object to apply styles, and all built with MUI and next to 0 external dependencies (apart from react-icons)
  2. App Components: These are components that are specific to the demo application. They are built with the same principles as the Kit Components, but may have additional dependencies or be more complex, like handling state management or more logic to demonstrate how to use the theme in a real-world application.

The components linked in the docs section in the navigation are considered standalone Kit Components and can be copy/pasted into any other React project that uses MUI. This follows the same principles as tools like shadcn/ui or Tailwind UI, where you can select the entire file and paste it into your project.

Kit Components are located in the /src/components/kit directory of the UI Foundations Kit codebase. App Components are located in the /src/components directory of the UI Foundations Kit codebase.

​
What are Kit Components best for?

Kit Components are best for:

  • using as a quick starting point for incorporating pieces of UI Foundations Kit into your own projects
  • referencing as source material for how to layout and structure componennts for your own SaaS app using another styling tool

​
What are App Components best for?

App Components are best for:

  • demonstrating how components can work together with other MUI components
  • giving you a starting point for building your own application
  • giving examples of state management and more complex that logic that may be passed between React components