Sticky Reference List

Feature264: Sticky Reference List

A feature with a heading column that sticks while three labelled groups of checked capabilities scroll past it, closing on a footnote under a hairline.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/feature264?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/feature264?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/feature264.tsx plus the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

The installed file exports feature264Demo alongside the block: the exact props behind the preview above. Spread it to get a working list in one line.

import { Feature264, feature264Demo } from "@/components/beste/block/feature264";

export default function Page() {
  return <Feature264 {...feature264Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Feature264 } from "@/components/beste/block/feature264";

export default function Page() {
  return (
    <Feature264
      badge={{ label: "What is included" }}
      heading="The whole list, not the marketing selection"
      description="Every plan ships with all of it. There is no tier where audit logging suddenly costs more."
      button={{ label: "Compare plans", href: "/pricing" }}
      groups={[
        {
          label: "Scheduling",
          items: [
            "Multi-site rota with room allocation",
            "Automatic waiting list backfill",
            "Reminders by email and text",
          ],
        },
        {
          label: "Records",
          items: [
            "One member record across sites",
            "Structured notes with templates",
            "Complete change history",
          ],
        },
      ]}
      footnote="If something on this list turns out not to work the way you read it, tell us."
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

type CapabilityGroup = {
  label: string;
  items: string[];
};

Behavior notes

• The left column is lg:sticky lg:top-24 lg:self-start. The self-start is required: without it the column stretches to the full grid row height and sticky positioning has nothing to travel within, so nothing sticks.
• top-24 assumes a fixed header of roughly six rem. Change that value to match your own navbar height, otherwise the heading will slide under it.
• Sticky behavior is lg and above only. On smaller screens the heading scrolls away normally, which is what you want when the list is stacked underneath it rather than beside it.
• Groups use border-t pt-6 with first:border-t-0 first:pt-0, so rules appear only between groups and never above the first one.
• Each group's items are a two-column grid from sm, filling column by column, so a five-item group leaves the gap at the bottom of the second column rather than in the middle of the list.
• The check icons are aria-hidden and the text carries the meaning, so a screen reader hears a plain list.
• The layout is a 1fr to 2fr split, giving the list twice the width of the heading, which is what lets the items sit two-up without cramping.