⭐ Leave 🐻‍❄️ a star →
Documentation
Theme
Breakpoints

Breakpoints

Kuma UI supports responsive design by providing a flexible way to define breakpoints. These breakpoints can then be used in your components to apply different styles based on the viewport size. You can either use the default breakpoints provided by Kuma UI or define your own.

Default Breakpoints

If no breakpoints are explicitly defined, Kuma UI uses the following default breakpoints:

export const defaultBreakpoints = Object.freeze({
  sm: "576px",
  md: "768px",
  lg: "992px",
  xl: "1200px",
});

Customizing Breakpoints

kuma.config.ts
import { createTheme } from "@kuma-ui/core";
 
const theme = createTheme({
  breakpoints: {
    small: "500px",
    medium: "800px",
    large: "1100px",
    xlarge: "1400px",
  },
  // rest of your theme configuration...
});

Note that the breakpoint names (the keys of the breakpoints object) can be anything you like, and there's no limit to the number of breakpoints you can have. It's recommended to name your breakpoints according to your design system for consistency.

Using Breakpoints in Components

In your components, you can apply different styles based on the viewport size using an array syntax. For example, the following Box component will have a different color at different viewport sizes:

<Box color={["red", "blue", "green"]} />

In this example, the Box will have a 'red' color on small viewports, 'blue' color on medium viewports, and 'green' on large and above viewports.

Using Breakpoints with the styled and css APIs

Both the styled and css APIs support the breakpoints defined in your theme. This allows you to use the breakpoint names directly in your media queries.

Here is an example of how to use them in the styled API:

export const ResponsiveBox = styled.div`
  display: flex;
  flex-direction: row;
  @media (max-width: medium) {
    flex-direction: column;
  }
`;

In the above example, the flex-direction changes to column when the viewport width is less than the medium breakpoint.

You can also use breakpoints in the css API:

export const responsiveStyles = css`
  color: red;
  @media (max-width: sm) {
    color: blue;
  }
`;

In this example, the color changes to 'blue' when the viewport width is less than the sm breakpoint.

Additionally, you can use the t() API to reference theme tokens directly within your template literals, as shown below:

export const responsiveStyles = css`
  color: red;
  @media (max-width: t("breakpoints.sm")) {
    color: blue;
  }
`;

In this example, the t() API is used to reference the 'sm' breakpoint defined in your theme, changing the color to 'blue' when the viewport width is less than the defined 'sm' breakpoint.

These techniques provide a powerful way to write maintainable and consistent media queries in your styles, ensuring that your Kuma UI application is responsive and adapts to various viewport sizes.

Theme TokensComponent Theme