Skip to Content
Dashflow Logo

Box Component

A comprehensive guide to using the Box component with examples, props, and best practices.

Overview

The Box component is a versatile container component that provides multiple variants for different use cases. Each variant has unique styling and behavior to suit various design needs.

Basic Usage

import { Box } from '@dashflowx/core'


export default function BoxExample() {
  return (
    <Box 
      variant="default"
      size="md"
      className="p-4 bg-gray-100 rounded-lg"
      boxItem="<p>This is content inside a Box component.</p>"
    />
  )
}

Preview:

This is content inside a Box component.

Props

PropTypeDefaultDescription
variantstring'default'The visual variant of the box
sizestring'md'The size of the box
classNamestring-Additional CSS classes to apply to the box
boxItemstring-HTML content to render inside the box

Variants

Default

No special styling, clean and minimal.

<Box 
  variant="default" 
  size="md" 
  boxItem="<p>Simple default box with no special styling.</p>" 
/>

Simple default box with no special styling.

Container

Centered layout with generous padding for page sections.

<Box 
  variant="container" 
  size="md" 
  boxItem="
    <h3>Container Title</h3>
    <p>Container variant with centered layout and padding.</p>
  " 
/>

Container Title

Container variant with centered layout and padding.

Card

Elevated card design with shadow and hover effects.

<Box 
  variant="card" 
  size="md" 
  boxItem="
    <h3 className='text-xl font-bold mb-2'>Card Title</h3>
    <p>Card variant with shadow and hover effects.</p>
  " 
/>

Card Title

Card variant with shadow and hover effects.

Spacing

Consistent vertical spacing between child elements.

<Box 
  variant="spacing" 
  size="md" 
  boxItem="
    <div className='p-2 bg-blue-100 rounded'>First item</div>
    <div className='p-2 bg-green-100 rounded'>Second item</div>
    <div className='p-2 bg-yellow-100 rounded'>Third item</div>
  " 
/>
First item
Second item
Third item

Flex

Horizontal layout with centered items and gap spacing.

<Box 
  variant="flex" 
  size="md" 
  boxItem="
    <span className='px-3 py-1 bg-blue-500 text-white rounded'>Left</span>
    <span className='px-3 py-1 bg-green-500 text-white rounded'>Right</span>
  " 
/>
LeftRight

Grid

2-column grid layout with gap spacing.

<Box 
  variant="grid" 
  size="md" 
  boxItem="
    <div className='p-2 bg-blue-100 rounded text-center'>Grid 1</div>
    <div className='p-2 bg-green-100 rounded text-center'>Grid 2</div>
    <div className='p-2 bg-yellow-100 rounded text-center'>Grid 3</div>
    <div className='p-2 bg-red-100 rounded text-center'>Grid 4</div>
  " 
/>
Grid 1
Grid 2
Grid 3
Grid 4

Responsive

Adaptive padding that scales with screen size.

<Box 
  variant="responsive" 
  size="md" 
  boxItem="
    <h4 className='font-semibold mb-2'>Responsive Box</h4>
    <p>This variant adapts to different screen sizes.</p>
  " 
/>

Responsive Box

This variant adapts to different screen sizes.

Interactive

Interactive design with border, cursor pointer, and hover effects.

<Box 
  variant="interactive" 
  size="md" 
  boxItem="
    <div className='text-center'>
      <span className='font-medium'>Click me!</span>
      <br/>
      <small>Hover to see effects</small>
    </div>
  " 
/>
Click me!
Hover to see effects

Gradient

Colorful gradient background with enhanced shadow.

<Box 
  variant="gradient" 
  size="md" 
  boxItem="
    <h3 className='text-xl font-bold mb-2'>Gradient Box</h3>
    <p>Beautiful gradient background with enhanced styling.</p>
  " 
/>

Gradient Box

Beautiful gradient background with enhanced styling.

Animated

Smooth animations with hover effects and scaling.

<Box 
  variant="animated" 
  size="md" 
  boxItem="
    <div className='text-center'>
      <h3 className='font-bold mb-2'>Animated Box</h3>
      <p>Hover to see animations!</p>
    </div>
  " 
/>

Animated Box

Hover to see animations!

Sizes

Small

Minimal padding and small text for compact layouts.

<Box 
  variant="default" 
  size="sm" 
  boxItem="<p className='text-sm'>Small size with minimal padding.</p>" 
/>

Small size with minimal padding.

Medium

Standard padding and text size for most use cases.

<Box 
  variant="default" 
  size="md" 
  boxItem="<p>Medium size with standard padding.</p>" 
/>

Medium size with standard padding.

Large

Generous padding and larger text for prominent content.

<Box 
  variant="default" 
  size="lg" 
  boxItem="<p className='text-lg'>Large size with generous padding.</p>" 
/>

Large size with generous padding.

Extra Large

Maximum padding and largest text for hero sections.

<Box 
  variant="default" 
  size="xl" 
  boxItem="<p className='text-xl'>Extra large size with maximum padding.</p>" 
/>

Extra large size with maximum padding.

Advanced Examples

Complex HTML Content

<Box 
  variant="card" 
  size="lg" 
  className="max-w-2xl mx-auto"
  boxItem="
    <div>
      <h2 className='text-2xl font-bold mb-4 text-center'>Advanced Box</h2>
      <div className='grid grid-cols-2 gap-4'>
        <div className='p-3 bg-blue-50 rounded'>
          <h3 className='font-semibold text-blue-800'>Feature 1</h3>
          <p className='text-blue-600'>Description of feature 1</p>
        </div>
        <div className='p-3 bg-green-50 rounded'>
          <h3 className='font-semibold text-green-800'>Feature 2</h3>
          <p className='text-green-600'>Description of feature 2</p>
        </div>
      </div>
    </div>
  "
/>

Advanced Box

Feature 1

Description of feature 1

Feature 2

Description of feature 2

Interactive Grid

<Box 
  variant="grid" 
  size="md" 
  className="bg-gray-50 p-6 rounded-xl"
  boxItem="
    <div className='p-3 bg-white rounded shadow hover:shadow-md transition-shadow cursor-pointer'>
      <h4 className='font-medium text-gray-800'>Grid Item 1</h4>
      <p className='text-sm text-gray-600'>Interactive content</p>
    </div>
    <div className='p-3 bg-white rounded shadow hover:shadow-md transition-shadow cursor-pointer'>
      <h4 className='font-medium text-gray-800'>Grid Item 2</h4>
      <p className='text-sm text-gray-600'>Interactive content</p>
    </div>
    <div className='p-3 bg-white rounded shadow hover:shadow-md transition-shadow cursor-pointer'>
      <h4 className='font-medium text-gray-800'>Grid Item 3</h4>
      <p className='text-sm text-gray-600'>Interactive content</p>
    </div>
    <div className='p-3 bg-white rounded shadow hover:shadow-md transition-shadow cursor-pointer'>
      <h4 className='font-medium text-gray-800'>Grid Item 4</h4>
      <p className='text-sm text-gray-600'>Interactive content</p>
    </div>
  "
/>

Grid Item 1

Interactive content

Grid Item 2

Interactive content

Grid Item 3

Interactive content

Grid Item 4

Interactive content

Best Practices

Choose the Right Variant

  • Use default for simple containers
  • Use container for page sections
  • Use card for content cards
  • Use spacing for lists with consistent gaps
  • Use flex for horizontal layouts
  • Use grid for grid layouts
  • Use responsive for adaptive designs
  • Use interactive for clickable elements
  • Use gradient for eye-catching backgrounds
  • Use animated for engaging interactions

Select Appropriate Sizes

  • Use sm for compact, dense layouts
  • Use md for standard content spacing
  • Use lg for prominent, spacious content
  • Use xl for hero sections and large content areas

HTML Content in boxItem

  • Use the boxItem attribute to pass HTML content
  • HTML content will be rendered inside the Box component
  • Combine with className for additional styling
  • Use self-closing tags when using the boxItem attribute

Accessibility Considerations

  • Ensure sufficient color contrast
  • Provide hover states for interactive variants
  • Use semantic HTML in your boxItem content
Edit this page on GitHub
previousOverview