1 GitHub star = 1 new component.

Star the repo
Data Displaymetadatapillsdata

Metadata Pill List

Attribute pill badges showing key: value pairs.

OS:MacOS
Ver:14.5
Arch:ARM64

Usage

Copy and paste this code into your React component:

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

<KeyValuePillGroup>Content</KeyValuePillGroup>

Manual Installation

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

KeyValuePillGroup.tsx
'use client';

import './KeyValuePillGroup.css';

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

export function KeyValuePillGroup({}: KeyValuePillGroupProps) {
  return (
    <>
      <div className="meta-row" data-rk-ffdece="">
        <div className="m-pill" data-rk-ffdece="">OS:<span data-rk-ffdece="">MacOS</span></div>
        <div className="m-pill" data-rk-ffdece="">Ver:<span data-rk-ffdece="">14.5</span></div>
        <div className="m-pill" data-rk-ffdece="">Arch:<span data-rk-ffdece="">ARM64</span></div>
      </div>
    </>
  );
}

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

.meta-row:where([data-rk-ffdece]) { display: flex; gap: 8px; flex-wrap: wrap; }
.m-pill:where([data-rk-ffdece]) { background: rgba(0,0,0,0.2); color: #64748b; font-size: 0.7rem; padding: 4px 12px; border-radius: 8px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.05); }
span:where([data-rk-ffdece]) { color: #e2e8f0; margin-left: 6px; }

Quick Info

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