Components

Content-authoring primitives for MDX — callouts, code blocks, cards, tabs, steps, accordions, icons, and more. Drop-in components you compose inside .mdx pages.

These are the content primitives you compose inside .mdx pages to structure prose, showcase code, and guide readers.

Layout, navigation, and prose components come from @publier/shell/components:

import { Card, CardGrid, Steps, FileTree, Icon, Badge, LinkCard } from '@publier/shell/components';

Interactive components (Accordion, Tabs, Tooltip, CopyButton, ImageZoom, ColorSwatch, ViewAnimation) come from @publier/primitives:

import { Accordion, AccordionItem, Tabs, TabPanel, Tooltip } from '@publier/primitives';

Structure & layout

Card & CardGridBordered content card; grid wrapper auto-fills responsively.

ColumnsMulti-column layout that collapses to one column on mobile.

PanelsBoxed content panel — default, outlined, or filled.

TilesCompact icon-first navigation tiles.

AccordionCollapsible content sections with ARIA state.

ExpandableSingle-item disclosure via native <details>.

FrameStyled figure wrapper for screenshots and videos.

Callouts & emphasis

CalloutsAside plus 7 friendly aliases: Note, Tip, Warning, Caution, Danger, Info, Check.

BadgeInline semantic label — 6 variants × 3 sizes.

UpdateBadgeChangelog marker — new, improved, fixed, deprecated, breaking.

TooltipHover or click tooltip with optional CTA.

Code

Code blocksSyntax highlighting, titles, copy button, line highlights — fenced code with zero config.

Tabs & CodeGroupTabbed panels with keyboard nav and cross-page sync.

PackageInstallSingle bun-add command in a themed code panel.

FileTreeHierarchical directory display with type icons.

LinkCardFull-card clickable navigation tile.

LinkButtonStyled anchor — primary, secondary, or minimal variant.

Procedures

StepsNumbered procedure with vertical guideline.

Visual elements

IconsInline named icons from the Publier registry — Lucide subset, theme-aware.

MermaidFlowcharts, sequence/class/state diagrams via fenced mermaid blocks.

Content tools

SnippetReusable MDX fragments with {{propName}} placeholders.

Looking for something else?

Math expressions → Math equations guide.
UI widgets (Hero, PricingTable, VersionSwitcher, AskAi, …) → UI components. Site-wide search is auto-wired by docsShell() — see Search dialog.
OpenAPI & AsyncAPI reference (Fields, Responses, Examples) → @publier/openapi.