Box
Box is the most abstract component on top of which all other AdaptUI components are built. It uses Arikits's Role component internally.
Imports
import { Box } from "@adaptui/react-tailwind";
Usage
Box
As
prop
By using the as
prop, you can control which element should be rendered. If you
are using typescript, Box is fully typesafe too.
You can either pass string elements or pass ReactNode
to the as
prop.
Follows all the Ariakits composition rules Arikits Composition Docs
Tailwind CSS example

“Tailwind CSS is the only framework that I've seen scale on large teams. It easy to customize, adapts to any design, and the build size is tiny.”
Sarah Dayan
Staff Engineer, Algolia
Card example
- Total Subscribers
- 71,897
- Avg. Open Rate
- 58.16%
API Reference
Prop | Type | Default |
---|---|---|
as | string | React.ElementType | div |
Last updated on June 6, 2023