Features

A classic shadcn/ui features section with a centred eyebrow, heading and lead above a responsive three-column grid of six features. Each feature pairs a lucide icon in a tinted primary square with a title and two lines of copy. Built with plain Tailwind theme tokens; a dependable default for any product landing page.

A three-by-two bento layout for shadcn/ui: a wide photo Card with a dark gradient text overlay, a tall Card with an icon and a check-marked highlight list, and two compact icon Cards. Built with the shadcn/ui Card component and lucide icons. Good for showcasing one flagship capability alongside supporting ones.

Two alternating feature rows built for shadcn/ui, each pairing a bordered rounded photo with an eyebrow, heading, paragraph and three check bullets in tinted circles. The second row reverses the column order on desktop. Uses Tailwind theme tokens and lucide icons; ideal for narrative product walkthroughs.

A shadcn/ui two-column section with a sticky left rail holding the eyebrow, heading, intro and an outline Button, beside a numbered list of six features separated by hairline dividers. Each entry shows a two-digit mono index, title and paragraph. Built with the shadcn/ui Button; suited to long, text-led capability lists.

An interactive showcase using shadcn/ui Tabs: four icon-labelled triggers (Docs, Tasks, Meetings, Ask AI) each reveal a two-column panel with a heading, paragraph, bullet list and outline Button on the left and a bordered product photo on the right. Built with the shadcn/ui Tabs and Button components; a compact way to tour several product areas.

A left-aligned heading and lead beside a two-by-two grid of shadcn/ui Cards that lift on hover with a stronger border and shadow. Each Card holds a tinted lucide icon, title, description and an animated “Learn more” link. Built with the shadcn/ui Card component; good for linking out to four detailed feature pages.

A shadcn/ui section with a narrow left column containing eyebrow, heading, lead and a primary Button, beside a two-column checklist of eight features marked with CircleCheck icons. Each item has a bold title and a one-line description. Built with the shadcn/ui Button and lucide icons; ideal for “what is included” overviews.

Three icon features in a row with inverted primary icon squares, followed by a bordered three-column stats strip divided by vertical hairlines. Built for shadcn/ui with Tailwind theme tokens and lucide icons. Combines proof points with capabilities, so it works well directly beneath a hero.

A centred eyebrow, heading and lead above one large product photo in a rounded, bordered frame with a soft shadow, followed by three small icon captions in a row. Built for shadcn/ui using Tailwind theme tokens and lucide icons; the right choice when one screenshot tells the story.

A dense shadcn/ui feature grid built from a border-coloured container with one-pixel gaps, so six background cells appear separated by hairline dividers with no outer gaps. Each cell has a lucide icon, title and short description beneath a left-aligned heading. Uses Tailwind theme tokens only; a refined, technical look for platform pages.

A centred heading above two side-by-side shadcn/ui Cards: a muted “Before” Card listing four pains with X icons and a primary-bordered “With Canopy” Card listing four gains with check icons. Built with the shadcn/ui Card components and lucide icons; a persuasive layout for positioning against the status quo.

An interactive shadcn/ui section where a single-open Accordion of four numbered features on the left controls which framed product photo appears on the right, using React state. Each item expands to a short description. Built with the shadcn/ui Accordion component; ideal for guided product tours.

A centred “how it works” section for shadcn/ui with three horizontal steps, each a numbered primary circle, title and paragraph, joined by a dashed connector line on desktop, and a large Button below. Built with the shadcn/ui Button and Tailwind theme tokens; great for onboarding and setup flows.

A four-column asymmetric bento for shadcn/ui: a double-width, double-height photo tile with a dark overlay, a big-number stat tile, a customer quote tile with an Avatar, and two compact icon tiles. Built with the shadcn/ui Card and Avatar components; mixes proof, voice and features in one block.

A three-column grid of shadcn/ui Cards with a two-pixel primary top border, each holding a tinted lucide icon, an optional New, Beta or Popular Badge, a title and description. The header pairs a heading with a changelog link. Built with the shadcn/ui Card and Badge components; useful for release-oriented feature pages.

A split shadcn/ui layout with a left column of five features, each a bordered icon tile beside a title and description, and a sticky portrait photo in a rounded, bordered frame on the right. Built with Tailwind theme tokens and lucide icons; the sticky image keeps the section visually anchored while scrolling.

A compact full-bleed muted band for shadcn/ui with a one-line caption and four features in a row separated by vertical dividers on desktop. Each feature has a tiny lucide icon, a bold title and a single line of text. Uses Tailwind theme tokens only; perfect as a trust strip between larger sections.

An integrations section built for shadcn/ui: a centred heading and lead above a four-column grid of eight square Cards, each with a lucide icon, a generic tool name and a short note, plus a “Browse all integrations” link. Built with the shadcn/ui Card component and lucide icons instead of third-party logos.

A shadcn/ui section pairing three icon feature rows on the left with a testimonial Card on the right that shows a five-star row, a large quotation, an Avatar and the customer’s name, role and company. Built with the shadcn/ui Card and Avatar components; combines capabilities with social proof.

A mobile-focused shadcn/ui section with a centred phone mock built from a thick-bordered rounded frame holding a photo, flanked by two right-aligned features on the left and two left-aligned features on the right. Built with Tailwind theme tokens and lucide icons; ideal for announcing native apps.