FeatureStory

Code

import { FeatureStory } from "@fadymondy/nasaq/web";export function Feedback() {  return (    <FeatureStory      eyebrow="Feedback SDK"      title="Hear from users where they are"      description="Collect reports from inside your product."      points={["One script tag", "Screenshots attached", "Lands in your board"]}    />  );}

Website · beta

Live examples and controls: FeatureStory in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/feature-story.json

Tells one feature as a story: an eyebrow and title, a description, a few proof points and a picture. Copy and media sit side by side from 48rem of container width and stack below it. Stack several with reverse alternating to build a product page.

When to useCopy Anchor Link

• Product and marketing pages that explain features one by one.
• Pairing text with a ScreenshotFrame, a code sample or a transcript.

When not to useCopy Anchor Link

• A grid of many short features: use cards.
• Pricing: use PlanCard.
• App UI that is not marketing content.

ImportCopy Anchor Link

import { FeatureStory, type FeatureStoryProps } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { FeatureStory } from "@fadymondy/nasaq/web";

export function Feedback() {
  return (
    <FeatureStory
      eyebrow="Feedback SDK"
      title="Hear from users where they are"
      description="Collect reports from inside your product."
      points={["One script tag", "Screenshots attached", "Lands in your board"]}
    />
  );
}

AnatomyCopy Anchor Link

div                     data-slot="feature-story", @container
└─ section              aria-labelledby the title; 1 column, 2 columns from @3xl
   ├─ copy column       (order-2 at @3xl when reverse)
   │  ├─ eyebrow row    icon (brand tint, aria-hidden) + eyebrow
   │  ├─ title          <h2> or <h3>
   │  ├─ description    <p>
   │  ├─ points         <ul>, check icon (aria-hidden) + text
   │  └─ action         link or secondary button
   └─ media column      media

APICopy Anchor Link

FeatureStoryCopy Anchor Link

FeatureStoryProps extends Omit<ComponentProps<"section">, "title">. Remaining props go to the <section>.

ExamplesCopy Anchor Link

With a screenshotCopy Anchor Link

import { Button, FeatureStory, ScreenshotFrame } from "@fadymondy/nasaq/web";
import { Bug } from "lucide-react";

export function BoardStory() {
  return (
    <FeatureStory
      eyebrow="Feedback SDK"
      icon={<Bug />}
      title="Reports arrive with context"
      description="Every report carries the page, the browser and a screenshot."
      points={["Console errors attached", "Deduplicated automatically"]}
      action={<Button variant="secondary">Read the docs</Button>}
      media={
        <ScreenshotFrame variant="browser" title="app.example.com" label="Feedback widget open on a page">
          <img src="/widget.png" alt="" />
        </ScreenshotFrame>
      }
    />
  );
}

Alternating on a page, in ArabicCopy Anchor Link

import { FeatureStory } from "@fadymondy/nasaq/web";

export function Features() {
  return (
    <div dir="rtl" className="flex flex-col gap-16">
      <FeatureStory
        title="تابع مهامك في مكان واحد"
        description="لوحة واحدة لكل المشاريع."
        points={["سحب وإفلات", "إشعارات فورية"]}
      />
      <FeatureStory
        reverse
        titleAs="h3"
        title="فواتير جاهزة من الوقت المسجل"
        description="حوّل ساعات العمل إلى فاتورة بنقرة."
      />
    </div>
  );
}

AccessibilityCopy Anchor Link

• The <section> is labelled by its title through aria-labelledby, so it is a named region.
• Use titleAs="h3" when the story sits under another h2; keep heading levels in order.
• The eyebrow icon and the check icons are aria-hidden. Points are a plain list.
• Media keeps its own accessibility (give ScreenshotFrame a label).
• No interactive behaviour of its own; action is focusable as you supply it.

The caller localises all copy.

RTL & i18nCopy Anchor Link

• The layout uses logical grid flow: in RTL the copy is on the right and the media on the left; reverse swaps them.
• Check icons sit on the inline start.
• The title uses text-balance and the description text-pretty; both work with Arabic.
• Numbers in points: isolate with Num.
• No built-in strings.

Styling & tokensCopy Anchor Link

• Tokens: text-h1, text-body, text-body-sm, text-label, text-foreground, text-muted-foreground, --nq-brand (text-nq-brand, icon tint at 14%), rounded-control.
• The breakpoint is a container query (@3xl, 48rem) on the wrapper, so it responds to its container and not the viewport.
• Target with [data-slot=feature-story]. Extend with className (applied to the grid). Do not use raw hex.

Do / Don'tCopy Anchor Link

• Do keep points to two to four short lines.
• Do alternate reverse down a page.
• Do set titleAs so headings stay in order.
• Don't put more than one primary action in action.
• Don't use it for dense app UI.
• Don't use the eyebrow for long sentences.

RelatedCopy Anchor Link

• ScreenshotFrame · PlanCard · Tabs

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-website-feature-story--docs