Components overview

Every Readsmith page can use the built-in component library in MDX, no imports required. This page is the map; each gallery page documents one component in depth and renders it live.

Callouts

Structure

Component	Use for	Gallery
`<Accordion>`, `<AccordionGroup>`	Optional detail the reader expands on demand	Accordions
`<Expandable>`	Lightweight nested disclosure inside prose or a field list	Expandable
`<Banner>`	A prominent top-of-page announcement, optionally dismissible	Banner
`<Tabs>`, `<Tab>`	One choice among alternatives, with page-wide sync	Tabs
`<Steps>`, `<Step>`	Numbered procedures	Steps
`<Card>`, `<CardGroup>`	Linked navigation tiles	Cards
`<Frame>`	Media with a caption and a CLS-free declared ratio	Frames

Code

Component	Use for	Gallery
`<CodeGroup>`	The same snippet in several languages, tabbed	Code groups
```mermaid fence	Diagrams rendered from text, themed and zoomable	Diagrams

Fenced code blocks need no component: they highlight at build time with dual themes, titles, and line emphasis. See Code blocks; the diagram fence is authoring syntax too, at Authoring, Diagrams.

Inline elements

Component	Use for	Gallery
`<Badge>`	Status labels inline with text, with an optional icon	Inline elements
`<Icon>`	A named icon from the bundled Lucide set, inline or in cards	Icon
`<Kbd>`	Keyboard keys, like `Ctrl` `K`	Inline elements
`<Tooltip>`	A definition on hover and focus	Inline elements

Content types

Component	Use for	Gallery
`<Update>`	Dated changelog entries	Updates
`<Operation>`	One generated API operation inside prose	Operation embeds
`<Snippet>`	Shared content included at build time	Snippets and variables