Guide
Components
Box Item

BoxItem Component Usage

ℹ️

This component is used to display a box item and the BoxItem children prop is used to display the content of the box item.

Example Usage

ℹ️

Here is an example of how to use the BoxItem component:

import { BoxItem } from "@/ui";
 
export const MyComponent = () => (
  <BoxItem>
    <div>Box Item Content</div>
  </BoxItem>
);

Props

ℹ️

Here is a list of all the props that can be passed to the BoxItem component:

NameTypeDefaultDescription
variantstringbaseThe variant of the box item. Valid values are primary, secondary, accent, neutral, success, warning, danger, info, base, custom
classNamestringnullThe class name of the box item
roundedstringnoneThe border radius of the box item. Valid values are none, sm, md, lg, xl, full
borderstring1The border width of the box item. Valid values are none, 1, 2
borderColorstringbaseThe border color of the box item. Valid values are primary, secondary, accent, neutral, success, warning, danger, info, base
childrennodenullThe content of the box item

Variants

ℹ️

Here is a list of all the variants that can be passed to the variant prop:

NameDescription
primaryThe primary variant of the box item.
secondaryThe secondary variant of the box item.
accentThe accent variant of the box item.
neutralThe neutral variant of the box item.
successThe success variant of the box item.
warningThe warning variant of the box item.
dangerThe danger variant of the box item.
infoThe info variant of the box item.
baseThe base variant of the box item.
customThe custom variant of the box item.

Rounded

ℹ️

Here is a list of all the values that can be passed to the rounded prop:

NameDescription
noneThe box item will not have rounded corners.
smThe box item will have small rounded corners.
mdThe box item will have medium rounded corners.
lgThe box item will have large rounded corners.
xlThe box item will have extra large rounded corners.
fullThe box item will have full rounded corners.

Border

ℹ️

Here is a list of all the values that can be passed to the border prop:

NameDescription
noneThe box item will not have a border.
1The box item will have a border with a width of 1px.
2The box item will have a border with a width of 2px.

Border Color

ℹ️

Here is a list of all the variants that can be passed to the borderColor prop:

NameDescription
primaryThe primary variant of the box item border.
secondaryThe secondary variant of the box item border.
accentThe accent variant of the box item border.
neutralThe neutral variant of the box item border.
successThe success variant of the box item border.
warningThe warning variant of the box item border.
dangerThe danger variant of the box item border.
infoThe info variant of the box item border.
baseThe base variant of the box item border.

Customization Example

ℹ️

Here is an example of how to use the custom variant:

import { BoxItem } from "@/ui";
 
export const MyComponent = () => (
  <BoxItem
    variant="custom"
    className={"bg-gradient-to-b from-base-content/5 to-base-content/0"}
    borderColor="primary"
    rounded="md"
    border="2"
  >
    <div>Box Item Content</div>
  </BoxItem>
);
BadgeBreadcrumbs