Show More

A toggle that expands or collapses content on demand.

Design: We always need multiple sizes of every graphic — events, sermon series and the lobby screens.

Design for a 3-screen setup: an ultra-wide center LED wall and two 16x9 side screens
Attach every font link with the files
No AI-generated imagery — real photos or illustration only

Video: Announcements are edited across all 3 screens at once in Arena by Resolume. Deliver the masked version too.

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/show-more.json

Usage

Hold the expanded state where the content is, and hand it to ShowMore.

TSImport

import { ShowMore } from "@/components/ui/show-more";

TSExample

import * as React from "react";
import { ShowMore } from "@/components/ui/show-more";

export function Example() {
  const [expanded, setExpanded] = React.useState(false);
  return <ShowMore expanded={expanded} onExpandedChange={setExpanded} />;
}

Composition

Anatomy of ShowMore.

ShowMore                             (one button — it does not own the content)
├── expanded / defaultExpanded / onExpandedChange  (controlled or uncontrolled)
├── moreLabel="Show more"            (label while collapsed)
├── lessLabel="Show less"            (label while expanded)
├── hideIcon?: boolean               (drop the rotating chevron)
├── variant / size                   (any Button variant; defaults outline / xs)
├── children                         (content, or ({ expanded }) => content)
└── as="text" + text                 (a muted caption instead of a button)

In a card

Clip a card's markdown body and let ShowMore open it. The card owns the clip; ShowMore only toggles.

Design: We always need multiple sizes of every graphic — events, sermon series and the lobby screens.

Design for a 3-screen setup: an ultra-wide center LED wall and two 16x9 side screens
Attach every font link with the files
No AI-generated imagery — real photos or illustration only

Video: Announcements are edited across all 3 screens at once in Arena by Resolume. Deliver the masked version too.

Default

Uncontrolled: it keeps its own state.

Under a list

Clip a list to its first rows and let the reader open the rest.

Design for a 3-screen setup
Deliver graphics in multiple sizes

Custom labels

Say what opening it reveals with moreLabel and lessLabel.

Render function

Pass a function as children to draw anything from the expanded state.

As text

as="text" draws a muted caption instead of a button.

Or continue with

API Reference

ShowMore also takes every Button prop.

Prop	Type	Default	Description
`expanded`	boolean	—	Controlled expanded state. Pair with onExpandedChange.
`defaultExpanded`	boolean	false	Initial state when uncontrolled.
`onExpandedChange`	(expanded: boolean) => void	—	Fires with the next state on click.
`moreLabel`	ReactNode	"Show more"	Label while collapsed.
`lessLabel`	ReactNode	"Show less"	Label while expanded.
`hideIcon`	boolean	false	Hide the chevron that rotates when expanded.
`variant`	Button variant	"outline"	Any Button variant.
`size`	Button size	"xs"	Any Button size.
`children`	ReactNode \| ({ expanded }) => ReactNode	—	Replaces the label and chevron.
`as`	"button" \| "text"	"button"	text draws a muted caption instead of a button.
`text`	ReactNode	—	The caption when as="text".