Templates
v1.0.0Added in 1.6.0
A SaaS integrations directory: hero search, category sidebar, cards with install switches, a detail drawer, a request form and an API band.
Type in the hero search (press / to focus it) and the directory filters live by name, description and category, with the result count in the field; Enter scrolls to the results, and the Popular buttons under the field fill it in. On desktop a sticky sidebar lists All, the seven categories and Installed, each with its count for the current search; below 1024px the same views become one row of chips that scrolls sideways. Every card is a single link to /integrations/<slug>: a plain click opens a side drawer (a bottom sheet on phones) with what the integration does, numbered setup steps and its permissions, and Connect spins, then shows a connected notice and turns into Disconnect. The switch on each card installs or removes the integration in place while it spins, and Installed cards say so in green. No match shows an empty state with Request an integration, which opens a small form (tool name prefilled from the search, use case, work email) that validates, spins and confirms; the dashed tile at the end of the grid opens it too. Below, the API band shows a copyable TypeScript snippet, then the closing call to action. Escape closes the drawer and the dialog.
npx wingo-ui@latest add integrations-pagePro item: the CLI needs a Pro account. See plans