Beautiful MUI Building Blocks

UI Foundations Kit provides 65 well-designed, copy-and-pasteable React components that work seamlessly with MUI v5. Build your next app without worrying about layouts or CSS, and tweak whatever you want.

Join 500+ subscribers
New component releases
import * as React from "react"
// MUI v5 components
import { Box, IconButton, LinearProgress, Typography } from "@mui/material"
import { TbEditCircle, TbPin, TbShare, TbShoe } from "react-icons/tb"
// Stat card with progress bar
export default function StatProgress({
  children,
}: {
  children?: React.ReactNode
}) {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        bgcolor: "background.paper",
        borderRadius: 1,
        p: 3,
        borderWidth: 1,
        borderStyle: "solid",
        borderColor: "gray.200",
        width: "100%",
        maxWidth: 480,
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          mb: 2,
        }}
      >
        <Box
          sx={{
            display: "flex",
            flexDirection: "row",
            alignItems: "center",
            gap: 1.5,
          }}
        >
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: "primary.500",
              bgcolor: "primary.100",
              borderRadius: 1,
              height: 36,
              width: 36,
            }}
          >
            <TbShoe size={20} />
          </Box>
          <Box
            sx={{
              display: "flex",
              flexDirection: "column",
            }}
          >
            <Typography variant="h2">Step challenge</Typography>
            <Typography
              sx={{
                color: "gray.500",
                fontSize: "sm",
                lineHeight: 1,
              }}
            >
              20k per day
            </Typography>
          </Box>
        </Box>
        <Box>
          <IconButton>
            <TbShare />
          </IconButton>
          <IconButton>
            <TbEditCircle />
          </IconButton>
          <IconButton color="primary">
            <TbPin />
          </IconButton>
        </Box>
      </Box>
      <Box
        sx={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          mb: 0.5,
        }}
      >
        <Typography
          sx={{
            fontSize: "sm",
            color: "gray.500",
          }}
        >
          Progress
        </Typography>
        <Typography
          sx={{
            fontSize: "sm",
            color: "gray.500",
          }}
        >
          46%
        </Typography>
      </Box>
      <Box>
        <LinearProgress
          value={46}
          variant="determinate"
          sx={{
            height: 10,
            borderRadius: 1,
          }}
        />
      </Box>
      <Box
        sx={{
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-between",
          mt: 1,
        }}
      >
        <Typography
          sx={{
            fontSize: "md",
            fontWeight: 500,
            color: "gray.700",
          }}
        >
          9,200{" "}
          <Box
            component="span"
            sx={{
              fontSize: "xs",
              color: "gray.500",
            }}
          >
            / 20,000
          </Box>
        </Typography>
        <Box
          component="span"
          sx={{
            display: "flex",
            alignItems: "center",
            height: "max-content",
            px: 1,
            py: 0,
            fontSize: "xs",
            fontWeight: 600,
            color: "yellow.700",
            bgcolor: "yellow.100",
            borderRadius: 1,
            textTransform: "uppercase",
          }}
        >
          11 hours left
        </Box>
      </Box>
    </Box>
  )
}

Step challenge

20k per day

Progress

46%

9,200 / 20,000

11 hours left

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.

Application Kit

61 components

Layouts

Elements

Lists

Layout

Forms

Overlays

Marketing Kit

3 components

Page Sections

Themes

1 component

Pro Theme

Get Answers

Frequently Asked Questions

Yes, almost everything you see on this site is built with the same components that are offered through the library, as well as the same 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.

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.

New components and sections are actively added to the UI Foundations Kit library. Free updates means you get access to all future additions.

If prices are raised, you get all upgrades at no additional cost.

After you have purchased a license through our payment provider, you will receive an email from them confirming your purchasing. In addition, you will receive an email from UI Foundations inviting you to the platform.

The email address used at purchase is the same one that will allow you to login and access uifoundations.com and kit.uifoundations.com

The source code for Pro components is provided to you on the website, just as you would find if for free components, but you will need to be logged in to access it.

The Team license allows all employees (and/or contractors) of the licensee to access and use the components. When purchasing a team license, we recommend using an email address with shared credentials all team members can access.

Feel free to contact support with any questions as it relates to team licenses.

No, though we do offer a variety of free components that you can use to explore the various design decisions made for various components.

© 2022 UI Foundations. All rights reserved. · Logos by Clearbit · Privacy