Skip to content
Dave Andrea
Theme

Blog Component Library Demo

This page showcases the reusable MDX components available to authors. Mix and match callouts, attention banners, checklists, key takeaway grids, inline badges, and interactive React islands to elevate your blog posts.

How to use these

Import the components directly inside your MDX files (or Astro pages) from src/components/mdx/. Each component respects the site’s theme tokens, so they automatically stay on-brand.

Callouts & Notices

Use <Notice /> blocks to highlight information. Choose from info, success, tip, warning, danger, or neutral intents, and customise the icon or spacing.

Quick tip

Hydrate React islands sparingly. Prefer client:idle or client:visible unless the component must load immediately.

Success state

Great news! The new component library is ready for production use across all MDX-powered posts.

Heads up

Avoid stacking multiple interactive components back-to-back; introduce a short explanation to set context for readers.

Compact example

Compact mode trims padding for inline notes or subtle asides.

Attention Banners

Attention banners help you announce launches, promotions, or important reminders with an optional call-to-action button.

Checklists

Present onboarding steps, publishing workflows, or project requirements in a friendly checklist. Each item supports a title, optional detail, and status.

  • Draft your post in MDX

    Write markdown, sprinkle in components, and preview locally.

  • Add callouts where needed

    Pick the intent that matches the message tone.

  • Embed interactive insights

    Hydrate metrics or demos using React islands.

Key Takeaways Grid

Summarise the most important points with a responsive grid. Adjust the column count to fit your narrative.

Key takeaways

Theme-aware

All components inherit the current daisyUI / Tailwind theme.

MDX-friendly APIs

Declarative props keep authors focused on content, not markup.

Composable

Mix notices, badges, and interactive blocks on the same page.

Accessible defaults

Semantic HTML and readable contrast out of the box.

Lightweight

React islands hydrate only when necessary.

Documented

See <code>mdx-demo.mdx</code> for usage snippets per component.

Inline Badges

Inline badges call attention to short phrases without breaking the paragraph flow. Wrap them in links for quick references or tags.

Performance target: 95 Lighthouse Accessibility status: Review contrast Docs: MDX reference

React Islands & Hydration Modes

Combine the component library with interactive React widgets. Use hydration directives to balance performance and interactivity.

Interactive counter

Welcome to MDX!

This interactive block is rendered with React, hydrated on the client.

Why client:load?

The counter needs immediate interactivity, so we hydrate it on page load. Use this directive sparingly for above-the-fold UI.

Idle-hydrated swatches

Tip: click a swatch to copy the hex value to your clipboard.

Performance win

Copy-to-clipboard interactions hydrate once the browser is idle, so initial render stays fast.

Monthly readers

48k

+12% vs last month

Newsletter signups

2.4k

+240 this week

Time on page

4m 12s

steady engagement

client:visible demo

This component hydrates only when you scroll it into view. The heartbeat updates every second once it is active.

Ticks
00
Last ping
7:56:09 PM

Ready to publish

Mix these building blocks to craft compelling, on-brand articles. When you create a new MDX file using npm run new:post:mdx, import the components you need and compose your story with confidence.