Skip to content
ikada

Description List

Term and details pairs: an account, a deployment.

0.8 kB gzipSource Registry JSON

DescriptionList playground

Name
robin
Region
eu-west
Domain
robin.sproutboat.app
Status
Live

Props

layout

Installation

npx shadcn@latest add https://sproutboat.com/ikada/r/description-list.json

The CLI writes components/ikada/description-list.tsx and merges the ikada theme into your CSS. Or take it from the package: import { DescriptionList } from "@sproutboat/ikada";

Usage

import { DescriptionList } from "@/components/ikada/description-list";

const items = [
  { id: "name", term: "Name", details: "robin" },
  { id: "region", term: "Region", details: "eu-west" },
  { id: "domain", term: "Domain", details: "robin.sproutboat.app", mono: true },
  {
    id: "status",
    term: "Status",
    details: (
      <Badge tone="success" dot live>
        Live
      </Badge>
    ),
  },
];

<DescriptionList items={items} />

Examples

Inline

Terms sit beside their details once the list is 32rem wide; narrower, they stack.
Name
robin
Region
eu-west
Domain
robin.sproutboat.app
Status
Live

Stacked

Each term above its details, at any width.
Name
robin
Region
eu-west
Domain
robin.sproutboat.app
Status
Live

Props

DescriptionListProps
PropTypeDescription
itemsrequiredreadonly DescriptionItem[]Term and details pairs, in order, each with a stable id.
layout"inline" | "stacked"`stacked` puts each term above its details; `inline` puts them side by side from 32rem up. Default `inline`.

Also takes every prop of Omit<ComponentProps<"dl">, "children">.

Source: src/components/description-list.tsx