Filter bar
One row above a list: search, filters, range; applies at once; Clear filters while filtered.
Reference: Cloudflare logs (crawl/cloudflare-08.png), OpenRouter Logs (openrouter-p5.png)
Preview
| Domain | Status | Consent rate | Actions | |||
|---|---|---|---|---|---|---|
| Demo PG | shop.example | Live | 62% | 47,138 | ||
| Fence Supplies | thefence.uk | Live | 71% | 18,320 | ||
| Northwind Coffee | northwind.example | Not on the site yet | Too few views | 0 | ||
| Atlas Outdoor | atlas.example | Meta refuses events | 58% | 92,410 | ||
| Brightside Dental | brightside.example | Paused | 64% | 3,205 |
Showing 1–5 of 5
Rows per page
Focus rings
| Domain | Status | Consent rate | Actions | |||
|---|---|---|---|---|---|---|
| Demo PG | shop.example | Live | 62% | 47,138 | ||
| Fence Supplies | thefence.uk | Live | 71% | 18,320 | ||
| Northwind Coffee | northwind.example | Not on the site yet | Too few views | 0 | ||
| Atlas Outdoor | atlas.example | Meta refuses events | 58% | 92,410 | ||
| Brightside Dental | brightside.example | Paused | 64% | 3,205 |
Showing 1–5 of 5
Rows per page
In each theme: Default · Trackable · SkillDecks · BetterMarketer
Install
npx shadcn@4.23.0 add https://ui.dobrin-dobrev.co.uk/r/filter-bar.json
Into an app set up with shadcn init --base radix; the parts it uses come with it.
Files
- registry/default/blocks/filter-bar.tsx → components/blocks/filter-bar.tsx