Hairline Feature Grid
Features
Source and install need .
pnpm dlx shadcn@latest add @assembli/integrations-gridIntegrations Grid
Integrations directory section: a search field with a / shortcut and category filters with live counts above a grid of integration cards. Each card has a logo tile, name, one-line description, category and an optional New, Beta or Official badge. Filtering reflows the grid with a layout animation, search marks its matches, and an empty state offers to widen the search or request the tool.
Props
Other props pass through to the root element.
integrations*
Integration[]
categories
string[]
Filter order. Defaults to each category in the order it first appears in
integrations.defaultCategory
string
Default
ALLeyebrow
React.ReactNode
Default
"Integrations"title
React.ReactNode
Default
"Works with the tools you already use"intro
React.ReactNode
searchPlaceholder
string
Default
"Search integrations"onRequest
(query: string) => void | Promise<unknown>
Called with the current search text. Return a promise to show a pending state, then a thank-you.
requestHref
string
Used instead of
onRequestwhen you'd rather link to a form.requestLabel
string
Default
"Request an integration"
| Prop | Type | Default | Description |
|---|---|---|---|
| integrations* | Integration[] | – | |
| categories | string[] | – | Filter order. Defaults to each category in the order it first appears in integrations. |
| defaultCategory | string | ALL | |
| eyebrow | React.ReactNode | "Integrations" | |
| title | React.ReactNode | "Works with the tools you already use" | |
| intro | React.ReactNode | – | |
| searchPlaceholder | string | "Search integrations" | |
| onRequest | (query: string) => void | Promise<unknown> | – | Called with the current search text. Return a promise to show a pending state, then a thank-you. |
| requestHref | string | – | Used instead of onRequest when you'd rather link to a form. |
| requestLabel | string | "Request an integration" |
