The default border radius across all components in UI Foundations Kit is 6px. This is a common value that is used in many design systems and is a good starting point for most projects.

You can adjust the border radius of components by changing the shape.borderRadius value in the theme file. This will apply the new border radius to all components that use the sx prop or the theme object.

theme.ts
const theme = createTheme({
  shape: {
    borderRadius: 6,
  },
});

​
Preview different radii

The live demo allows you to preview different border radii from the theme switcher, if you’re interested in seeing how different radii look.

The different default radii give the app a different look, ranging from more technical and developer centric the more sharp you get, to more friendly and approachable the more rounded you get.

IconsShadows