1 GitHub star = 1 new component.

Star the repo
Data Displaytagsclouddata

Metric Tag Cloud

Tag cloud with item count badges.

ReactReactNext.jsVueSvelte

Usage

Copy and paste this code into your React component:

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

<TagCloudData>Content</TagCloudData>

Manual Installation

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

TagCloudData.tsx
'use client';

import './TagCloudData.css';

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

export function TagCloudData({}: TagCloudDataProps) {
  return (
    <>
      <div className="t-cloud" data-rk-eddf05="">
        <span className="t-pill" data-rk-eddf05="">React</span>
        <span className="t-pill t-active" data-rk-eddf05="">React</span>
        <span className="t-pill" data-rk-eddf05="">Next.js</span>
        <span className="t-pill" data-rk-eddf05="">Vue</span>
        <span className="t-pill" data-rk-eddf05="">Svelte</span>
      </div>
    </>
  );
}

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

.t-cloud:where([data-rk-eddf05]) { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.t-pill:where([data-rk-eddf05]) { padding: 4px 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 100px; color: #94a3b8; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: 0.2s; }
.t-pill:hover:where([data-rk-eddf05]), .t-active:where([data-rk-eddf05]) { background: #6366f1; color: #fff; border-color: transparent; box-shadow: 0 4px 10px rgba(99,102,241,0.3); }

Quick Info

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