---
name: "@ncdai"
slug: "ncdai"
description: "ncdai is the personal shadcn/ui registry embedded in Chanh Dai's developer portfolio site (chanhdai.com), built with Next.js 16 and Tailwind CSS v4. The registry exposes pixel-perfect, uniquely crafted components and pages documented with live previews, code snippets, and one-click install commands (pnpm/npm/yarn/bun). The portfolio itself demonstrates the registry's quality: light/dark themes, vCard integration, PWA support, PostHog/OpenPanel analytics, and MDX-powered content. MIT licensed — code is free to use after removing personal information. Use for: borrowing high-craft, design-engineer-level shadcn components that show attention to pixel-perfect detail and Tailwind v4 patterns."
category: "Personal/portfolio registry"
tags: ["aesthetic", "ai", "animation", "audio", "auth", "backgrounds", "blocks", "buttons", "cards", "charts", "cms", "dashboard", "forms", "hooks", "icons", "loaders", "maps", "marketing", "media", "mobile", "navigation", "retro", "theming"]
framework: "react"
license: "MIT"
author: "ncdai"
website: "https://chanhdai.com/components"
github: "https://github.com/ncdai/chanhdai.com"
registry: "https://chanhdai.com/r/registry.json"
pro: false
pro_url: null
github_stars: 2110
component_count: 62
generated_at: "2026-07-28T08:59:05.895Z"
---

# @ncdai

ncdai is the personal shadcn/ui registry embedded in Chanh Dai's developer portfolio site (chanhdai.com), built with Next.js 16 and Tailwind CSS v4. The registry exposes pixel-perfect, uniquely crafted components and pages documented with live previews, code snippets, and one-click install commands (pnpm/npm/yarn/bun). The portfolio itself demonstrates the registry's quality: light/dark themes, vCard integration, PWA support, PostHog/OpenPanel analytics, and MDX-powered content. MIT licensed — code is free to use after removing personal information. Use for: borrowing high-craft, design-engineer-level shadcn components that show attention to pixel-perfect detail and Tailwind v4 patterns.

## Links

- Website: https://chanhdai.com/components
- GitHub: https://github.com/ncdai/chanhdai.com
- Registry JSON: https://chanhdai.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/ncdai
- This file: https://sh4dcn.vercel.app/md/ncdai.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://chanhdai.com/r/registry.json
pnpm dlx shadcn@latest add https://chanhdai.com/r/registry.json
bunx shadcn@latest add https://chanhdai.com/r/registry.json
# clone the source repo
git clone https://github.com/ncdai/chanhdai.com.git
# fetch the raw registry index
curl -s https://chanhdai.com/r/registry.json
```

## Components (62)

| name | type | description | install |
| --- | --- | --- | --- |
| haptic | registry:lib | Trigger haptic feedback on mobile devices. | `npx shadcn@latest add https://chanhdai.com/r/haptic.json` |
| use-sound | registry:hook | Hook for playing sound effects with volume, playback rate, and interrupt controls. | `npx shadcn@latest add https://chanhdai.com/r/use-sound.json` |
| use-controllable-state | registry:hook | useControllableState | `npx shadcn@latest add https://chanhdai.com/r/use-controllable-state.json` |
| theme-switcher | registry:component | Toggle between system, light, and dark themes in Next.js apps. | `npx shadcn@latest add https://chanhdai.com/r/theme-switcher.json` |
| text-flip | registry:component | Animated text that cycles through items with a smooth flip transition. | `npx shadcn@latest add https://chanhdai.com/r/text-flip.json` |
| apple-hello-effect | registry:component | SVG writing animation inspired by Apple’s Hello screen. | `npx shadcn@latest add https://chanhdai.com/r/apple-hello-effect.json` |
| apple-hello-effect-hindi | registry:component | SVG writing animation inspired by Apple’s Hello screen. | `npx shadcn@latest add https://chanhdai.com/r/apple-hello-effect-hindi.json` |
| apple-hello-effect-spanish | registry:component | SVG writing animation inspired by Apple’s Hello screen. | `npx shadcn@latest add https://chanhdai.com/r/apple-hello-effect-spanish.json` |
| apple-hello-effect-vietnamese | registry:component | SVG writing animation inspired by Apple’s Hello screen. | `npx shadcn@latest add https://chanhdai.com/r/apple-hello-effect-vietnamese.json` |
| wheel-picker | registry:component | iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support. | `npx shadcn@latest add https://chanhdai.com/r/wheel-picker.json` |
| chevrons-up-down-icon | registry:component | Animated chevrons icon that morphs between up and down directions. | `npx shadcn@latest add https://chanhdai.com/r/chevrons-up-down-icon.json` |
| typography | registry:component | Custom prose styles for headings, links, inline code, and emphasis. | `npx shadcn@latest add https://chanhdai.com/r/typography.json` |
| work-experience | registry:component | Display work experiences with role details, company logos, and durations. | `npx shadcn@latest add https://chanhdai.com/r/work-experience.json` |
| shimmering-text | registry:component | Smooth, light-sweeping shimmer animation for text. | `npx shadcn@latest add https://chanhdai.com/r/shimmering-text.json` |
| slide-to-unlock | registry:component | Interactive slider inspired by the classic iPhone “slide to unlock” gesture. | `npx shadcn@latest add https://chanhdai.com/r/slide-to-unlock.json` |
| testimonials-marquee | registry:component | Scrolling marquee to showcase user testimonials. | `npx shadcn@latest add https://chanhdai.com/r/testimonials-marquee.json` |
| testimonial | registry:component | Display user feedback with author info, avatar, and verified badge. | `npx shadcn@latest add https://chanhdai.com/r/testimonial.json` |
| github-stars | registry:component | Display GitHub repo star count with formatted numbers and full-count tooltip. | `npx shadcn@latest add https://chanhdai.com/r/github-stars.json` |
| scroll-fade-effect | registry:component | Fade content edges as you scroll, for both vertical and horizontal layouts. | `npx shadcn@latest add https://chanhdai.com/r/scroll-fade-effect.json` |
| consent-manager | registry:component | Cookie and tracking consent banner for Next.js, built on c15t. | `npx shadcn@latest add https://chanhdai.com/r/consent-manager.json` |
| copy-button | registry:component | Copy text to clipboard with visual, haptic, and audio feedback. | `npx shadcn@latest add https://chanhdai.com/r/copy-button.json` |
| code-block-command | registry:component | Display install commands with package manager switcher and copy button. | `npx shadcn@latest add https://chanhdai.com/r/code-block-command.json` |
| testimonial-spotlight | registry:component | Testimonial card with spotlight effect on hover. | `npx shadcn@latest add https://chanhdai.com/r/testimonial-spotlight.json` |
| glow-card-grid | registry:component | Display cards with glowing border and background effects. | `npx shadcn@latest add https://chanhdai.com/r/glow-card-grid.json` |
| middle-truncation | registry:component | Truncate text in the middle while preserving start and end. | `npx shadcn@latest add https://chanhdai.com/r/middle-truncation.json` |
| twemoji | registry:component | Render Unicode emoji as Twemoji SVG images inline with text. | `npx shadcn@latest add https://chanhdai.com/r/twemoji.json` |
| elastic-slider | registry:component | Slider with elastic rubber-band drag and magnetic snap feedback. | `npx shadcn@latest add https://chanhdai.com/r/elastic-slider.json` |
| contribution-graph | registry:component | A GitHub-style contribution graph component that displays activity levels over time. | `npx shadcn@latest add https://chanhdai.com/r/contribution-graph.json` |
| github-contributions | registry:component | Visualize year-long GitHub contribution activity with daily counts, tooltips, and a profile link. | `npx shadcn@latest add https://chanhdai.com/r/github-contributions.json` |
| toc-minimap | registry:component | Navigate page sections with a compact, hoverable TOC minimap. | `npx shadcn@latest add https://chanhdai.com/r/toc-minimap.json` |
| fluid-gradient-text | registry:component | Render text with a fluid gradient that shifts with pointer movement. | `npx shadcn@latest add https://chanhdai.com/r/fluid-gradient-text.json` |
| brand-assets-menu | registry:component | Context menu for copying brand SVGs and opening asset links. | `npx shadcn@latest add https://chanhdai.com/r/brand-assets-menu.json` |
| icon-swap | registry:component | Animate icon swaps with scale, blur, and fade transitions. | `npx shadcn@latest add https://chanhdai.com/r/icon-swap.json` |
| dot-grid-spotlight | registry:component | Interactive dot grid with a cursor-tracking spotlight effect. | `npx shadcn@latest add https://chanhdai.com/r/dot-grid-spotlight.json` |
| spinning-circular-text | registry:component | Text arranged in a circle with a continuous spinning animation. | `npx shadcn@latest add https://chanhdai.com/r/spinning-circular-text.json` |
| mobius-loop-icon | registry:component | Animated Mobius loop icon that morphs between circles and infinity shape. | `npx shadcn@latest add https://chanhdai.com/r/mobius-loop-icon.json` |
| logos-carousel | registry:component | Cycle through logos column by column in a staggered wave. | `npx shadcn@latest add https://chanhdai.com/r/logos-carousel.json` |
| testimonial-2 | registry:component | Display a testimonial quote with author attribution and source link. | `npx shadcn@latest add https://chanhdai.com/r/testimonial-2.json` |
| line-nav | registry:component | Vertical navigation with a line marker that expands on hover and active state. | `npx shadcn@latest add https://chanhdai.com/r/line-nav.json` |
| share-menu | registry:component | Share menu to copy a link or post to X, LinkedIn, and the native share sheet. | `npx shadcn@latest add https://chanhdai.com/r/share-menu.json` |
| spotlight-logo | registry:component | SVG logo with a cursor-tracking gradient highlight and tactile press. | `npx shadcn@latest add https://chanhdai.com/r/spotlight-logo.json` |
| timescale | registry:component | Ruler-style timeline for plotting milestones along a horizontal or vertical axis. | `npx shadcn@latest add https://chanhdai.com/r/timescale.json` |
| login-01 | registry:block | A simple login form. | `npx shadcn@latest add https://chanhdai.com/r/login-01.json` |
| hero-01 | registry:block | A hero section with a golden spiral background. | `npx shadcn@latest add https://chanhdai.com/r/hero-01.json` |
| blog-01 | registry:block | A blog section with a grid layout. | `npx shadcn@latest add https://chanhdai.com/r/blog-01.json` |
| blog-02 | registry:block | A blog section with a lined grid layout. | `npx shadcn@latest add https://chanhdai.com/r/blog-02.json` |
| testimonials-01 | registry:block | A testimonials section with dual marquees. | `npx shadcn@latest add https://chanhdai.com/r/testimonials-01.json` |
| testimonials-02 | registry:block | A testimonials section with a lined layout. | `npx shadcn@latest add https://chanhdai.com/r/testimonials-02.json` |
| experience-01 | registry:block | A work experience section with a lined layout. | `npx shadcn@latest add https://chanhdai.com/r/experience-01.json` |
| team-01 | registry:block | A team section with glowing cards. | `npx shadcn@latest add https://chanhdai.com/r/team-01.json` |
| metrics-01 | registry:block | A metrics section with a line chart. | `npx shadcn@latest add https://chanhdai.com/r/metrics-01.json` |
| social-links-01 | registry:block | A social links section with a lined grid layout. | `npx shadcn@latest add https://chanhdai.com/r/social-links-01.json` |
| social-proof-01 | registry:block | A social proof section with a logos carousel. | `npx shadcn@latest add https://chanhdai.com/r/social-proof-01.json` |
| style | registry:style | — | `npx shadcn@latest add https://chanhdai.com/r/style.json` |
| theme-toggle-effect-triangle | registry:style | — | `npx shadcn@latest add https://chanhdai.com/r/theme-toggle-effect-triangle.json` |
| theme-toggle-effect-triangle-blur | registry:style | — | `npx shadcn@latest add https://chanhdai.com/r/theme-toggle-effect-triangle-blur.json` |
| theme-toggle-effect-circle | registry:style | — | `npx shadcn@latest add https://chanhdai.com/r/theme-toggle-effect-circle.json` |
| theme-toggle-effect-circle-blur | registry:style | — | `npx shadcn@latest add https://chanhdai.com/r/theme-toggle-effect-circle-blur.json` |
| theme-toggle-effect-circle-blur-top-left | registry:style | — | `npx shadcn@latest add https://chanhdai.com/r/theme-toggle-effect-circle-blur-top-left.json` |
| theme-toggle-effect-polygon | registry:style | — | `npx shadcn@latest add https://chanhdai.com/r/theme-toggle-effect-polygon.json` |
| theme-toggle-effect-polygon-gradient | registry:style | — | `npx shadcn@latest add https://chanhdai.com/r/theme-toggle-effect-polygon-gradient.json` |
| thin-scrollbar | registry:style | — | `npx shadcn@latest add https://chanhdai.com/r/thin-scrollbar.json` |

## For AI agents

```text
You are adding components from @ncdai to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/ncdai.md) for the component list.
2. Fetch the machine-readable index: https://chanhdai.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: ncdai).
```