Features Integrations
Searchable integrations directory with category filters, monogram tiles and a request link.
- Type: Features section
- Styles: Light, Enterprise
- Licence: Charcoal UI Pro
About Features Integrations
Features Integrations is a small app directory: a search box, category chips and a grid of monogram tiles that animate as the list filters. When nothing matches, it offers a request link instead of a dead end.
It is a full-width features section for React and Tailwind CSS 4, in a light and enterprise style. Preview it at any width above, then install it with one command.
When to use Features Integrations
- SaaS products with many integrations.
- Payment and API platforms listing methods.
- Help desks and CRMs.
- Developer tools with plugins.
How it is built
Filtering is instant and local, tiles reflow with layout animation, and categories are worked out from the data you pass.
It has no component dependencies beyond the shared utilities, so it is one file to read and change.
Goes well with Features Integrations
Features Integrations is part of 7 full templates, so you can see it in a finished page.
- Relay template: Status updates that write themselves.
- Halcyon template: Support that answers in seconds.
- Cadence template: Book meetings without the back-and-forth.
- Sentinel template: Know before your users do.
- Patchnote template: Release notes people actually read.
- Payline template: Accept money anywhere with one API.
- Commons template: Bring your members home.
- Features Grid: A React features grid of six cards with a pointer spotlight and staggered reveal
- Features Bento: A React bento features section where every tile is a working component
- Features Alternating: A free React alternating features section: image and text rows that slide in
- Features Tabs: React feature tabs that auto-advance with a progress bar and swap visuals
Install Features Integrations
npx shadcn@latest add @charcoal/features-integrationsFeatures Integrations is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Features Integrations work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.