Breakpoints

Learn about the responsive breakpoints used in Plus UI for creating adaptive layouts.

Plus UI uses a standard set of breakpoints, aligned with Tailwind CSS defaults, to ensure that layouts are responsive and adapt gracefully across a wide range of devices. These breakpoints are the foundation of our responsive design system.

Breakpoint Values

Our components are designed to work seamlessly with the following screen width breakpoints:

Name	Value	Tailwind Class	Description
sm	640px	`sm`	For small devices like mobile phones (landscape).
md	768px	`md`	For medium devices like tablets.
lg	1024px	`lg`	For large devices like small laptops.
xl	1280px	`xl`	For extra-large devices like standard desktops.
2xl	1536px	`2xl`	For very large screens.

Usage in Your Project

Because Plus UI components are built with responsive design in mind, they will automatically adapt to these breakpoints. When building your application layout with Tailwind CSS, you can use these standard breakpoint prefixes to create responsive designs.

<!-- This div will have a left margin of 4 on small screens and up,
     and a left margin of 8 on large screens and up. -->
<div class="ml-4 lg:ml-8">
  <plus-button>My Responsive Button</plus-button>
</div>

Customizing Breakpoints

If your project requires different breakpoints, you can customize them in your tailwind.config.js file. This is an advanced use case and may affect how some Plus UI components render.

module.exports = {
  theme: {
    screens: {
      'sm': '600px',
      'md': '900px',
      'lg': '1200px',
      'xl': '1800px',
    },
    extend: {},
  },
  plugins: [],
}

By standardizing breakpoints, we ensure a consistent and predictable responsive experience.

Join the Community

Plus UI is built by the community. Join us on our platforms to contribute, get help, and stay up to date.

Figma GitHub Discord Twitter Open Collective