# About
> About variant for block.
A shadcn/ui block from the [@uiable](https://uiable.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiable/block-about).
- Page, with a live preview: https://shadcn.exchange/r/uiable/block-about
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-about-light-f1ceb50999707292.png
- Registry item: https://uiable.com/r/block-about.json
- Categories: landing
- Listed: 2026-10-13, source last changed 2026-10-13
## Install
```bash
npx shadcn@latest add https://uiable.com/r/block-about.json
```
Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.
## Dependencies
- npm packages: `cn`, `framer-motion`, `lucide-react`
- Registry items: `@uiable/avatar`
## Files
### `src/components/uiable/blocks/landing/about/about-us.tsx`
```tsx
"use client"
// react
import type { ComponentType } from "react"
// next
import Link from "next/link"
// shadcn
import {
Avatar,
AvatarFallback,
AvatarGroup,
AvatarImage,
} from "@/components/ui/avatar"
// third-party
import { cn } from "cn"
import { motion } from "framer-motion"
// project-imports
import AbleProLogo from "@/images/svg/landing/able-pro-logo"
import BerryLogo from "@/images/svg/landing/berry-logo"
import MantisLogo from "@/images/svg/landing/mantis-logo"
// assets
import { ArrowRight } from "lucide-react"
// types
interface Stat {
id: string
value: string
label: string
}
interface StatItemProps {
stat: Stat
index: number
isLast: boolean
}
interface Brand {
name: string
href: string
Logo: ComponentType<{ className?: string }>
}
interface BrandLogoLinkProps {
name: string
href: string
Logo: ComponentType<{ className?: string }>
isFirst: boolean
}
interface TeamMember {
name: string
src: string
}
// data
const stats: Stat[] = [
{ id: "1", value: "700K+", label: "Developers shipping with our products" },
{ id: "2", value: "950K+", label: "Downloads across all products" },
{ id: "3", value: "4.9/5", label: "Rated by developers, not reviewers" },
]
const teamAvatars: TeamMember[] = [
{
name: "Shefali",
src: "https://cdn.uiable.com/block/shefali.png",
},
{
name: "Mujeeb Ahmed",
src: "https://cdn.uiable.com/block/mujeeb.png",
},
{
name: "Ajay Yadav",
src: "https://cdn.uiable.com/block/ajay_yadav.png",
},
]
// ------------------------------ | BRAND LOGOS | ------------------------------ //
const brands: Brand[] = [
{ name: "Able Pro", href: "https://ableproadmin.com", Logo: AbleProLogo },
{ name: "Berry", href: "https://berrydashboard.com/", Logo: BerryLogo },
{ name: "Mantis", href: "https://mantisdashboard.com/", Logo: MantisLogo },
]
// ------------------------------ | CONSTANTS | ------------------------------ //
const fadeUp = {
hidden: { opacity: 0, y: 24 },
visible: (index: number) => ({
opacity: 1,
y: 0,
transition: {
duration: 0.5,
delay: index * 0.08,
ease: "easeOut" as const,
},
}),
}
function TenPlusOutline({ className }: { className?: string }) {
return (
)
}
function StatItem({ stat, index, isLast }: StatItemProps) {
return (
{stat.value}
{stat.label}
)
}
function BrandLogoLink({ name, href, Logo, isFirst }: BrandLogoLinkProps) {
return (
{!isFirst && }
)
}
export default function AboutUs() {
return (
Years in production since 2017
The team behind
multiple flagship
products
We don't just launch products. We build structured, scalable
products, refined by years of hands-on design and engineering, so
devs ship 50% faster.
Meet our Team
By the numbers
{stats.map((stat, index) => (
))}
The stuff we're known for
{brands.map(({ name, href, Logo }, index) => (
))}
{teamAvatars.map((member) => (
{member.name
.split(" ")
.map((part) => part[0])
.join("")}
))}
700K+ devs already building with us.
)
}
```
### `src/images/svg/landing/able-pro-logo.tsx`
```tsx
// types
import type { SVGAttributes } from "react"
// ------------------------------ | BRAND LOGO — ABLE PRO | ------------------------------ //
export default function AbleProLogo(props: SVGAttributes) {
return (
)
}
```
### `src/images/svg/landing/berry-logo.tsx`
```tsx
// types
import type { SVGAttributes } from "react"
// ------------------------------ | BRAND LOGO — BERRY | ------------------------------ //
export default function BerryLogo(props: SVGAttributes) {
return (
)
}
```
### `src/images/svg/landing/mantis-logo.tsx`
```tsx
// types
import type { SVGAttributes } from "react"
// ------------------------------ | BRAND LOGO — MANTIS | ------------------------------ //
export default function MantisLogo(props: SVGAttributes) {
return (
)
}
```