Data Display chipsfilterdata

Filter Chips List

Group of interactive chips for data filtering.

All Assets Images Videos Docs Music

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { FilterChipsList } from 'astro-component-kit';
---

<DataChipsGroup>Content</DataChipsGroup>
--- import { FilterChipsList } from 'astro-component-kit'; --- <DataChipsGroup>Content</DataChipsGroup>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/FilterChipsList.astro and paste the following code:

astro 
---
---
<div class="chips-row">
  <span class="chip-active">All Assets</span>
  <span>Images</span>
  <span>Videos</span>
  <span>Docs</span>
  <span>Music</span>
</div>
<style>
  .chips-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
  .chips-row::-webkit-scrollbar { display: none; }
  .chips-row span { 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 span:hover { color: #fff; border-color: rgba(255, 255, 255, 0.2); }
  .chip-active { background: #6366f1 !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); }
</style>
--- --- <div class="chips-row"> <span class="chip-active">All Assets</span> <span>Images</span> <span>Videos</span> <span>Docs</span> <span>Music</span> </div> <style> .chips-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; } .chips-row::-webkit-scrollbar { display: none; } .chips-row span { 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 span:hover { color: #fff; border-color: rgba(255, 255, 255, 0.2); } .chip-active { background: #6366f1 !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); } </style>

Quick Info

Category
Data Display
Filename
FilterChipsList.astro
Dependencies
None — pure Astro + CSS
Tags
chipsfilterdata