Core

List View

A simple list surface with loading and empty states.

Variants

Cards

Q3 Report

Draft

Onboarding Guide

Published

Product Roadmap

Published

documents.tsx

<ListView<Doc>
  title="Documents"
  emptyMessage="No documents yet"
  query={{
    data: { pages: [{ data: docs, has_more: false }] },
    isLoading: false,
    isFetchingNextPage: false,
    hasNextPage: false,
    fetchNextPage: async () => undefined,
  }}
  renderCard={(items) => items.map((d) => <Card key={d.id} {...d} />)}
  renderList={(items) => items.map((d) => <Row key={d.id} {...d} />)}
/>

Dependencies

@/components/ui/button
@/components/ui/dialog
@/components/ui/skeleton
@/lib/utils

Usage

Install

bun add lucide-react clsx tailwind-merge

Usage

import { ListView } from '@/components/module/list-view'