Stack

The skeleton is a feedback component to display the loading state of some component.

import { Stack } from '@backyard-ui/core';

Use the direction prop to change the orientation.

You can also make it responsive by passing array or object values into the direction prop.

Use the isGrow property to set the same width/height across the elements

You can make it responsive by passing array or object values into the spacing prop.

• children required
  Description The children elements

  Type

  ReactNode
• asChild
  Description Change the component to the HTML tag or custom component of the only child

  Type

  boolean
• align
  Description The CSS `align-items` property

  Type

  ResponsiveValue<"center" | "baseline" | "flex-start" | "flex-end" | "stretch">
• direction
  Description The CSS `flex-direction` property

  Type

  ResponsiveValue<"row" | "row-reverse" | "column" | "column-reverse">

  Default

  row
• spacing
  Description The space between its children

  Type

  ResponsiveValue<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | ... 6 more ... | "3.5">

  Default

  4
• justify
  Description The CSS `justify-content` property

  Type

  ResponsiveValue<"center" | "baseline" | "normal" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | "space-evenly">
• isGrow
  Description If true the component will occupy remaining space by setting 'flex-grow: 1'

  Type

  boolean

  Default

  false
• isWrap
  Description The CSS `flex-wrap` property

  Type

  boolean

  Default

  false