Test your shadcn/ui knowledge with a free interactive quiz — 20 questions with answers and explanations. No signup needed to play.
Question 1/5Score 0
What is `cn()` (commonly a small utility combining `clsx` and `tailwind-merge`), which shadcn/ui components frequently use internally?
Questions in this quiz
What is `cn()` (commonly a small utility combining `clsx` and `tailwind-merge`), which shadcn/ui components frequently use internally?
What is shadcn/ui?
What is a reasonable strategy for a team wanting to eventually update shadcn/ui components after they've already been customized in a project?
What is the purpose of the `asChild` pattern (inherited from Radix UI) as it shows up in shadcn/ui components like `Button`?
What does it mean that shadcn/ui is sometimes described as a "component distribution" model rather than a traditional "component library"?
What two underlying technologies does shadcn/ui build its components on top of?
Why might a team specifically choose shadcn/ui over a traditional npm-installed component library like Material UI or Chakra UI for a project with a highly custom design system?
What is the significance of shadcn/ui components being written in TypeScript?
How does shadcn/ui's model compare conceptually to simply copying example code from a component library's documentation page into your own project by hand?
What is a `Form` component pattern commonly used with shadcn/ui, often built alongside `react-hook-form` and a schema validation library like Zod?
How does shadcn/ui commonly handle theming (e.g. supporting both a light and dark mode) across its components?
How do you typically add a new shadcn/ui component to a project?