Important Note
This is the documentation for gluestack-ui v2 (beta). For @gluestack-ui/themed (stable) documentation, refer to
gluestack-ui v1.
This is an illustration of Box component.
<Box className="bg-primary-500 p-5">
<Text className="text-typography-0">This is the Box</Text>
Installation
Run the following command:
Step 1: Copy and paste the following code into index.tsx in your project.
import React from "react"
import { View, ViewProps } from "react-native"
import type { VariantProps } from "@gluestack-ui/nativewind-utils"
import { boxStyle } from "./styles"
type IBoxProps = ViewProps &
VariantProps<typeof boxStyle> & { className?: string }
const Box = React.forwardRef<React.ElementRef<typeof View>, IBoxProps>(
({ className, ...props }, ref) => {
<View ref={ref} {...props} className={boxStyle({ class: className })} />
Important Note
Note:
Step 2 is optional and only required if you want to add support for React Server Components, You can skip this and jump to Step 3 directly if you don't have this requirement. Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
import React from "react"
import { boxStyle } from "./styles"
import type { VariantProps } from "@gluestack-ui/nativewind-utils"
type IBoxProps = React.ComponentPropsWithoutRef<"div"> &
VariantProps<typeof boxStyle> & { className?: string }
const Box = React.forwardRef<HTMLDivElement, IBoxProps>(
({ className, ...props }, ref) => {
<div ref={ref} className={boxStyle({ class: className })} {...props} />
Step 3: Copy and paste the following code into styles.tsx in your project.
import { tva } from "@gluestack-ui/nativewind-utils/tva"
import { isWeb } from "@gluestack-ui/nativewind-utils/IsWeb"
? "flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none"
export const boxStyle = tva({
Step 4: Update the import paths to match your project setup.
API Reference
To use this component in your project, include the following import statement in your file.
import { Box } from "@/components/ui/box"
export default () => <Box />
Component Props
This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
Box
Renders a <div /> on web and a View on native.
Platform | Output |
|---|
Web | <div /> |
Native | <View /> |