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