# Content Section One

> A restrained principles section with a clear introduction and a responsive set of supporting ideas.

A shadcn/ui block from the [@navui](https://ui.navdeepsingh.dev) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/navui/content-section-one).

- Page, with a live preview: https://shadcn.exchange/r/navui/content-section-one
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/navui/content-section-one-light-6b5c4fa01b954887.png
- Registry item: https://ui.navdeepsingh.dev/r/content-section-one.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.navdeepsingh.dev/r/content-section-one.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: `motion`
- Registry items: `https://ui.navdeepsingh.dev/r/designed-for-focus-illustration.json`, `https://ui.navdeepsingh.dev/r/fast-by-default-illustration.json`, `https://ui.navdeepsingh.dev/r/flexible-at-scale-illustration.json`

## Files

### `src/registry/blocks/content/content-section-one/content-section-one.tsx`

```tsx
'use client'

import type { ComponentType } from 'react'

import { DesignedForFocusIllustration } from '@/components/illustrations/DesignedForFocusIllustration'
import { FastByDefaultIllustration } from '@/components/illustrations/FastByDefaultIllustration'
import { FlexibleAtScaleIllustration } from '@/components/illustrations/FlexibleAtScaleIllustration'

type Principle = {
  title: string
  description: string
  illustration: ComponentType
}

const principles: readonly Principle[] = [
  {
    title: 'Fast by default',
    description: 'Common actions stay immediate, predictable, and close to where work happens.',
    illustration: FastByDefaultIllustration,
  },
  {
    title: 'Designed for focus',
    description: 'Clear hierarchy and restrained interfaces keep attention on the current task.',
    illustration: DesignedForFocusIllustration,
  },
  {
    title: 'Flexible at scale',
    description: 'Start with simple workflows and add structure as your product and team evolve.',
    illustration: FlexibleAtScaleIllustration,
  },
]

export default function ContentSectionOne() {
  return (
    <section className="overflow-hidden py-16 text-foreground md:py-24">
      <div className="mx-auto max-w-6xl px-5 sm:px-8">
        <div className="grid gap-8 pb-12 md:grid-cols-[1fr_0.7fr] md:items-end md:border-b">
          <h2 className="max-w-3xl text-3xl font-semibold tracking-tighter text-balance sm:text-4xl lg:text-5xl">
            Software should remove friction, not create more of it.
          </h2>

          <p className="max-w-md text-base leading-7 text-muted-foreground md:justify-self-end">
            Every interaction is designed to make complex workflows feel direct, calm, and
            understandable.
          </p>
        </div>

        <div className="-mx-5 [scrollbar-width:none] overflow-x-auto px-5 pt-8 pb-2 sm:-mx-8 sm:px-8 md:mx-0 md:overflow-visible md:px-0 md:pt-0 md:pb-0 [&::-webkit-scrollbar]:hidden">
          <div className="flex w-max gap-4 md:grid md:w-full md:grid-cols-3 md:gap-0 md:border-b">
            {principles.map((principle, index) => {
              const Illustration = principle.illustration

              return (
                <article
                  key={principle.title}
                  className={[
                    'w-[min(82vw,20rem)] shrink-0 rounded-lg border bg-card',
                    'md:w-auto md:rounded-none md:border-0 md:bg-transparent',
                    index > 0 ? 'md:border-l' : '',
                  ].join(' ')}
                >
                  <div className="relative flex min-h-52 items-center justify-center overflow-hidden">
                    <Illustration />

                    <span className="absolute top-5 right-5 font-mono text-xs text-muted-foreground">
                      0{index + 1}
                    </span>
                  </div>

                  <div className="p-6 md:px-7 md:py-8">
                    <h3 className="text-lg font-medium tracking-tight">{principle.title}</h3>

                    <p className="mt-3 max-w-sm text-sm leading-6 text-muted-foreground">
                      {principle.description}
                    </p>
                  </div>
                </article>
              )
            })}
          </div>
        </div>
      </div>
    </section>
  )
}
```