> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mzizi.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Resource index pattern
> List and table pages — filtering, sorting, pagination, loading skeletons and an empty state that gives the reader something to do.
For pages that display a collection people browse and filter — events, articles, locations,
transactions.
## Anatomy
1. **Page header** — title, description, primary action
2. **Filter bar** — search, category filters, sort
3. **Content** — a table or a card grid
4. **Pagination**
5. **Empty state** — for when nothing matches
## Layout
```tsx theme={null}
Events
Browse upcoming events
```
## Table or card grid
| Use a table when | Use a card grid when |
| --------------------------------- | ----------------------------------- |
| Items have many comparable fields | Items are visually distinct |
| People scan and compare | Items carry images or rich content |
| Sorting by column matters | The mobile layout needs flexibility |
| Data density is high | Content lengths vary |
### Table
```tsx theme={null}
```
A wide table scrolls inside its own container. It must never push the page sideways — a
horizontally scrolling page on a phone is how a reader loses the navigation.
### Card grid
```tsx theme={null}
{items.map((item) => (
{item.name}
{item.description}
))}
```
## Filtering
```tsx theme={null}
```
```bash theme={null}
npx shadcn@latest add \
https://mzizi.dev/api/v1/ui/filter-bar \
https://mzizi.dev/api/v1/ui/search-bar \
https://mzizi.dev/api/v1/ui/data-table \
https://mzizi.dev/api/v1/ui/empty
```
## Empty states
Say what the reader can do, not only that there is nothing here.
```tsx theme={null}
No events found
Try adjusting your filters or create a new event.
```
Distinguish "no results for this filter" from "nothing here yet". They need different words and
different actions, and showing the first when the second is true reads as a bug.
## Loading
Skeletons should match the shape of what is coming, so the layout does not jump when it
arrives.
```tsx theme={null}
{/* Table */}