1 GitHub star = 1 new component.

Star the repo
Data Displaychipsfilterdata

Filter Chips List

Dense cluster of data badges with icons and values.

All AssetsImagesVideosDocsMusic

Usage

Copy and paste this code into your React component:

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

<DataChipsGroup>Content</DataChipsGroup>

Manual Installation

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

DataChipsGroup.tsx
'use client';

import './DataChipsGroup.css';

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

export function DataChipsGroup({}: DataChipsGroupProps) {
  return (
    <>
      <div className="chips-row" data-rk-9c64b0="">
        <span className="chip-active" data-rk-9c64b0="">All Assets</span>
        <span data-rk-9c64b0="">Images</span>
        <span data-rk-9c64b0="">Videos</span>
        <span data-rk-9c64b0="">Docs</span>
        <span data-rk-9c64b0="">Music</span>
      </div>
    </>
  );
}

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

.chips-row:where([data-rk-9c64b0]) { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.chips-row:where([data-rk-9c64b0])::-webkit-scrollbar { display: none; }
.chips-row:where([data-rk-9c64b0]) span:where([data-rk-9c64b0]) { padding: 6px 16px; background: #1e293b; border: 1px solid rgba(255, 255, 255, 0.05); color: #94a3b8; font-size: 0.8rem; border-radius: 100px; cursor: pointer; white-space: nowrap; transition: 0.2s; font-weight: 600; }
.chips-row:where([data-rk-9c64b0]) span:hover:where([data-rk-9c64b0]) { color: #fff; border-color: rgba(255, 255, 255, 0.2); }
.chip-active:where([data-rk-9c64b0]) { background: #6366f1 !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); }

Quick Info

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