1 GitHub star = 1 new component.

Star the repo
Data Displaydatalistdetails

Data Key-Value List

Two-column key-value list with subtle borders.

Module Name
AuthEngine
Version
1.4.2
Status
Deployment Ready

Usage

Copy and paste this code into your React component:

tsx
import { DescriptionListHoriz } from 'react-component-kit-ui/data';

<DescriptionListHoriz>Content</DescriptionListHoriz>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/DescriptionListHoriz.tsx + DescriptionListHoriz.css:

DescriptionListHoriz.tsx
'use client';

import './DescriptionListHoriz.css';

/** DescriptionListHoriz โ€” ported from astro-component-kit. */
export interface DescriptionListHorizProps {
}

export function DescriptionListHoriz({}: DescriptionListHorizProps) {
  return (
    <>
      <dl className="desc-list" data-rk-9f0e85="">
        <div className="row" data-rk-9f0e85=""><dt data-rk-9f0e85="">Module Name</dt><dd data-rk-9f0e85="">AuthEngine</dd></div>
        <div className="row" data-rk-9f0e85=""><dt data-rk-9f0e85="">Version</dt><dd data-rk-9f0e85="">1.4.2</dd></div>
        <div className="row" data-rk-9f0e85=""><dt data-rk-9f0e85="">Status</dt><dd data-rk-9f0e85="">Deployment Ready</dd></div>
      </dl>
    </>
  );
}

export default DescriptionListHoriz;
DescriptionListHoriz.css
/* DescriptionListHoriz โ€” ported from astro-component-kit (data/DescriptionListHoriz.astro) */

.desc-list:where([data-rk-9f0e85]) { display: flex; flex-direction: column; width: 100%; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.1); }
.row:where([data-rk-9f0e85]) { display: grid; grid-template-columns: 140px 1fr; padding: 0.75rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.85rem; }
.row:last-child:where([data-rk-9f0e85]) { border-bottom: none; }
dt:where([data-rk-9f0e85]) { color: #64748b; font-weight: 600; }
dd:where([data-rk-9f0e85]) { color: #fff; margin: 0; }

Quick Info

Category
Data Display
Filename
DescriptionListHoriz.tsx
Dependencies
None โ€” pure React + CSS
Tags
datalistdetails