✨ Publier v1 is live — a polished docs platform built for the open web.
Skip to content

New Components

Showcase of all new components added in v1 — Columns, Tiles, Panels, UpdateBadge, ColorSwatch, OpenInAI.

This page demonstrates every new MDX component shipped in the v1 release.

UpdateBadge

Inline changelog markers for labelling what changed:

Newv1.0 Columns — multi-column layout

Improvedv1.0 Frame — now supports video with src prop

Fixed Bug where the sidebar lost active state after client-side navigation

Deprecated Legacy compatibility shim — replaced by the current Publier integration

Breakingv1.0 theme.yaml root preset: field now required when using custom colors

Columns

Two-column layout (default):

Left column — put any MDX content here: paragraphs, code blocks, callouts, images.

Right column — columns collapse to 1 on narrow viewports automatically.

Three-column layout:

First
Second
Third

Tiles

Navigation tiles with icons, titles, and descriptions:

Getting Started

Scaffold your first Publier site in 60 seconds.

Configuration

publier.config.yaml, theme.yaml, and content schemas.

Theming

14 built-in presets, custom colors, fonts, and radii.

Components

18 UI components ready for MDX.

Panels

Boxed content panels with optional title and variants:

Default panel

Use panels to group related reference content — config options, prop tables, or step summaries.

Outlined panel

The outlined variant adds a primary-colored border for visual emphasis.

Filled panel

The filled variant uses a subtle background tint — good for aside content.

ColorSwatch

Color palette display for design systems and theme documentation:

  • Primary#4f46e5
  • Accent#8b5cf6
  • Success#22c55e
  • Warning#f59e0b
  • Destructive#ef4444
  • Background#ffffff
  • Foreground#111827
  • Border#e5e7eb

Click any swatch to copy its hex value to the clipboard.

Open in AI

The OpenInAI button appears in the page toolbar on every docs page. It lets readers open the current page in their preferred AI tool (ChatGPT, Claude, Perplexity) or copy the page as Markdown.

What’s in the sidebar

Check the sidebar on this page to see:

  • VersionSwitcher — dropdown at the top to switch between v1.0 (latest) and v0.9 (legacy)
  • Anchors — GitHub and Changelog links pinned at the bottom
  • Breadcrumbs — Home / Docs / Components / New Components trail above the page title