Definition List

Data Display

Term-description pair listing.

Preview

Name: ParamUI Component Library
Version: 1.0.0
License: MIT

Usage

example.jsx

import { DefinitionList, DefinitionTerm, DefinitionDescription } from "@/components/ui/definition-list";

export default function Example() {
  return <DefinitionList />;
}

Source Code

Copy this file into components/ui/definition-list.jsx in your project.

definition-list.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const DefinitionList = forwardRef(({ className, ...props }, ref) => (
  <dl ref={ref} className={cn("space-y-4", className)} {...props} />
));
DefinitionList.displayName = "DefinitionList";

const DefinitionTerm = forwardRef(({ className, ...props }, ref) => (
  <dt ref={ref} className={cn("text-sm font-medium text-foreground", className)} {...props} />
));
DefinitionTerm.displayName = "DefinitionTerm";

const DefinitionDescription = forwardRef(({ className, ...props }, ref) => (
  <dd ref={ref} className={cn("mt-1 text-sm text-muted-foreground", className)} {...props} />
));
DefinitionDescription.displayName = "DefinitionDescription";

export { DefinitionList, DefinitionTerm, DefinitionDescription };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge