Shadcn About Blocks

Browse 40+ Shadcn UI About sections built with React, Tailwind CSS and shadcn/ui. Copy & paste the code or install via the shadcn CLI.

Shadcn About 14 - About with Hero Image

About with Hero Image

Shadcn About 18 - Mission and Drive Sections

Mission and Drive Sections

Shadcn About 10 - Sticky Sidebar Company Profile

Sticky Sidebar Company Profile

Shadcn About 11 - Creative Agency Portfolio

Creative Agency Portfolio

Shadcn About 6 - Story and Workplace Photo Grid

Story and Workplace Photo Grid

Shadcn About 9 - Developer Profile with Photos

Developer Profile with Photos

Shadcn About 12 - Agency Profile with Process Cards

Agency Profile with Process Cards

Shadcn About 17 - Interactive Tab Profile

Interactive Tab Profile

Shadcn About 13 - Story with Avatar Profile

Story with Avatar Profile

Shadcn About 16 - Why Us Stats Section

Why Us Stats Section

Shadcn About 19 - Image Left Quote Right

Image Left Quote Right

Shadcn About 15 - Tilted Photo Profile Card

Tilted Photo Profile Card

Shadcn About 1 - Intro With Story Columns

Intro With Story Columns

Shadcn About 20 - Founder Profile with Signature

Founder Profile with Signature

Shadcn About 28 - Two-Column About with Staggered Images

Two-Column About with Staggered Images

Shadcn About 21 - Hero Story and Training Cards

Hero Story and Training Cards

Shadcn About 3 - Company Profile with Achievements

Company Profile with Achievements

Shadcn About 5 - Developer Platform Story

Developer Platform Story

Shadcn About 22 - Animated Story with Images

Animated Story with Images

Shadcn About 4 - Vision and Creators with Image Grid

Vision and Creators with Image Grid

Shadcn About 7 - Product Story with Offset Images

Product Story with Offset Images

Shadcn About 23 - Split intro with story columns and stats

Split intro with story columns and stats

Shadcn About 8 - Fintech About with Stats Carousel

Fintech About with Stats Carousel

Shadcn About 2 - Stats Grid with Logos and Testimonial

Stats Grid with Logos and Testimonial

Shadcn About 25 - Animated Story with Stats and Avatars

Animated Story with Stats and Avatars

Shadcn About 26 - Studio Profile with Services

Studio Profile with Services

Shadcn About 24 - Personal Profile with Clients and Awards

Personal Profile with Clients and Awards

Shadcn About 27 - Enterprise About with Team Grid

Enterprise About with Team Grid

Shadcn About 29 - Mission panel with text columns

Mission panel with text columns

Shadcn About 30 - Centered intro with photo row

Centered intro with photo row

Shadcn About 31 - Story with Avatar Profile

Story with Avatar Profile

Shadcn About 32 - About with Hero Image

About with Hero Image

Shadcn About 33 - Mission and Drive Sections

Mission and Drive Sections

Shadcn About 34 - Studio split with work CTA

Studio split with work CTA

Shadcn About 35 - Interactive Tab Profile

Interactive Tab Profile

Shadcn About 36 - Photo Mosaic With Story Columns

Photo Mosaic With Story Columns

Shadcn About 37 - Editorial Intro With Photo Pair

Editorial Intro With Photo Pair

Shadcn About 38 - Split Intro With Story Columns

Split Intro With Story Columns

Shadcn About 39 - Sticky Sidebar Client List

Sticky Sidebar Client List

Shadcn About 40 - Sticky studio with awards

Sticky studio with awards

Shadcn UI About Blocks, Sections & Components

About blocks tell who you are on a marketing page. They sit below the hero with mission, values, photos, and proof so visitors know who they are buying from.

Each block is a self-contained React component which you can copy/paste the code or install via the shadcn CLI. You own the code and can modify however you like, or us AI and LLMS to quickly change the design.

Our about blocks combine headlines, supporting text, images, icons, CTA buttons, and responsive layouts. Each block is designed with clear visual hierarchy and consistent spacing to integrate seamlessly into any page structure.

Choosing the Right About Section

Different goals call for different about sections. We’ve organized our about blocks into subgroups so you can find the right layout for your use case:

FAQs

What is a Shadcn About section?

A shadcn About section is a React block for a marketing page. Shadcnblocks About sections are built with Tailwind and shadcn/ui.

How do I install a Shadcnblocks About block?

Two ways. Copy and paste the code from the block page (in the code view), or install with the shadcn CLI. For example to install with the CLI run npx shadcn add @shadcnblocks/about14 - See the installation docs for setting up shadcn/ui if your project isn't using it already.

Can I use Shadcnblocks About sections in Next.js or Astro?

Yes. Shadcnblocks work with any React project. That includes Next.js, Astro, Remix, and Vite.

Do Shadcnblocks About blocks work with Radix UI, Base UI and React Aria?

Yes. Our blocks support Radix UI, Base UI and React Aria (beta). They will use whatever primitive library you have defined in your project's components.json. You can find more info at Radix UI or Base UI or React Aria .

Can I customize Shadcnblocks About sections?

Yes. You can customize every aspect of the code. Shadcnblocks are downloaded as components that live in your codebase (not npm modules), so editing the code is just like your own code.

How does theming work on Shadcnblocks About components?

Our blocks use shadcn/ui theme variables in Tailwind CSS. CSS variables cover light mode, dark mode, and the rest of the shadcn design tokens. You can install any theme from our Shadcn Themes page.

How do I choose the right Shadcn About section?

Use the subgroup list above. Start from the layout you already have assets for, then change the copy and the image.