Skip to content
Theme
Accent
Voice
SkillCase StudiesComponentsExamplesThemingBest PracticesPhilosophyGitHub ↗

This whole registry and philosophy is available as a Claude Code Agent Skill — install it and Claude builds UI with it directly.

Install the Skill →
Components · Select

Select

$ npx @dhruvchoudhary/dsgn add select

Select, SelectTrigger, SelectContent, SelectItem, SelectValue built on Radix Select.

Selected value: lyric-viewer

<Select defaultValue="lyric-viewer">
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="lyric-viewer">lyric-viewer</SelectItem>
    <SelectItem value="file-viewer">file-viewer</SelectItem>
    <SelectItem value="review-grader">review-grader</SelectItem>
  </SelectContent>
</Select>
Accent
Voice
Corner radius

This is applied to the whole site live, not just this panel. Export it as CSS →