// Data Display

Data List

A list of label-value pairs.

// Rendering preview…

// Install

npx shadcn@latest add @dakik/data-list

// Usage

1import { DataList, DataListItem, DataListItemLabel, DataListItemValue } from "@/components/ui/data-list";
2
3<DataList />

// Code

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import type React from "react";
5import { cn } from "@/lib/utils";
6
7interface DataListProps extends React.ComponentProps<typeof ark.dl> {
8  /**
9   * The orientation of the data list.
10   *
11   * @default "horizontal"
12   */
13  orientation?: "horizontal" | "vertical";
14}
15
16export const DataList = (props: DataListProps) => {
17  const { orientation = "horizontal", className, children, ...rest } = props;
18
19  return (
20    <ark.dl
21      className={cn(
22        "group/data-list",
23        "flex flex-col gap-1",
24        "text-sm",
25        className
26      )}
27      data-orientation={orientation}
28      data-slot="data-list"

// Dependencies

@ark-ui/react