Chanh Dai Components
Chanh Dai's component showcase is a high-craft Tailwind/shadcn reference for dense, sharp, component-forward UI patterns.
Routing Summary
Load this through Component Library Sources when the UI needs precise component execution rather than generic blocks. It is especially useful for dense tables, component demo strips, sharp panels, filter rows, docs/showcase structure, and the Tailwind/shadcn craft layer Kevin has explicitly used for Reticle/Sigil direction. Source: User request, 2026-06-26; https://chanhdai.com/components/showcase
The May 2026 bookmark adds a distribution-route signal: Chánh Đại built his portfolio as a custom shadcn/registry, then used a final bento-grid to combine the components he had shared over time. The reviewed local thumbnail shows the showcase as a dark, component-forward grid: time picker, slide-to-unlock control, slider fields, testimonial card, GitHub contribution grid, copy buttons, and code/file cards. Use this as evidence that a registry can be a portfolio and component distribution surface at once. Source: X/@iamncdai, 2026-05-05; Source: local video thumbnail, reviewed 2026-07-03
The theme-adaptive avatar demo adds a smaller craft reference: media inside a component should respond to theme, not merely sit on a different background. The reviewed video toggles light to dark and back while the avatar dims, desaturates, and recovers with the surrounding surface. Treat this as a token-driven media-state pattern for profile images, screenshots, and decorative imagery in dark-mode-aware products. Source: X/@iamncdai and local video contact sheet, 2026-07-04
Use When
- A screen needs a component showcase pattern where the marketing/product page proves the design system by making components interactive.
- A Tailwind/shadcn surface needs tighter spacing, sharper hierarchy, or less generic card language.
- A project wants visible craft in filter chips, hairline panels, code-demo blocks, dense controls, and component states.
- An agent is designing Reticle/Sigil-like interfaces and needs concrete implementation taste before writing code.
Integration Rules
- Treat the site as a craft reference, not a theme to clone.
- Preserve local tokens, typography, radius, borders, and density.
- Use the examples to study composition, state, and spacing before copying code.
- Verify mobile wrapping, overflow, and optical alignment after adapting the pattern.
Timeline
- 2026-07-04 | Deep-reviewed the theme-adaptive avatar demo. Added it as evidence for component-level media adaptation across light/dark themes, routed through Interface Micro-Polish. Source: X/@iamncdai, 2026-05-16
- 2026-07-03 | Deep-reviewed Chánh Đại's custom
shadcn/registrybookmark and local video thumbnail. Added it as evidence that high-craft component showcases can double as registry distribution surfaces: the portfolio bento previews reusable components while the registry path makes them installable. Source: X/@iamncdai, 2026-05-05; Source: local artifact review, 2026-07-03 - 2026-06-26 | Promoted from a row in Component Library Sources and Niche UI Inspiration Galleries into a dedicated tool page so design/design-system packs can load it directly. Source: User request, 2026-06-26; https://chanhdai.com/components/showcase