Skip to main content

Container

Responsive content wrapper that centers your app and constrains width based on theme breakpoints.

Import​

import { Container } from '@lazy-panda-ui/lazy-panda-ui';

Usage​

<Container>
  <Content />
</Container>

Override maxWidth and padding​

<Container maxWidth={960} padding="lg">
  <Content />
</Container>

Theming​

import { ThemeProvider, createTheme, defaultTheme } from '@lazy-panda-ui/lazy-panda-ui/theme';

const theme = createTheme(defaultTheme, {
  container: {
    breakpoints: { sm: 360, md: 768, lg: 1024, xl: 1440 },
    maxWidths: { sm: 560, md: 840, lg: 1080, xl: 1320 },
    paddingX: { sm: 12, md: 16, lg: 24 },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Container>
        <Content />
      </Container>
    </ThemeProvider>
  );
}