UI ComponentsData
Directory
Directory listing with search, filters, categories, and item cards
A searchable directory listing for companies, people, resources, integrations, or any collection of items.
Structure
┌─────────────────────────────────────────────────────┐
│ header │
│ ┌─────────────────────────────────────────────────┐ │
│ │ title description │ │
│ └─────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────┤
│ toolbar │
│ ┌─────────────┐ ┌────────┐ ┌────────┐ ┌──────────┐ │
│ │ 🔍 search │ │ filter │ │ filter │ │ sort ▾ │ │
│ └─────────────┘ └────────┘ └────────┘ └──────────┘ │
├─────────────────────────────────────────────────────┤
│ categories │
│ │ All │ Category A │ Category B │ Category C │ │
├─────────────────────────────────────────────────────┤
│ items │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌─────────┐ │
│ │ item-card│ │ item-card│ │ item-card│ │item-card│ │
│ │ ┌──────┐ │ │ ┌──────┐ │ │ ┌──────┐ │ │ ┌─────┐ │ │
│ │ │image │ │ │ │image │ │ │ │image │ │ │ │image│ │ │
│ │ ├──────┤ │ │ ├──────┤ │ │ ├──────┤ │ │ ├─────┤ │ │
│ │ │title │ │ │ │title │ │ │ │title │ │ │ │title│ │ │
│ │ │desc │ │ │ │desc │ │ │ │desc │ │ │ │desc │ │ │
│ │ │tags │ │ │ │tags │ │ │ │tags │ │ │ │tags │ │ │
│ │ └──────┘ │ │ └──────┘ │ │ └──────┘ │ │ └─────┘ │ │
│ └──────────┘ └──────────┘ └──────────┘ └─────────┘ │
├─────────────────────────────────────────────────────┤
│ pagination │
└─────────────────────────────────────────────────────┘Usage
<Directory
title="Integrations"
description="Connect with your favorite tools"
items={integrations}
categories={[
{ label: 'All', slug: 'all' },
{ label: 'Analytics', slug: 'analytics' },
{ label: 'CRM', slug: 'crm' },
{ label: 'Marketing', slug: 'marketing' },
]}
filters={[
{ name: 'pricing', label: 'Pricing', options: ['Free', 'Paid', 'Freemium'] },
{ name: 'platform', label: 'Platform', options: ['Web', 'Mobile', 'Desktop'] },
]}
sort={[
{ label: 'Popular', value: 'popular' },
{ label: 'Newest', value: 'newest' },
{ label: 'A-Z', value: 'name' },
]}
layout="grid"
/>