Box

A generic unstyled layout component that acts as a flexible foundation for building custom structures and semantics.

View in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { Box } from '@adaptavant/eds-core';

Basic Usage​

By default, Box renders as a div element. Use Tailwind CSS classes to style it.

This is a Box component
<Box
  className="
    bg-accent
    text-onPrimary
    p-4
    rounded-lg
    flex
    items-center
    justify-center
    h-32
  "
>
  This is a Box component
</Box>
View in Playroom

Polymorphic​

Box is polymorphic and can render as any HTML element using the as prop. This is useful for maintaining semantic HTML while applying custom styles.

Section Heading

This Box is rendered as a section element.

Article Title

This Box is rendered as an article element.

<Stack className="gap-4">
  {/* Render as a section */}
  <Box
    as="section"
    className="
      bg-neutral-subtle
      p-4
      rounded-lg
    "
  >
    <Box as="h2" className="text-heading-20 mb-2">
      Section Heading
    </Box>
    <Box as="p" className="text-body-14">
      This Box is rendered as a section element.
    </Box>
  </Box>

  {/* Render as an article */}
  <Box
    as="article"
    className="
      border
      border-secondary
      p-4
      rounded-lg
    "
  >
    <Box as="h3" className="text-heading-16 mb-2">
      Article Title
    </Box>
    <Box as="p" className="text-body-14">
      This Box is rendered as an article element.
    </Box>
  </Box>

  {/* Render as a button */}
  <Box
    as="button"
    className="
      bg-accent
      text-onPrimary
      px-4
      py-2
      rounded-md
      hover:bg-accent-hover
      transition-colors
    "
    onClick={() => alert('Clicked!')}
  >
    I'm a button!
  </Box>
</Stack>
View in Playroom

API Reference​

Box

PropDefaultDescription
as?'div'React.ElementType
The element type to render. Can be any valid HTML element (e.g., 'div', 'section', 'article', 'button') or a React component.
children?_React.ReactNode
The content to be rendered inside the Box.
className?''string
CSS class names to apply to the Box. Supports Tailwind CSS utility classes.
style?{}React.CSSProperties
Inline styles to apply to the Box.

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.