# Feature sticky (goodtabs UI)

A sticky heading beside a scrolling list of numbered features, in plain CSS.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/feature-sticky.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/feature-sticky`

## Usage

```tsx
import { FeatureSticky } from "@/components/feature-sticky"

<FeatureSticky
  title="From idea to merged in one sitting"
  features={[
    { title: "Describe it", description: "Plain words in, first draft out." },
    { title: "Review it", description: "Check contrast and focus." },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| eyebrow | `string` |  | Small uppercase line above the heading. |
| title | `ReactNode` |  | The sticky heading. |
| description | `ReactNode` |  | Grey lead under the heading. |
| actions | `ReactNode` |  | Slot under the lead, usually a link. |
| features | `{ title: string; description: string; visual?: ReactNode }[]` |  | The list that scrolls: title, description, optional visual. |

## When to use

- Three to six features that each need a paragraph or a visual
- When the heading should stay in view while the reader works down
- Long pages where a grid would be too shallow

## When not to use

- Short one-line points, which want the feature grid
- Scroll-driven stories that swap content, which want a pinned story
- One or two features, where there is nothing to scroll past

## Notes for agents

- Pure CSS position: sticky from the container's @2xl width; stacked and not sticky below
- Sticky breaks if any ancestor has overflow hidden or auto; the section sets none
- Stuck at top-24 to clear a 64px site header; change it in the source if your header differs
- Server component; the numbers 01, 02 come from the array index

Docs: https://ui.goodtabs.co/components/feature-sticky