Component catalog

Agents compose QuickDoc pages from these 65 blocks: 55 primitives that render one shadcn/ui component and 10 recipes that combine several. Props are plain data validated against a strict schema; scripts, raw HTML and event handlers are not representable.

65 of 65

Button

Primitive

button

A single pill action that follows a validated link (HTTPS, mailto or an in-page block) or copies text to the clipboard.

When to use: One clear next step, such as booking a call or jumping to a section.
On mobile: Full-width below 640px so the touch target spans the column.
Accessibility: Links render as <a>; external links open in a new tab and announce it. Copy buttons announce success through a live region.

Renders shadcn/ui: button

Button group

Primitive

button-group

Two to five related actions joined into one control.

When to use: Alternative destinations of equal weight, such as download formats.
On mobile: Switches to a vertical stack below 640px.
Accessibility: Rendered as role="group" with the required label.

Renders shadcn/ui: button-group, button

Toggle

Primitive

toggle

A two-state button that reveals extra text when pressed. State is local to the reader and never saved.

When to use: Optional detail, such as showing an alternative estimate.
On mobile: Revealed text wraps below the toggle.
Accessibility: Uses aria-pressed; revealed text is linked with aria-controls.

Renders shadcn/ui: toggle

Toggle group

Primitive

toggle-group

Two to seven options where each selected option shows its explanation. Selection is local to the reader.

When to use: Comparing options, such as hosting tiers, without leaving the page.
On mobile: Options wrap onto multiple rows; the explanation sits below.
Accessibility: Single mode is a radio group and multiple mode a set of pressed buttons.

Renders shadcn/ui: toggle-group

Keyboard shortcut

Primitive

kbd

Shows a key combination with a short explanation.

When to use: Documenting shortcuts in a product walkthrough.
On mobile: Keys wrap with the description.
Accessibility: Keys use <kbd>; the description is plain text next to them.

Renders shadcn/ui: kbd

Card

Primitive

card

A bordered surface with a title, optional description, paragraphs and one action.

When to use: Self-contained summaries such as a deliverable or a decision.
On mobile: Spans the column; the footer action becomes full-width.
Accessibility: The title is a heading at the next level below the page title.

Renders shadcn/ui: card, button

Separator

Primitive

separator

A thin rule between sections, optionally with a centred label.

When to use: Separating appendices or phases where a heading would be too heavy.
On mobile: Unchanged.
Accessibility: Unlabelled separators are decorative; labelled ones expose role="separator".

Renders shadcn/ui: separator

Image

Primitive

aspect-ratio

An uploaded image of this page held at a fixed aspect ratio, with alt text and an optional caption.

When to use: Screenshots, mockups and photos.
On mobile: Scales to the column width at the same ratio.
Accessibility: Alt text is required in the schema; captions use <figcaption>.

Renders shadcn/ui: aspect-ratio

Scroll area

Primitive

scroll-area

A height-capped region for long lists or logs that scrolls inside the page.

When to use: Release notes or long reference lists that would dominate the page.
On mobile: Height cap shrinks to 60% of the viewport.
Accessibility: The viewport is focusable and labelled so keyboard users can scroll it.

Renders shadcn/ui: scroll-area

Resizable panels

PrimitiveLoads on demand

resizable

Two or three side-by-side panels the reader can resize, such as before and after.

When to use: Comparisons where readers benefit from widening one side.
On mobile: Below 768px the panels stack vertically without handles.
Accessibility: Handles are focusable separators adjustable with arrow keys.

Renders shadcn/ui: resizable

Collapsible

Primitive

collapsible

One titled section that expands to show more text.

When to use: A single optional detail, such as methodology.
On mobile: Unchanged; the trigger spans the column.
Accessibility: The trigger is a button with aria-expanded.

Renders shadcn/ui: collapsible, button

Accordion

Primitive

accordion

A list of titled sections that expand one at a time or independently.

When to use: FAQs, assumptions and terms.
On mobile: Unchanged; long titles wrap.
Accessibility: Each trigger is a heading-wrapped button with aria-expanded.

Renders shadcn/ui: accordion

Tabs

Primitive

tabs

Two to eight labelled panels, one visible at a time.

When to use: Parallel views of the same topic, such as per-platform instructions.
On mobile: The tab list scrolls horizontally inside itself; the page never overflows.
Accessibility: WAI-ARIA tabs with arrow-key navigation.

Renders shadcn/ui: tabs

Item list

Primitive

item

Rows with an icon, title, description and an optional link.

When to use: Deliverables, resources or contacts.
On mobile: Descriptions wrap under titles; links stay tappable.
Accessibility: Rendered as a list; linked rows are single links with the title as name.

Renders shadcn/ui: item

Right-to-left section

Recipe

direction

A text section in a declared language and writing direction, such as Arabic or Hebrew.

When to use: Translated copy that must read right-to-left inside a left-to-right document.
On mobile: Unchanged.
Accessibility: Sets lang and dir so screen readers and layout follow the language.

Renders shadcn/ui: direction

Table

Primitive

table

A captioned table of plain-text cells with per-column alignment.

When to use: Pricing, schedules and comparisons.
On mobile: "cards" turns each row into a labelled card below 640px; "scroll" keeps the grid in a focusable horizontal scroller.
Accessibility: Uses <caption>, <th scope="col"> and optional row headers.

Renders shadcn/ui: table

Badges

Primitive

badge

A row of short status or category labels.

When to use: Status, tags or versions next to a heading.
On mobile: Wraps onto new lines.
Accessibility: Plain text; colour is never the only signal.

Renders shadcn/ui: badge

People

Primitive

avatar

A group of people shown by initials, name and role.

When to use: Team members or stakeholders for a project.
On mobile: Names wrap beneath stacked avatars.
Accessibility: Each person is listed by name; initials are decorative beside the name.

Renders shadcn/ui: avatar

Chart

PrimitiveLoads on demand

chart

A bar, line or area chart, or a pie chart (at most 5 slices) of the first series, from labelled numeric rows, with a legend and an accessible data table.

When to use: Trends and comparisons that read faster as a picture.
On mobile: Shrinks to the column width with fewer axis ticks; the data table stays available.
Accessibility: Paired with a "Show data" table containing every value.

Renders shadcn/ui: chart

Calendar

PrimitiveLoads on demand

calendar

A read-only month view with highlighted dates and a list of what happens on each.

When to use: Milestones, launch dates and availability.
On mobile: Shows one month; the event list follows below.
Accessibility: Highlighted dates are also listed as text with full dates.

Renders shadcn/ui: calendar

Carousel

PrimitiveLoads on demand

carousel

Two to twelve slides with a title and an optional image and text, moved with previous and next.

When to use: Design options or screenshots readers review one at a time.
On mobile: Swipe between slides; arrows sit under the slide.
Accessibility: A labelled carousel region; slides announce "n of total"; arrow keys move.

Renders shadcn/ui: carousel, card, aspect-ratio

Progress

Primitive

progress

Labelled progress bars from 0 to 100.

When to use: Status of phases or budgets.
On mobile: Bars span the column with values above.
Accessibility: role="progressbar" with aria-valuenow and a visible percentage.

Renders shadcn/ui: progress

Placeholder

Primitive

skeleton

A labelled placeholder for a section that is not written yet.

When to use: Marking where pending content will go in a draft shared for structure review.
On mobile: Unchanged.
Accessibility: The label is read aloud; the shimmer is decorative and stops with reduced motion.

Renders shadcn/ui: skeleton

In-progress status

Primitive

spinner

A status line with a spinner for work that is under way.

When to use: A visible "in progress" marker on a task or deliverable.
On mobile: Unchanged.
Accessibility: role="status" with the label as its text; the spinner stops with reduced motion.

Renders shadcn/ui: spinner, badge

Empty state

Primitive

empty

A centred notice for something that does not exist yet, with an optional action.

When to use: Explaining a missing section, such as "No open risks".
On mobile: Unchanged.
Accessibility: The title is a heading; the icon is decorative.

Renders shadcn/ui: empty, button

Code block

PrimitiveLoads on demand

code-block

Syntax-highlighted code with an optional filename and a copy button.

When to use: Configuration snippets, API examples and commands.
On mobile: Lines scroll horizontally inside the block, never the page.
Accessibility: A focusable, labelled scroll region; the copy button announces success.

Renders shadcn/ui: code-block

Section marker

Primitive

marker

A compact labelled divider with an icon, such as a date or a phase change.

When to use: Marking time or status changes in a running log.
On mobile: Unchanged.
Accessibility: Plain text with a decorative icon.

Renders shadcn/ui: marker

Timeline

Primitive

trace

Ordered steps with status and optional expandable details.

When to use: Project milestones, onboarding steps or incident timelines.
On mobile: Titles wrap; details expand inline.
Accessibility: An ordered list; status is spoken as text, not only colour.

Renders shadcn/ui: trace, collapsible

Linked files

Primitive

attachment

Cards for files hosted elsewhere, labelled as external links. They are not access-controlled by QuickDoc.

When to use: Pointing to files in Drive, Figma or a shared folder.
On mobile: Cards wrap into a single column.
Accessibility: Each card is one link that announces it opens in a new tab.

Renders shadcn/ui: attachment

Callout

Primitive

alert

A highlighted notice with an icon, title and description.

When to use: Decisions needed, risks or important context.
On mobile: Unchanged.
Accessibility: role="alert" is not used for static content; the title is bold text.

Renders shadcn/ui: alert

Acknowledgement dialog

Primitive

alert-dialog

A button that opens an interrupting notice the reader must acknowledge. Nothing is recorded.

When to use: Content that should be read before continuing, such as a confidentiality note.
On mobile: The dialog fills the width with stacked buttons.
Accessibility: Focus is trapped; the title and description are announced.

Renders shadcn/ui: alert-dialog, button

Toast button

Recipe

sonner

A button that shows a brief toast message, demonstrating notification copy.

When to use: Previewing product notification wording with a client.
On mobile: Toasts appear at the top centre.
Accessibility: Toasts are announced through a polite live region.

Renders shadcn/ui: sonner, button

Dialog

Primitive

dialog

A button that opens modal text, such as full terms.

When to use: Long supporting content that most readers skip.
On mobile: Fills the width with internal scrolling.
Accessibility: Titled modal with focus trapping and Escape to close.

Renders shadcn/ui: dialog, button

Side sheet

Primitive

sheet

A button that opens a panel from a screen edge.

When to use: Reference material to read beside the document.
On mobile: Left and right sheets open full-width; top and bottom keep their edge.
Accessibility: Titled modal with focus trapping and Escape to close.

Renders shadcn/ui: sheet, button

Drawer

Primitive

drawer

A button that opens a bottom drawer, suited to touch devices.

When to use: Short supporting detail on mobile-first documents.
On mobile: Drag down or press Close to dismiss.
Accessibility: Titled modal with focus trapping; a Close button is always present.

Renders shadcn/ui: drawer, button

Menubar

Primitive

menubar

A horizontal bar of menus, each with links.

When to use: Previewing application menus in a product specification.
On mobile: The bar scrolls horizontally inside itself.
Accessibility: WAI-ARIA menubar with arrow-key navigation.

Renders shadcn/ui: menubar

Searchable directory

RecipeLoads on demand

command

An inline, filterable list of grouped links.

When to use: Large link directories, such as all specification pages.
On mobile: The list scrolls within a capped height.
Accessibility: Combobox and listbox semantics; arrow keys move and Enter follows.

Renders shadcn/ui: command

Previous and next

Primitive

pagination

Previous and next links with optional numbered pages.

When to use: Linking a sequence of documents or sections.
On mobile: Numbered pages hide below 640px, leaving previous and next.
Accessibility: A labelled <nav>; the current page has aria-current.

Renders shadcn/ui: pagination

Text input

Primitive

input

A labelled single-line input. Values stay in the reader’s browser and are never submitted or saved; the block shows how a form will look.

When to use: Previewing one proposed form control with its label and help text.
On mobile: Controls span the column with 44px touch targets.
Accessibility: Each control is labelled through Field and FieldLabel; help text is its description.

Renders shadcn/ui: input, field, label

Text area

Primitive

textarea

A labelled multi-line input. Values stay in the reader’s browser and are never submitted or saved; the block shows how a form will look.

When to use: Previewing one proposed form control with its label and help text.
On mobile: Controls span the column with 44px touch targets.
Accessibility: Each control is labelled through Field and FieldLabel; help text is its description.

Renders shadcn/ui: textarea, field, label

Select

Primitive

select

A labelled custom dropdown of options. Values stay in the reader’s browser and are never submitted or saved; the block shows how a form will look.

When to use: Previewing one proposed form control with its label and help text.
On mobile: Controls span the column with 44px touch targets.
Accessibility: Each control is labelled through Field and FieldLabel; help text is its description.

Renders shadcn/ui: select, field, label

Native select

Primitive

native-select

A labelled browser-native dropdown, best on mobile. Values stay in the reader’s browser and are never submitted or saved; the block shows how a form will look.

When to use: Previewing one proposed form control with its label and help text.
On mobile: Controls span the column with 44px touch targets.
Accessibility: Each control is labelled through Field and FieldLabel; help text is its description.

Renders shadcn/ui: native-select, field, label

Checkbox

Primitive

checkbox

A labelled checkbox. Values stay in the reader’s browser and are never submitted or saved; the block shows how a form will look.

When to use: Previewing one proposed form control with its label and help text.
On mobile: Controls span the column with 44px touch targets.
Accessibility: Each control is labelled through Field and FieldLabel; help text is its description.

Renders shadcn/ui: checkbox, field, label

Switch

Primitive

switch

A labelled on/off switch. Values stay in the reader’s browser and are never submitted or saved; the block shows how a form will look.

When to use: Previewing one proposed form control with its label and help text.
On mobile: Controls span the column with 44px touch targets.
Accessibility: Each control is labelled through Field and FieldLabel; help text is its description.

Renders shadcn/ui: switch, field, label

Radio group

Primitive

radio-group

A labelled set of mutually exclusive options. Values stay in the reader’s browser and are never submitted or saved; the block shows how a form will look.

When to use: Previewing one proposed form control with its label and help text.
On mobile: Controls span the column with 44px touch targets.
Accessibility: Each control is labelled through Field and FieldLabel; help text is its description.

Renders shadcn/ui: radio-group, field, label

Slider

Primitive

slider

A labelled numeric range with its current value shown. Values stay in the reader’s browser and are never submitted or saved; the block shows how a form will look.

When to use: Previewing one proposed form control with its label and help text.
On mobile: Controls span the column with 44px touch targets.
Accessibility: Each control is labelled through Field and FieldLabel; help text is its description.

Renders shadcn/ui: slider, field, label

One-time code input

PrimitiveLoads on demand

input-otp

A labelled segmented code input. Values stay in the reader’s browser and are never submitted or saved; the block shows how a form will look.

When to use: Previewing one proposed form control with its label and help text.
On mobile: Controls span the column with 44px touch targets.
Accessibility: Each control is labelled through Field and FieldLabel; help text is its description.

Renders shadcn/ui: input-otp, field, label

Combobox

Primitive

combobox

A labelled searchable option picker. Values stay in the reader’s browser and are never submitted or saved; the block shows how a form will look.

When to use: Previewing one proposed form control with its label and help text.
On mobile: Controls span the column with 44px touch targets.
Accessibility: Each control is labelled through Field and FieldLabel; help text is its description.

Renders shadcn/ui: combobox, field, label

Input group

Primitive

input-group

A labelled input with a text prefix or suffix, such as a currency or domain. Values stay in the reader’s browser and are never submitted or saved; the block shows how a form will look.

When to use: Previewing one proposed form control with its label and help text.
On mobile: Controls span the column with 44px touch targets.
Accessibility: Each control is labelled through Field and FieldLabel; help text is its description.

Renders shadcn/ui: input-group, field, label

Form preview

RecipeLoads on demand

field

A titled fieldset of up to 20 controls of any form type. Values stay in the reader’s browser and are never submitted or saved; the block shows how a form will look.

When to use: Reviewing a proposed signup, intake or settings form with a client.
On mobile: One column below 640px; two columns above for short controls.
Accessibility: A <fieldset> with legend; every control is labelled with its help text as description.

Renders shadcn/ui: field, label, input, textarea, select, native-select, checkbox, switch, radio-group, slider, input-otp, combobox, input-group, separator

Message thread

Primitive

message

A transcript of messages with author, side and time.

When to use: Quoting a conversation, such as user research or support logs.
On mobile: Messages span up to 85% of the width.
Accessibility: An ordered list; each message announces its author and time.

Renders shadcn/ui: message, avatar

Chat bubbles

Primitive

bubble

Messages as chat bubbles, aligned by side.

When to use: Mocking product chat copy or quoting short exchanges.
On mobile: Bubbles span up to 85% of the width.
Accessibility: An ordered list; authors are visually hidden labels when not shown.

Renders shadcn/ui: bubble

Long transcript

Recipe

message-scroller

A height-capped scrolling transcript with a jump-to-latest button.

When to use: Long conversations that would dominate the page.
On mobile: Height cap shrinks to 70% of the viewport.
Accessibility: A focusable, labelled scroll region; the jump button is keyboard reachable.

Renders shadcn/ui: message-scroller, message

Questionnaire

Primitive

questionnaire

A step-by-step multiple-choice questionnaire with progress. Values stay in the reader’s browser and are never submitted or saved; the block shows how a form will look.

When to use: Self-assessments or quizzes readers work through locally.
On mobile: Choices stack; actions sit at the bottom.
Accessibility: Each step is a labelled group; progress is announced as "n of total".

Renders shadcn/ui: questionnaire

Stat grid

Recipe

stat-grid

Two to eight headline numbers with labels and optional change badges.

When to use: Report summaries and KPIs.
On mobile: Two columns below 640px, one below 360px.
Accessibility: A description list of label and value pairs.

Renders shadcn/ui: card, badge

Contact card

Recipe

contact-card

A person with role, photo and email or booking actions.

When to use: Who to contact about a document.
On mobile: Actions stack under the name.
Accessibility: The name is a heading; actions are labelled links.

Renders shadcn/ui: card, avatar, button

Link cards

Recipe

link-cards

A responsive grid of linked cards with icons.

When to use: Hub pages pointing readers to next documents.
On mobile: One column below 640px.
Accessibility: A list of links; each card is one link named by its title.

Renders shadcn/ui: item, card

shadcn/ui coverage

Every installed shadcn/ui component and the catalog blocks that render it. The registry’s former form item is now empty upstream; forms use field.

shadcn/ui component	Catalog blocks
accordion	accordion
alert	alert
alert-dialog	alert-dialog
aspect-ratio	aspect-ratio carousel
attachment	attachment
avatar	avatar message contact-card
badge	badge spinner stat-grid
breadcrumb	breadcrumb
bubble	bubble
button	button button-group card collapsible empty alert-dialog sonner hover-card popover dialog sheet drawer dropdown-menu context-menu contact-card
button-group	button-group
calendar	calendar
card	card carousel stat-grid contact-card link-cards
carousel	carousel
chart	chart
checkbox	checkbox field
code-block	code-block
collapsible	collapsible trace
combobox	combobox field
command	command
context-menu	context-menu
dialog	dialog
direction	direction
drawer	drawer
dropdown-menu	dropdown-menu context-menu
empty	empty
field	input textarea select native-select checkbox switch radio-group slider input-otp combobox input-group field
hover-card	hover-card
input	input field
input-group	input-group field
input-otp	input-otp field
item	item link-cards
kbd	kbd
label	input textarea select native-select checkbox switch radio-group slider input-otp combobox input-group field
marker	marker
menubar	menubar
message	message message-scroller
message-scroller	message-scroller
native-select	native-select field
navigation-menu	navigation-menu
pagination	pagination
popover	hover-card popover
progress	progress
questionnaire	questionnaire
radio-group	radio-group field
resizable	resizable
scroll-area	scroll-area
select	select field
separator	separator sidebar field
sheet	sheet
sidebar	sidebar
skeleton	skeleton
slider	slider field
sonner	sonner
spinner	spinner
switch	switch field
table	table
tabs	tabs
textarea	textarea field
toggle	toggle
toggle-group	toggle-group
tooltip	tooltip
trace	trace