Skip to content

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

Free

Article Preview Sheet for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not load the article.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Sheet>
  <SheetTrigger :asChild="true">
    <Button variant="outline">Read More</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Getting Started with React</SheetTitle>
      <SheetDescription>A comprehensive guide for beginners</SheetDescription>
    </SheetHeader>
    <div class="flex flex-col gap-4 p-4">
      <div class="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 class="flex flex-col gap-3 text-sm">
        <p>
          React is a popular JavaScript library for building user interfaces. In this guide, we'll cover the basics of getting started with React.
        </p>
        <p>
          You'll learn about components, props, state, and how to create your first React application from scratch.
        </p>
      </div>
      <Button class="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. SheetTrigger takes asChild and merges onto the one Button inside it.

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

Sets asChild. The rest is on the Sheet page.

Button

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

All 29 sheet examples