Box

children

this is a box

this is a box

className

$as

import * as React from "react";
import { Box } from "spaceweb/box";

export default () => {
  return (
    <Box
      className="border border-solid spr-border-02 spr-text-04 h-40 w-40 flex justify-center items-center"
      $as="section"
    >
      this is a box
    </Box>
  );
}

import * as React from "react";
import { Box } from "spaceweb/box";

export default () => {
  return (
    <Box
      className="border border-solid spr-border-02 spr-text-04 h-40 w-40 flex justify-center items-center"
      $as="section"
    >
      this is a box
    </Box>
  );
}

Box is a layout primitive which can serve as a wrapper component providing most of the CSS utilities.

Examples

Bordered Container

Upload (Click Me)

Error

Box className

Hover me (I am styled with className)

Overridden Box

As a section

As an labelAs a spanAs italics element

Mockup Component

Jimi Hendrix

Box Override API

This is styled with overrides API

Box props

Name	Type	Description
$as	string	Component to replace the default div container
children	react node	Visible label.
className	string	Utility class names to be provided to Box
overrides	custom	Lets you customize all aspects of the component.

You can check the implementation of the component for more details.

Box exports

You can import this module like so:

import {Box} from 'spaceweb/box'

It exports the following components or utility functions:

🏁
Getting started

📖
Guides

📦
Packages

🖇
Components

📊
Charts

Box