Box

Box displays a versatile container, by default a div.

Import

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

Usage

The Box is the root component from which every other component comes from. It has numerous use cases.

<Box
  w="100%"
  px={fr(10)}
  py={fr(6)}
  br="base"
  cs="pointer"
  bg={(theme) => (theme.mode === "dark" ? ["base", 700] : "primary")}
>
  The Box component is a versatile container that provides a flexible and
  customizable layout for building UI components.
</Box>

Versatile Component

<Box
  as="a"
  href="https://www.google.com"
  target="_blank"
  w="100%"
  px={fr(10)}
  py={fr(6)}
  br="base"
  cs="pointer"
  bg={[["base", 600], { hover: ["base", 700] }]}
  ta="center"
  td="underline"
>
  Click Me!
</Box>

API

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

- Box

Go BackBadge

Up NextBreadcrumb