Widgets Demo

BAZWEAVE·KIT

// interactive widget gallery

Widgets Demo

Live interactive examples of every MDX component

All kit widgets rendered inline with real interactivity — click tabs, toggle reveals, step through guides, inspect spec tables, and verify responsive layout.

TABS · ADMONITION · STEPS · BADGE · REVEAL · KEYVAL · SPEC TABLE

Tabs

Tabs switch content panels without page navigation. They're useful for showing multi-language examples, alternative approaches, or layered detail.

<TabItem value="react" label="React">
  <Button />
</TabItem>

one two three

Tab content panel. Active tab highlighted with accent bottom-border.

Admonition

Admonitions call attention to information of a particular tone. The five supported types align with Docusaurus conventions.

Note — Neutral context, supplementary detail. This admonition uses the note type (gray accent).

✓Pro Tip

Tip — Best-practice recommendation. Setting a pinned compatibility_date on Workers avoids accidental breaking changes. A tip admonition draws the reader's eye with a green accent border.

ⓘContext

Info — Background or reference material. Blue accent. Useful for pre-requisites, terminology, or links to related docs.

⚠

Warning — Important caution. Yellow accent. "Rate-limit all auth and submission endpoints" — not just some of them.

✖

Danger — Critical. Red accent. "Never trust a client-supplied amount." Server-side price validation is mandatory for any payment flow.

Steps

A numbered step-sequence for walkthroughs, tutorials, and checklists.

Steps render an ordered list with prominent green numbered badges. Each item gets an automatic sequential counter that adapts to insertions.

Use the Steps component as a wrapper; its direct children become the steps. Insert or reorder at will and the numbers follow.

Each step can contain arbitrary MDX — paragraphs, code blocks, admonitions, even nested tabs. The kit's Steps uses a flex layout so text and badge stay aligned even with multi-line content.

Badge

Inline labels for status, version, taxonomy, or metadata.

stableproductionWIPdeprecatedbetabreakingexperimentalarchived

Custom color badge: v2.3.1

Badges are font-mono, small caps, compact. They adapt to the accent palette and are useful inline in paragraph text, table cells, or headings.

Reveal

Collapsible content block that starts closed. Good for spoilers, extended examples, or optional deep-dives.

The Reveal component wraps content that the reader can expand on demand. It uses a click-to-toggle button with a purple indicator dot. The expanded content can contain any MDX — code blocks, images, nested components.

<Reveal label="Show answer" hiddenLabel="Hide">
  {children}
</Reveal>

Reveal without explicit labels uses defaults ("reveal" / "hide").

# Example: check DNS delegation
dig NS ragbaz.xyz +short
# → dns101.registrar-servers.com  ← still Namecheap; CF never made authoritative

KeyVal

Key-value data table for structured metadata, configuration properties, or attribute lists.

package@ragbaz/bazweave-kit

version0.0.1-dev

highlight engineregex (zero-dependency, SSR-compatible)

token sourcetokens.json (single source of truth)

host adaptersDocusaurus · Next.js · static SSR

widgetsPlantuml · Admonition · Tabs · Steps · Badge · Reveal · KeyVal · CodeBlock · ComposeStack

design elementsHero · Plate · SideBySide · Callout · Lead · Note · SpecTable · DomainChips

iconographyConstructIcon · GlyphToken · IconLegend

grammarsGlither · Gleam · WIT · Roux

licenseMIT

KeyVal renders each row as a key-value pair with the key styled in yellow mono and the value in body color, separated by a subtle border.

SpecTable

Three-column reference table for token / value / note triples. Used throughout bazweave-kit DESCRIPTION docs for design-system inventories.

C.orange1	#fe8019	Primary accent — headings, marque, domain tag
C.green1	#8ec07c	Success — step badges, running state
C.aqua1	#83a598	Info / link color
C.purple1	#d3869b	Reveal toggle, secondary accent
C.yellow1	#fabd2f	Warning, key-value labels
C.fg1	#ebdbb2	Primary body text
C.fg2	#d5c4a1	Secondary body text / lead paragraphs
C.fg3	#928374	Muted text — captions, meta, annotations
C.bg1	#1d2021	Page background (dark)
C.bg2	#282828	Surface / callout background
C.border	#3c3836	Rule lines, table borders, dividers

Plantuml

ⓘ

Plantuml renders inline UML diagrams from PlantUML source. It uses the kit's built-in PlantUML renderer. Requires a PlantUML server endpoint or local Java renderer configured at the kit level.

ComposeStack

The shipping-container visual for a docker-compose collection. Shown fully on the Compose Docker View page under the UI menus.

Responsive grid

All widgets respect their parent container width. Tabs wrap their labels on narrow viewports; Steps reflow multi-line content; tables scroll horizontally when needed. The demo page itself is designed to be tested at any breakpoint from 360 px upward.

End of widget gallery. All components rendered by the doc site's MDX component map.

Tabs​

Admonition​

Steps​

Badge​

Reveal​

KeyVal​

SpecTable​

Plantuml​

ComposeStack​

Responsive grid​