---
type: block
title: Services
description: Service section layouts for agencies, consultancies, and internal platform teams.
---

> Fulldev UI for React. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/react/styles/{style}/{name}.json`; see [installation](/react/docs/installation.md).

## Services 1

```tsx title="Usage of @fulldev/services-1 (react/gallery/blocks/services-1.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Services1 } from "@/components/blocks/services-1"

const placeholderImage = placeholder.src

export default function Services1Demo() {
  return (
    <>
      <Services1
        badge="What we do"
        title="A simple services section for agencies and internal platform teams"
        buttons={[{ label: "View all services", href: "#" }]}
        services={[
          {
            image: { src: placeholderImage, alt: "" },
            label: "Strategy",
            title: "Page strategy",
            description:
              "Describe the service in one or two sentences and let the next section handle process or case studies.",
            href: "/blocks/",
          },
          {
            image: { src: placeholderImage, alt: "" },
            label: "Development",
            title: "Section implementation",
            description:
              "Describe the service in one or two sentences and let the next section handle process or case studies.",
            href: "/components/",
          },
          {
            image: { src: placeholderImage, alt: "" },
            label: "Design",
            title: "Design system tuning",
            description:
              "Describe the service in one or two sentences and let the next section handle process or case studies.",
            href: "/docs/installation/",
          },
          {
            image: { src: placeholderImage, alt: "" },
            label: "Optimization",
            title: "Performance audits",
            description:
              "Describe the service in one or two sentences and let the next section handle process or case studies.",
            href: "/docs/",
          },
        ]}
      />
    </>
  )
}
```

## Services 2

```tsx title="Usage of @fulldev/services-2 (react/gallery/blocks/services-2.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Services2 } from "@/components/blocks/services-2"

const placeholderImage = placeholder.src

export default function Services2Demo() {
  return (
    <>
      <Services2
        badge="Our process"
        title="A horizontal layout for when each service needs visual context"
        description="This layout pairs each service with an image, giving clients a clear picture of the deliverable."
        services={[
          {
            image: { src: placeholderImage, alt: "" },
            label: "Step 01",
            title: "Audit & discovery",
            description:
              "A process-led service section is useful when the offer is really a workflow rather than a product bundle.",
            button: { label: "Learn more", href: "#" },
          },
          {
            image: { src: placeholderImage, alt: "" },
            label: "Step 02",
            title: "Refine & prototype",
            description:
              "A process-led service section is useful when the offer is really a workflow rather than a product bundle.",
            button: { label: "Learn more", href: "#" },
          },
          {
            image: { src: placeholderImage, alt: "" },
            label: "Step 03",
            title: "Ship & iterate",
            description:
              "A process-led service section is useful when the offer is really a workflow rather than a product bundle.",
            button: { label: "Learn more", href: "#" },
          },
        ]}
      />
    </>
  )
}
```

## Services 3

```tsx title="Usage of @fulldev/services-3 (react/gallery/blocks/services-3.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Services3 } from "@/components/blocks/services-3"

const placeholderImage = placeholder.src

export default function Services3Demo() {
  return (
    <>
      <Services3
        badge="Consulting"
        title="Bold image overlays for when positioning matters"
        description="This style is useful for advisory or studio work where the offer should feel premium and deliberate."
        buttons={[
          { label: "Start a project", href: "#" },
          { label: "View case studies", href: "#" },
        ]}
        services={[
          {
            image: { src: placeholderImage, alt: "" },
            title: "Strategy workshops",
            description:
              "Guide teams through product discovery and service definition with structured facilitation.",
            button: { label: "Learn more", href: "#" },
          },
          {
            image: { src: placeholderImage, alt: "" },
            title: "Component audits",
            description:
              "Review existing design systems and recommend improvements for consistency and scale.",
            button: { label: "Learn more", href: "#" },
          },
          {
            image: { src: placeholderImage, alt: "" },
            title: "Section implementation",
            description:
              "Translate designs into production-ready, responsive section layouts.",
            button: { label: "Learn more", href: "#" },
          },
          {
            image: { src: placeholderImage, alt: "" },
            title: "Launch support",
            description:
              "Dedicated hands-on support for shipping day and the critical first week.",
            button: { label: "Learn more", href: "#" },
          },
        ]}
      />
    </>
  )
}
```

## Services 4

```tsx title="Usage of @fulldev/services-4 (react/gallery/blocks/services-4.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Services4 } from "@/components/blocks/services-4"

const placeholderImage = placeholder.src

export default function Services4Demo() {
  return (
    <>
      <Services4
        title="Clean cards when each service speaks for itself"
        description="A minimal approach where the image and title do the heavy lifting."
        buttons={[{ label: "Get started", href: "#" }]}
        services={[
          {
            image: { src: placeholderImage, alt: "" },
            title: "Research",
            description:
              "Understand the problem space before designing solutions.",
            link: { label: "About research", href: "/docs/" },
          },
          {
            image: { src: placeholderImage, alt: "" },
            title: "System design",
            description: "Architect scalable systems that grow with your team.",
            link: { label: "About system design", href: "/blocks/" },
          },
          {
            image: { src: placeholderImage, alt: "" },
            title: "Build",
            description:
              "Translate refined designs into production-ready code.",
            link: { label: "About build", href: "/components/" },
          },
          {
            image: { src: placeholderImage, alt: "" },
            title: "Rollout",
            description:
              "Deploy and support the launch across all environments.",
            link: { label: "About rollout", href: "/docs/installation/" },
          },
        ]}
      />
    </>
  )
}
```

## Services 5

```tsx title="Usage of @fulldev/services-5 (react/gallery/blocks/services-5.tsx, not installed)"
import { Services5 } from "@/components/blocks/services-5"

export default function Services5Demo() {
  return (
    <>
      <Services5
        badge="Specialties"
        title="Icon-based cards for a quick service overview"
        description="Use this layout when the service list is concise and each entry benefits from a visual anchor rather than an image."
        services={[
          {
            icon: "search",
            title: "Documentation systems",
            description:
              "Pair concise cards with a broader framing message. Structure content for discoverability and maintainability.",
            link: { label: "About documentation systems", href: "/docs/" },
          },
          {
            icon: "pencil-ruler",
            title: "Launch pages",
            description:
              "Pair concise cards with a broader framing message. Design high-converting pages that ship on schedule.",
            link: { label: "About launch pages", href: "/blocks/" },
          },
          {
            icon: "code",
            title: "Editorial redesigns",
            description:
              "Pair concise cards with a broader framing message. Modernize editorial layouts without disrupting the content pipeline.",
            link: {
              label: "About editorial redesigns",
              href: "/components/",
            },
          },
          {
            icon: "rocket",
            title: "Platform migration",
            description:
              "Pair concise cards with a broader framing message. Move between platforms without losing content or momentum.",
            link: {
              label: "About platform migration",
              href: "/docs/installation/",
            },
          },
        ]}
      />
    </>
  )
}
```

## Services 6

```tsx title="Usage of @fulldev/services-6 (react/gallery/blocks/services-6.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Services6 } from "@/components/blocks/services-6"

const placeholderImage = placeholder.src

export default function Services6Demo() {
  return (
    <>
      <Services6
        badge="Studio work"
        title="Use a side description with overlay cards when the offer should feel premium"
        description="A sticky sidebar provides context while the service cards scroll into view."
        buttons={[
          { label: "Start a project", href: "#" },
          { label: "View work", href: "#" },
        ]}
        services={[
          {
            image: { src: placeholderImage, alt: "" },
            title: "Strategy workshops",
            description:
              "Guide teams through product discovery and service definition.",
            href: "/blocks/",
          },
          {
            image: { src: placeholderImage, alt: "" },
            title: "Component audits",
            description:
              "Review existing systems and recommend improvements for scale.",
            href: "/components/",
          },
          {
            image: { src: placeholderImage, alt: "" },
            title: "Section implementation",
            description:
              "Translate designs into production-ready section layouts.",
            href: "/docs/installation/",
          },
          {
            image: { src: placeholderImage, alt: "" },
            title: "Launch support",
            description:
              "Hands-on support for shipping day and the first week after.",
            href: "/docs/",
          },
        ]}
      />
    </>
  )
}
```

## Services 7

```tsx title="Usage of @fulldev/services-7 (react/gallery/blocks/services-7.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Services7 } from "@/components/blocks/services-7"

const placeholderImage = placeholder.src

export default function Services7Demo() {
  return (
    <>
      <Services7
        badge="High-touch offer"
        title="A featured layout where the first service takes center stage"
        description="This layout uses a larger featured card alongside smaller cards for a hierarchy-driven grid."
        buttons={[
          { label: "Start conversation", href: "#" },
          { label: "Read reviews", href: "#" },
        ]}
        services={[
          {
            image: { src: placeholderImage, alt: "" },
            label: "Featured",
            title: "Brand strategy & identity",
            description:
              "A comprehensive service that covers positioning, visual identity, and brand guidelines for teams scaling fast.",
            href: "/blocks/",
          },
          {
            image: { src: placeholderImage, alt: "" },
            label: "Core",
            title: "Design systems",
            description:
              "Component libraries and tokens built for production scale.",
            href: "/components/",
          },
          {
            image: { src: placeholderImage, alt: "" },
            label: "Core",
            title: "Front-end development",
            description:
              "Production-ready code from responsive layouts to interactions.",
            href: "/docs/installation/",
          },
        ]}
        linkLabel="Learn more"
      />
    </>
  )
}
```

## Install what this page shows

```bash
npx shadcn@latest add @fulldev/services-1 @fulldev/services-2 @fulldev/services-3 @fulldev/services-4 @fulldev/services-5 @fulldev/services-6 @fulldev/services-7
```