Develop ultra fast with Prismane 🎉


Container displays a container that constrains the content, whilst still remaining fluid.


import { Container } from "@prismane/core";


By default, the Container component has a set maxSize of base, which is 28rem.

  Containing text within a well-designed container is a powerful technique to
  captivate users' attention. By providing space around the text, the content
  gains prominence and becomes visually appealing. This focused presentation not
  only enhances readability but also guides users' eyes to the essential
  message. A thoughtful container complements the overall aesthetics of the
  interface and creates a sense of order and elegance. Whether it's a subtle
  drop shadow or a vibrant background, the container elevates the text, making
  it stand out amidst other elements.

Container Sizes

<Flex direction="column" gap={fr(1)} grow>
  <Container maxSize="xs" bg="red">
    xs Size Container
  <Container maxSize="sm" bg="green">
    sm Size Container
  <Container maxSize="base" bg="teal">
    base Size Container
  <Container maxSize="md" bg="copper">
    md Size Container
  <Container maxSize="lg" bg="ruby">
    lg Size Container
  <Container maxSize="500px" bg="gray">
    500px Container


Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.