chanhdai.com ·

A minimal, pixel-perfect dev portfolio, shadcn registry, and blog to showcase my work as a Design Engineer.

→ Check out the live site: chanhdai.com

Overview

Stack

Next.js 16
Tailwind CSS v4
shadcn/ui

Featured

Clean & modern design
Light/Dark themes
vCard integration
SEO optimized (JSON-LD schema, sitemap, robots)
AI-ready with /llms.txt
Spam-protected email
Installable as PWA
Analytics with PostHog and OpenPanel
Consent management via c15t

Content

Centralized document system powered by MDX:

Unified content layer for blog posts and component docs
Category-based content organization
Raw .mdx endpoints for AI readability
Syntax highlighting with code blocks
Dynamic OG images for rich link previews
RSS feed for content distribution

Registry

Easily build and distribute reusable components, hooks, and pages using a custom registry powered by the shadcn CLI.

Each entry is well-documented and includes:

Live preview & code snippets
Beautiful, readable code blocks
One-click command blocks (pnpm, npm, yarn, bun)

Development

Please refer to the Development Guide for more details.

License

Licensed under the MIT license.

You're free to use my code! Just make sure to <ins>remove all my personal information</ins> before publishing your website. It's awesome to see my code being useful to someone!

Contributors

Made with contrib.rocks

Sponsors

This project is proudly supported by:

<table> <tbody> <tr> <td colspan="3"><strong>Open Source Program</strong></td> </tr> <tr> <td> <a href="https://openpanel.dev/open-source?utm_source=chanhdai.com#gh-light-mode-only"> <img src="https://assets.chanhdai.com/images/sponsors/openpanel.svg?v=1#gh-light-mode-only" alt="OpenPanel" /> </a> <a href="https://openpanel.dev/open-source?utm_source=chanhdai.com#gh-dark-mode-only"> <img src="https://assets.chanhdai.com/images/sponsors/openpanel-dark.svg?v=1#gh-dark-mode-only" alt="OpenPanel" /> </a> </td> <td></td> <td></td> </tr> <tr> <td colspan="3"><strong>Gold Sponsors</strong></td> </tr> <tr> <td> <a href="https://shadcnstudio.com?utm_source=chanhdai.com&utm_medium=banner&utm_campaign=github#gh-light-mode-only"> <img src="https://assets.chanhdai.com/images/sponsors/shadcnstudio.svg?v=2#gh-light-mode-only" alt="shadcnstudio.com" /> </a> <a href="https://shadcnstudio.com?utm_source=chanhdai.com&utm_medium=banner&utm_campaign=github#gh-dark-mode-only"> <img src="https://assets.chanhdai.com/images/sponsors/shadcnstudio-dark.svg?v=2#gh-dark-mode-only" alt="shadcnstudio.com" /> </a> </td> <td> <a href="https://shadcnspace.com#gh-light-mode-only"> <img src="https://assets.chanhdai.com/images/sponsors/shadcnspace.svg?v=3#gh-light-mode-only" alt="Shadcn Space" /> </a> <a href="https://shadcnspace.com#gh-dark-mode-only"> <img src="https://assets.chanhdai.com/images/sponsors/shadcnspace-dark.svg?v=3#gh-dark-mode-only" alt="Shadcn Space" /> </a> </td> <td></td> </tr> <tr> <td colspan="3"><strong>Silver Sponsors</strong></td> </tr> <tr> <td> <a href="https://shadcncraft.com?utm_source=chanhdai.com#gh-light-mode-only"> <img src="https://assets.chanhdai.com/images/sponsors/shadcncraft.svg?v=1#gh-light-mode-only" alt="shadcncraft" /> </a> <a href="https://shadcncraft.com?utm_source=chanhdai.com#gh-dark-mode-only"> <img src="https://assets.chanhdai.com/images/sponsors/shadcncraft-dark.svg?v=1#gh-dark-mode-only" alt="shadcncraft" /> </a> </td> <td> <a href="https://www.shadcnblocks.com?utm_source=chanhdai.com#gh-light-mode-only"> <img src="https://assets.chanhdai.com/images/sponsors/shadcnblocks.svg?v=1#gh-light-mode-only" alt="Shadcnblocks" /> </a> <a href="https://www.shadcnblocks.com?utm_source=chanhdai.com#gh-dark-mode-only"> <img src="https://assets.chanhdai.com/images/sponsors/shadcnblocks-dark.svg?v=1#gh-dark-mode-only" alt="Shadcnblocks" /> </a> </td> <td> <a href="https://reactbits.dev?utm_source=chanhdai.com#gh-light-mode-only"> <img src="https://assets.chanhdai.com/images/sponsors/reactbits.svg?v=1#gh-light-mode-only" alt="React Bits" /> </a> <a href="https://reactbits.dev?utm_source=chanhdai.com#gh-dark-mode-only"> <img src="https://assets.chanhdai.com/images/sponsors/reactbits-dark.svg?v=1#gh-dark-mode-only" alt="React Bits" /> </a> </td> </tr> <tr> <td colspan="3"><strong>Spark Supporters</strong></td> </tr> <tr> <td> <a href="https://uirules.com?utm_source=chanhdai.com#gh-light-mode-only"> <img src="https://assets.chanhdai.com/images/sponsors/uirules.svg?v=1#gh-light-mode-only" alt="UI Rules" /> </a> <a href="https://uirules.com?utm_source=chanhdai.com#gh-dark-mode-only"> <img src="https://assets.chanhdai.com/images/sponsors/uirules-dark.svg?v=1#gh-dark-mode-only" alt="UI Rules" /> </a> </td> <td> <a href="https://shoogle.dev?utm_source=chanhdai.com#gh-light-mode-only"> <img src="https://assets.chanhdai.com/images/sponsors/shoogle.svg?v=1#gh-light-mode-only" alt="Shoogle" /> </a> <a href="https://shoogle.dev?utm_source=chanhdai.com#gh-dark-mode-only"> <img src="https://assets.chanhdai.com/images/sponsors/shoogle-dark.svg?v=1#gh-dark-mode-only" alt="Shoogle" /> </a> </td> <td> <a href="https://www.fonttrio.xyz?utm_source=chanhdai.com#gh-light-mode-only"> <img src="https://assets.chanhdai.com/images/sponsors/fonttrio.svg?v=1#gh-light-mode-only" alt="Fonttrio" /> </a> <a href="https://www.fonttrio.xyz?utm_source=chanhdai.com#gh-dark-mode-only"> <img src="https://assets.chanhdai.com/images/sponsors/fonttrio-dark.svg?v=1#gh-dark-mode-only" alt="Fonttrio" /> </a> </td> </tr> </tbody> </table>

Found this project useful? Sponsor me to help with support and maintenance.

Chanhdai.com

Install / Use

README