CardCards are containers that frame related content and actions.Storybook Source Ask ChatGPT Props PropTypecolor?"cyan" | "teal" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "neutral"layout?objectgap?object | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"height?object | "device" | "full" | "4xs" | "5xs" | "6xs" | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"radius?"round" | "3xs" | "none" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"direction?object | "vertical" | "horizontal"marginBottom?object | "-3xs" | "-6xl" | "-5xl" | "-4xl" | "-3xl" | "-2xl" | "-xl" | "-lg" | "-md" | "-sm" | "-xs" | "-2xs" | "auto" | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"marginLeft?object | "-3xs" | "-6xl" | "-5xl" | "-4xl" | "-3xl" | "-2xl" | "-xl" | "-lg" | "-md" | "-sm" | "-xs" | "-2xs" | "auto" | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"marginRight?object | "-3xs" | "-6xl" | "-5xl" | "-4xl" | "-3xl" | "-2xl" | "-xl" | "-lg" | "-md" | "-sm" | "-xs" | "-2xs" | "auto" | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"marginTop?object | "-3xs" | "-6xl" | "-5xl" | "-4xl" | "-3xl" | "-2xl" | "-xl" | "-lg" | "-md" | "-sm" | "-xs" | "-2xs" | "auto" | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"maxHeight?object | "4xs" | "5xs" | "6xs" | "3xs" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"maxWidth?object | "11/12" | "5/6" | "3/4" | "2/3" | "7/12" | "1/2" | "5/12" | "1/3" | "1/4" | "1/6" | "1/12" | "device" | "full" | "min-content" | "max-content" | "fit-content" | "4xs" | "5xs" | "6xs" | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"minHeight?object | "4xs" | "5xs" | "6xs" | "3xs" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"minWidth?object | "11/12" | "5/6" | "3/4" | "2/3" | "7/12" | "1/2" | "5/12" | "1/3" | "1/4" | "1/6" | "1/12" | "device" | "full" | "min-content" | "max-content" | "fit-content" | "4xs" | "5xs" | "6xs" | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"paddingBottom?object | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"paddingLeft?object | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"paddingRight?object | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"paddingTop?object | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"width?object | "11/12" | "5/6" | "3/4" | "2/3" | "7/12" | "1/2" | "5/12" | "1/3" | "1/4" | "1/6" | "1/12" | "device" | "full" | "min-content" | "max-content" | "fit-content" | "4xs" | "5xs" | "6xs" | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"border?objectmargin?object | "-3xs" | "-6xl" | "-5xl" | "-4xl" | "-3xl" | "-2xl" | "-xl" | "-lg" | "-md" | "-sm" | "-xs" | "-2xs" | "auto" | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"padding?object | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"inline?object | booleanwrap?object | booleanjustify?object | "baseline" | "start" | "end" | "center" | "stretch" | "space-evenly" | "space-between" | "space-around"marginX?object | "-3xs" | "-6xl" | "-5xl" | "-4xl" | "-3xl" | "-2xl" | "-xl" | "-lg" | "-md" | "-sm" | "-xs" | "-2xs" | "auto" | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"marginY?object | "-3xs" | "-6xl" | "-5xl" | "-4xl" | "-3xl" | "-2xl" | "-xl" | "-lg" | "-md" | "-sm" | "-xs" | "-2xs" | "auto" | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"paddingX?object | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"paddingY?object | "3xs" | "none" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs"shadow?"none" | "lg" | "md" | "sm"bleedX?booleanbleedY?booleanalign?object | "baseline" | "start" | "end" | "center" | "stretch"reversed?object | booleanvariant?"raised" | "outlined" | "muted" | "soft" | "subtle"children?ReactNodeclassName?stringstyle?StylePropertiesEdit on GitHubButtonButtons allow users to perform actions and make choices with a single tap.CheckboxCheckboxes allow users to select one or more options from a set. Checkboxes can be used standalone or in groups.
