uxio/ui | Open-source UI library based on shadcn

Extended Features

ItemGroup supports a variant prop: default (size-aware vertical gaps) vs grouped (flush stacked items)

Install

Configure your registry in components.json:

{
  "registries": {
    "@uxio": "https://ui.uxio.dev/r/styles/{style}/{name}.json"
  }
}

Then run:

npx shadcn@latest add @uxio/item

Usage

import { Item, ItemContent, ItemDescription, ItemGroup, ItemTitle } from "@/components/ui/item"

export function ItemGroupedExample() {
  return (
    <ItemGroup variant="grouped" className="w-full max-w-md">
      <Item variant="outline">
        <ItemContent>
          <ItemTitle>First</ItemTitle>
          <ItemDescription>Short description.</ItemDescription>
        </ItemContent>
      </Item>
      <Item variant="outline">
        <ItemContent>
          <ItemTitle>Second</ItemTitle>
        </ItemContent>
      </Item>
    </ItemGroup>
  )
}

Examples

Default ItemGroup

Standard spacing; gap tightens when the group includes sm or xs items.

Default size

Uses the default group gap.

Small item

With a sm item in the group, the default variant tightens vertical gap via has-data-[size=sm]:gap-2.5.

Grouped ItemGroup

Use with outlined items to create a single visual stack.

First

Grouped variant merges inner borders and corner radius.

Second (sm)

Size-aware gap utilities are not applied on grouped groups.

Third