Directory Site
Business directory: search, filters, listing cards, detail view.
Install
npx shadcn@latest add "https://webberui.com/r/directory-site.json?t=<install token>"The whole page lands in app/templates/directory-site/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.
Sections it ships with
Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.
- 1
Nav Bar & Search Hero
A branded nav bar over a gradient headline, a live search box and popular tags, with the listing count underneath.
hero - 2
This Week's Picks
Three editor-picked tools pinned to the top in gradient-capped cards, each with a rating, tags and a hover lift.
gallery - 3
Category Browsing & Filters
Category pills and tag filters narrow a grid of listing cards live, with saving, load-more and an empty state.
product - 4
Submit a Listing
A gradient card invites makers to submit a tool for free; name and email flip it into a success state.
cta - 5
Footer
Brand blurb, social links and three columns of navigation, closing with copyright and a nod to the makers.
footer
What you get is source code
Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.
Browse the other 103 templates →