Skip to content

feat(docs): add live component previews#12

Merged
yuichi-musubi merged 1 commit into
mainfrom
feat/docs-live-preview
Mar 25, 2026
Merged

feat(docs): add live component previews#12
yuichi-musubi merged 1 commit into
mainfrom
feat/docs-live-preview

Conversation

@yuichi-musubi
Copy link
Copy Markdown
Contributor

Summary

  • Add interactive component previews to docs pages with Preview/Code tab toggle
  • Use Fumadocs Tabs + custom ComponentPreview client component with React.lazy demo loading
  • Hareru UI portable CSS mode (tokens + components.layer + scope) for conflict-free rendering
  • RootProvider data-theme attribute bridging for automatic dark mode sync
  • 6 initial demos: Button, Card, Dialog, Input, Badge, Tabs

Test plan

  • pnpm build — 7/7 packages, verify-registry-docs passed
  • pnpm test — 685 passed
  • pnpm test:e2e — 65 passed
  • Manual: Preview tab renders live components
  • Manual: Code tab shows syntax-highlighted code
  • Manual: Dark mode toggle syncs with previews
  • Manual: No visual regression on existing docs pages

🤖 Generated with Claude Code

Add interactive component previews to docs pages using Fumadocs Tabs
and a lazy-loaded demo registry. Components render live inside a
.hui-root scoped container with Hareru UI portable CSS (tokens +
components.layer + scope) to avoid conflicts with Fumadocs styles.

- ComponentPreview client component with React.lazy demo loading
- 6 initial demos: Button, Card, Dialog, Input, Badge, Tabs
- RootProvider theme attribute bridged for dark mode sync
- Fumadocs Tabs/Tab registered in MDX components map
- Tab cursor:pointer fix for Fumadocs TabsTrigger

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 25, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
hareru-ui-docs Ready Ready Preview, Comment Mar 25, 2026 9:24am

Request Review

@yuichi-musubi yuichi-musubi merged commit b491cf0 into main Mar 25, 2026
4 checks passed
@yuichi-musubi yuichi-musubi deleted the feat/docs-live-preview branch March 25, 2026 09:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant