Responsive

Components for showing/hiding content based on screen size.

Import

import { Show, Hide } from 'asterui'

Breakpoints

Uses the same breakpoints as Tailwind CSS:

Breakpoint	Min Width
xs	0px
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

Examples

Show Above Breakpoint

Show content only at medium screens and above.

</>

Visible on md and larger

import { Show, Button } from 'asterui'

function App() {
  return (
      <Show above="md">
        <Button color="primary">Visible on md and larger</Button>
      </Show>
    )
}

export default App

Hide Below Breakpoint

Hide content on small screens.

</>

This is hidden on small screens

import { Hide, Alert } from 'asterui'

function App() {
  return (
      <Hide below="md">
        <Alert type="info">This is hidden on small screens</Alert>
      </Hide>
    )
}

export default App

Show At Specific Breakpoints

Show content only at specific breakpoints.

</>

Tablet or small desktop (md/lg)

import { Show, Alert } from 'asterui'

function App() {
  return (
      <Show at="xs">
        <Alert type="info">Mobile view (xs)</Alert>
      </Show>
      <Show at="sm">
        <Alert type="warning">Small screen (sm)</Alert>
      </Show>
      <Show at={['md', 'lg']}>
        <Alert type="success">Tablet or small desktop (md/lg)</Alert>
      </Show>
      <Show at={['xl', '2xl']}>
        <Alert type="info">Large desktop (xl/2xl)</Alert>
      </Show>
    )
}

export default App

Show Between Breakpoints

Show content within a range of breakpoints.

</>

Responsive Content

Visible on sm, md, and lg screens only

import { Show, Card } from 'asterui'

function App() {
  return (
      <Show between={['sm', 'lg']}>
        <Card title="Responsive Content" className="bg-base-200">
          Visible on sm, md, and lg screens only
        </Card>
      </Show>
    )
}

export default App

Responsive Layout

Build different layouts for mobile and desktop.

</>

Logo

HomeAboutContact

import { Show, Hide, Flex, Button } from 'asterui'

function App() {
  return (
      <Flex justify="between" align="center" className="p-4 bg-base-200 rounded-lg">
        <div className="font-bold">Logo</div>
        <Show above="md">
          <Flex gap="md">
            <Button variant="ghost" size="sm">
              Home
            </Button>
            <Button variant="ghost" size="sm">
              About
            </Button>
            <Button variant="ghost" size="sm">
              Contact
            </Button>
          </Flex>
        </Show>
        <Hide above="md">
          <Button variant="ghost" size="sm">
            Menu
          </Button>
        </Hide>
      </Flex>
    )
}

export default App

API

Show / Hide

Property	Description	Type	Default
children	Content to show/hide	React.ReactNode	-
above	Show/hide at this breakpoint and above	Breakpoint	-
below	Show/hide below this breakpoint	Breakpoint	-
at	Show/hide at exactly this breakpoint (or array of breakpoints)	Breakpoint | Breakpoint[]	-
between	Show/hide between two breakpoints (inclusive)	[Breakpoint, Breakpoint]	-
data-testid	Test ID for testing	string	-

Notes

• Uses JavaScript to detect breakpoint, not CSS media queries
• Only one condition prop (above, below, at, or between) should be used at a time
• Server-side rendering defaults to 1024px width (lg breakpoint)

See also: useBreakpoint hook for programmatic access to breakpoint info.