Box

Box renders a div with display: flex and convenience props for common layout patterns.

Import

import { Box } from "@fcannizzaro/streamdeck-react";

Props

interface BoxProps {
  className?: string;
  center?: boolean;
  padding?: number;
  background?: string;
  borderRadius?: number;
  gap?: number;
  direction?: "row" | "column";
  style?: CSSProperties;
  children?: ReactNode;
}

Prop	Description
`center`	Sets `alignItems` and `justifyContent` to `'center'`
`padding`	Padding in pixels
`background`	Background color (`backgroundColor`)
`borderRadius`	Border radius in pixels
`gap`	Gap between children in pixels
`direction`	Flex direction. Default: `'column'`
`className`	Tailwind class string
`style`	Additional inline styles (merged last, can override shorthands)

Example

For most layouts, prefer Tailwind classes via className directly on <div> elements:

<div className="flex flex-col items-center justify-center gap-1 rounded-xl bg-[#1a1a1a] p-2">
  <span className="text-[12px] text-[#888]">LABEL</span>
  <span className="text-[24px] font-bold text-white">42</span>
</div>

Box provides shorthand props as a convenience wrapper when you prefer a prop-based API:

<Box center padding={8} background="#1a1a1a" borderRadius={12} gap={4}>
  <Text size={12} color="#888">
    LABEL
  </Text>
  <Text size={24} color="white" weight={700}>
    42
  </Text>
</Box>

Notes

Box is purely optional. Prefer raw <div> elements with Tailwind classes for consistency.
Default flexDirection is 'column'.

Import

Props

Example

Notes

On this page