chanhdai.com

A pixel-perfect dev portfolio and shadcn registry showcasing my work as a Design Engineer.

→ 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 OpenPanel

Content

Centralized document system powered by MDX:

• Unified content layer for blog posts and component docs
• Category-based content organization
• Raw .md 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

Everything in this repository is licensed under the MIT license, with one exception: my name and my logo, which are covered by the trademark and brand policy.

So the code and the writing are yours. Fork it, copy it, quote it, translate it. Just make sure to remove all my personal information and swap the branding before publishing your website. It's awesome to see my code being useful to someone!

Contributors

Sponsors

This project is proudly supported by:

      </picture>
    </a>
  </td>
  <td>
    <a href="https://openpanel.dev/open-source?utm_source=chanhdai.com">
      <picture>
        <source
          media="(prefers-color-scheme: dark)"
          srcset="https://assets.chanhdai.com/images/sponsors/openpanel-dark.svg"
        />
        

      </picture>
    </a>
  </td>
  <td>
    <a href="https://posthog.com/startups?utm_source=chanhdai.com">
      <picture>
        <source
          media="(prefers-color-scheme: dark)"
          srcset="https://assets.chanhdai.com/images/sponsors/posthog-dark.svg"
        />
        

      </picture>
    </a>
  </td>
</tr>
<tr>
  <td colspan="3"><strong>Platinum Sponsors</strong></td>
</tr>
<tr>
  <td>
    <a href="https://www.nixtla.io?utm_source=chanhdai.com">
      <picture>
        <source
          media="(prefers-color-scheme: dark)"
          srcset="https://assets.chanhdai.com/images/sponsors/nixtla-dark.svg"
        />
        

      </picture>
    </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">
      <picture>
        <source
          media="(prefers-color-scheme: dark)"
          srcset="https://assets.chanhdai.com/images/sponsors/shadcnstudio-dark.svg"
        />
        

      </picture>
    </a>
  </td>
  <td>
    <a href="https://shadcnspace.com?utm_source=chanhdai.com">
      <picture>
        <source
          media="(prefers-color-scheme: dark)"
          srcset="https://assets.chanhdai.com/images/sponsors/shadcnspace-dark.svg"
        />
        

      </picture>
    </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">
      <picture>
        <source
          media="(prefers-color-scheme: dark)"
          srcset="https://assets.chanhdai.com/images/sponsors/shadcncraft-dark.svg"
        />
        

      </picture>
    </a>
  </td>
  <td>
    <a href="https://www.shadcnblocks.com?utm_source=chanhdai.com">
      <picture>
        <source
          media="(prefers-color-scheme: dark)"
          srcset="https://assets.chanhdai.com/images/sponsors/shadcnblocks-dark.svg"
        />
        

      </picture>
    </a>
  </td>
  <td>
    <a href="https://reactbits.dev?utm_source=chanhdai.com">
      <picture>
        <source
          media="(prefers-color-scheme: dark)"
          srcset="https://assets.chanhdai.com/images/sponsors/reactbits-dark.svg"
        />
        

      </picture>
    </a>
  </td>
</tr>
<tr>
  <td>
    <a href="https://obelinf.com?utm_source=chanhdai.com">
      <picture>
        <source
          media="(prefers-color-scheme: dark)"
          srcset="https://assets.chanhdai.com/images/sponsors/obelinf-dark.svg"
        />
        

      </picture>
    </a>
  </td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td colspan="3"><strong>Spark Supporters</strong></td>
</tr>
<tr>
  <td>
    <a href="https://uirules.com?utm_source=chanhdai.com">
      <picture>
        <source
          media="(prefers-color-scheme: dark)"
          srcset="https://assets.chanhdai.com/images/sponsors/uirules-dark.svg"
        />
        

      </picture>
    </a>
  </td>
  <td>
    <a href="https://shoogle.dev?utm_source=chanhdai.com">
      <picture>
        <source
          media="(prefers-color-scheme: dark)"
          srcset="https://assets.chanhdai.com/images/sponsors/shoogle-dark.svg"
        />
        

      </picture>
    </a>
  </td>
  <td>
    <a href="https://www.fonttrio.xyz?utm_source=chanhdai.com">
      <picture>
        <source
          media="(prefers-color-scheme: dark)"
          srcset="https://assets.chanhdai.com/images/sponsors/fonttrio-dark.svg"
        />
        

      </picture>
    </a>
  </td>
</tr>
<tr>
  <td>
    <a href="https://github.com/AnukarOP">
      <picture>
        <source
          media="(prefers-color-scheme: dark)"
          srcset="https://assets.chanhdai.com/images/sponsors/anukar-dark.svg"
        />
        

      </picture>
    </a>
  </td>
  <td align="center"><a href="https://github.com/raksalim">Raksa Lim</a></td>
  <td align="center"><a href="https://lndev.me?utm_source=chanhdai.com">Leonel Ngoya</a></td>
</tr>
<tr>
  <td align="center"><a href="https://github.com/fadymondy">Fady Mondy</a></td>
  <td></td>
  <td></td>
</tr>

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

Stats