Features

Minimal Feature Grid

Plain feature section: a heading and description above a three-column grid of six features, each a title and a line of copy. Theme tokens only, light and dark.

Free, MIT licenseOpen in Browse
import {
  Feature,
  FeatureDescription,
  FeatureGroup,
  FeatureTitle,
} from "@/components/editorial/features"
import { Heading } from "@/components/editorial/heading"
import {
  Section,
  SectionContent,
  SectionDescription,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Everything a release needs, in one place",
  body: "Orbcore keeps the plan, the review and the handoff together, so nothing waits on a message someone missed.",
} as const

const FEATURES = [
  {
    title: "Shared plans",
    body: "One plan the whole team edits, with owners and dates that update as work moves.",
  },
  {
    title: "Review in context",
    body: "Comments sit on the change they are about and close when the change ships.",
  },
  {
    title: "Status at a glance",
    body: "Every project shows what is done, what is blocked and who is on it.",
  },
  {
    title: "Handoff notes",
    body: "Specs, decisions and files travel together in one link.",
  },
  {
    title: "Quiet notifications",
    body: "You hear about the threads you are in, not everything in the workspace.",
  },
  {
    title: "Weekly digest",
    body: "A Monday summary of what shipped, what slipped and what is next.",
  },
] as const

export default function MinimalFeatures01() {
  return (
    <Section>
      <SectionHeader>
        <SectionTitleGroup>
          <Heading>{COPY.title}</Heading>
        </SectionTitleGroup>
        <SectionDescription>{COPY.body}</SectionDescription>
      </SectionHeader>
      <SectionContent>
        <FeatureGroup cols={3}>
          {FEATURES.map((feature) => (
            <Feature key={feature.title}>
              <FeatureTitle>{feature.title}</FeatureTitle>
              <FeatureDescription>{feature.body}</FeatureDescription>
            </Feature>
          ))}
        </FeatureGroup>
      </SectionContent>
    </Section>
  )
}

Installation

pnpm dlx shadcn add @01orbital/minimal-features-01
npx shadcn add @01orbital/minimal-features-01
yarn shadcn add @01orbital/minimal-features-01
bunx --bun shadcn add @01orbital/minimal-features-01

Free under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.

It lands at components/blocks/features/minimal-features-01/index.tsx, as source you own and edit.

Usage

import MinimalFeatures01 from "@/components/blocks/features/minimal-features-01"

export default function Example() {
  return <MinimalFeatures01 />
}

Dependencies

Registry pieces it installs with it: