Breakpoints

Responsive design utilities and hooks for building adaptive layouts that work across all screen sizes.

Breakpoint Values

Aki UI uses Tailwind CSS default breakpoints:

Breakpoint	Min Width	Max Width	Description
sm	640px	767px	Small devices (phones)
md	768px	1023px	Medium devices (tablets)
lg	1024px	1279px	Large devices (laptops)
xl	1280px	1535px	Extra large devices (desktops)
2xl	1536px	∞	2X large devices (large desktops)

Live Demo

Resize your browser window to see the breakpoint detection in action:

Current Breakpoint: sm

Is MD or larger: No

Is LG or larger: No

Is XL or larger: No

useBreakpoint Hook

The useBreakpoint hook returns the current active breakpoint.

import { useBreakpoint } from '@akitectio/aki-ui'

function MyComponent() {
  const breakpoint = useBreakpoint()
  
  return (
    <div>
      Current breakpoint: {breakpoint}
    </div>
  )
}

Returns:

'sm' | 'md' | 'lg' | 'xl' | '2xl'

useMediaQuery Hook

The useMediaQuery hook checks if the screen size matches a specific breakpoint or larger.

import { useMediaQuery } from '@akitectio/aki-ui'

function MyComponent() {
  const isMobile = useMediaQuery('sm')
  const isTablet = useMediaQuery('md')
  const isDesktop = useMediaQuery('lg')
  
  return (
    <div>
      {isMobile && !isTablet && <MobileLayout />}
      {isTablet && !isDesktop && <TabletLayout />}
      {isDesktop && <DesktopLayout />}
    </div>
  )
}

Parameters:

breakpoint: 'sm' | 'md' | 'lg' | 'xl' | '2xl'

Returns:

boolean - true if screen is at or above the specified breakpoint

Responsive Component Props

Many Aki UI components accept responsive props that can be configured per breakpoint:

import { Grid, Stack } from '@akitectio/aki-ui'

// Responsive grid columns
<Grid cols={{ base: 1, md: 2, lg: 3, xl: 4 }}>
  {/* Grid items */}
</Grid>

// Responsive stack direction
<Stack direction={{ base: 'vertical', md: 'horizontal' }}>
  {/* Stack items */}
</Stack>

// Responsive spacing
<Stack spacing={{ base: 2, md: 4, lg: 6 }}>
  {/* Stack items */}
</Stack>

💡 Tip:

Use base for the default value (mobile-first), then specify breakpoint-specific values as needed.

Responsive Utilities

getResponsiveClasses

A utility function that converts responsive prop objects to CSS class strings:

import { getResponsiveClasses } from '@akitectio/aki-ui'

const classes = getResponsiveClasses({
  base: 'grid-cols-1',
  md: 'grid-cols-2',
  lg: 'grid-cols-3'
})
// Returns: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"

breakpoints constant

Access the breakpoint values directly for custom media queries:

import { breakpoints } from '@akitectio/aki-ui'

// Use in custom CSS or styled-components
const customMediaQuery = `@media (min-width: ${breakpoints.md}px)`

// Available values:
// breakpoints.sm = 640
// breakpoints.md = 768  
// breakpoints.lg = 1024
// breakpoints.xl = 1280
// breakpoints['2xl'] = 1536

Best Practices

1. Mobile-First Approach

Always start with the mobile layout using the base key, then progressively enhance for larger screens.

2. Use Semantic Breakpoints

Choose breakpoints based on your content and design needs, not just device sizes.

3. Test on Real Devices

While browser dev tools are great for development, always test on real devices to ensure optimal user experience.

4. Performance Considerations

The breakpoint hooks use event listeners that clean up automatically. Use them liberally without worrying about performance impact.