Group

A recessed container that holds a set of cards. Padding and gap are the same value, and the corner radius is concentric with the cards inside it.

src/components/ui/group.tsx

About

From the component's own source, where it was written.

A recessed container that holds a set of cards.

The padding and the gap are the same value at every size, so the space between two cards matches the space between a card and the container edge.

The radius is concentric: the group's corner is the card's corner plus the padding between them (--radius-group-* in index.css). Reusing the card's own radius would make the gap between the two curves pinch at the corners.

A horizontal group stacks below responsive — three cards side by side on a phone gives each of them about a hundred pixels, which is not a layout.

Install

npx astralyx-ui add group

Usage

import { Group } from '@/components/ui/group'
import { Card, CardBody } from '@/components/ui/card'

<Group>
  <Card><CardBody>Notifications</CardBody></Card>
  <Card><CardBody>Appearance</CardBody></Card>
</Group>

Composer

Change the props and the source below follows.

Notifications

Email me when a build finishes.

Appearance

Follow the system colour scheme.

Telemetry

Share anonymous usage data.

Props

orientation

size

even

tsx

<Group>
  <Card>
    <CardBody>Notifications</CardBody>
  </Card>
  <Card>
    <CardBody>Appearance</CardBody>
  </Card>
</Group>

Examples

Vertical

tsx

<Group>
  <Card><CardBody>Notifications</CardBody></Card>
  <Card><CardBody>Appearance</CardBody></Card>
</Group>

Horizontal and even

tsx

<Group orientation="horizontal" even>…</Group>

Sizes

tsx

<Group size="sm" /> <Group size="default" /> <Group size="lg" />

With a header card

tsx

<Group>
  <Card>
    <CardHeader>
      <CardTitle>Workspace</CardTitle>
      <CardDescription>Applies to everyone.</CardDescription>
    </CardHeader>
  </Card>
  <Card><CardBody>…</CardBody></Card>
</Group>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Group`

A recessed container that holds a set of cards.

Extends ComponentProps<'div'>.

Prop	Type	Default	Description
size	'sm' \| 'default' \| 'lg'	'default'	Padding and gap together — 12, 18 or 24px. Each size also picks the matching concentric radius.
orientation	'horizontal' \| 'vertical'	'vertical'	Stack the cards or lay them in a row. Horizontal wraps.
even	boolean	false	Give every child an equal share of the main axis. Mostly for horizontal groups.
responsive	Responsive	'sm'	Breakpoint a horizontal group becomes a row at. Below it the cards stack, so a row of three never squeezes into thirds of a phone screen. `false` keeps it a row at every width.
radius	--radius-group-*	—	Card radius plus the group padding, so the gap between the two curves stays even into the corners. Tunable in index.css.

Functions

Function	Signature	Description
groupVariants	(props?: { orientation?: 'horizontal' \| 'vertical'; size?: 'sm' \| 'default' \| 'lg'; even?: boolean }) => string	A recessed container that holds a set of cards.