Integrations
Integrations page blocks for shadcn/ui. Searchable integration directories, category-filtered grids, featured integration spotlights, connection flows and request-an-integration forms. Built for shadcn/ui.
Integration directory built with shadcn/ui Input, Card, Badge and Button. A heading with a live search field sits above a three-column grid of nine integration Cards, each with an icon tile, category Badge, one-line description and a Connect Button or Installed Badge, plus a dashed empty state for no matches. Good as the landing section of an integrations page.
Category-filtered integrations built with shadcn/ui Button and Badge. A left rail of category Buttons with counts filters a divided list of integration rows on the right, each showing an icon tile, name, description and a Connect Button or Installed Badge, with a live result count above. Suits larger catalogues that need browsing by type.
Integration spotlight built with shadcn/ui Card, Badge and Button. A large Card presents one integration with icon, long description, three Check bullets of what syncs and a Connect Button, beside a two-by-two grid of related integration Cards. Use it to promote the integration most customers start with.
Connection flow built with shadcn/ui RadioGroup, Checkbox, Select, Switch, Card and Button. A clickable Choose → Authorise → Configure stepper drives radio Cards for picking a tool, a permission checklist with an Authorise Button, and mapping rows that send Lumen token sets to variable collections with an auto-sync Switch. Good for onboarding and settings pages.
Full-bleed muted explainer section built with shadcn/ui tokens and lucide icons. A centred heading introduces a three-node diagram (Design files → Lumen → Code hosting) with icon tiles, dashed arrows and captions, followed by four benefit rows in two columns. Use it to explain the sync model on an integrations page.
Request-an-integration section built with shadcn/ui Input, Textarea, Label, Button, Card and Badge. The left column is a form for the tool name, use case and email; the right is a Build-your-own Card with a dark code snippet calling the public API and links to the API reference and webhooks. Good as the closing section of an integrations page.