Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Article Preview Sheet for React

A Read More button opens a right-side preview of Getting Started with React, with a byline, two paragraphs, and Read Full Article.

The title is Getting Started with React, with the subtitle A comprehensive guide for beginners. By John Smith and 5 min read sit above two paragraphs and Read Full Article.

Use it so people can skim a piece without leaving the list. Open a short piece in a Dialog if there is no full page to visit. In React, Base UI does not load the article.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Sheet anatomy: content, close, title, description, footer

Usage

<Sheet>
  <SheetTrigger render={<Button variant="outline" />}>Read More</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Getting Started with React</SheetTitle>
      <SheetDescription>A comprehensive guide for beginners</SheetDescription>
    </SheetHeader>
    <div className="flex flex-col gap-4 p-4">
      <div className="flex items-center gap-2 text-muted-foreground text-sm">
        <span>By John Smith</span>
        <span aria-hidden="true">•</span>
        <span>5 min read</span>
      </div>
      <div className="flex flex-col gap-3 text-sm">
        <p>
          React is a popular JavaScript library for building user interfaces.
          In this guide, we&apos;ll cover the basics of getting started with
          React.
        </p>
        <p>
          You&apos;ll learn about components, props, state, and how to create
          your first React application from scratch.
        </p>
      </div>
      <Button className="w-full">Read Full Article</Button>
    </div>
  </SheetContent>
</Sheet>

FAQ

What does the preview show?

The title Getting Started with React and the subtitle A comprehensive guide for beginners in SheetHeader, a muted line with By John Smith and 5 min read, two paragraphs, and a full-width Read Full Article button.

Is the dot in the byline read aloud?

No. The • between the author and the read time is aria-hidden, so a screen reader hears By John Smith, then 5 min read.

What does the sheet announce when it opens?

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. Here the article's title is the sheet's title, and its subtitle is the description.

How does Read More open the preview?

The outline button labeled Read More is the trigger, and its text is the accessible name. The Button goes in the render prop of SheetTrigger, and the label stays its child.

What if the article preview is long?

Give the body flex-1 overflow-y-auto so it scrolls inside the panel while the header stays put. A preview should stay short, though: two paragraphs and a link out.

API Reference

Sheet

No extra props in this demo. The rest is on the Sheet page.

Button

Sets variant="outline". The rest is on the Button page.

All 29 sheet examples