All quizzes
Free quiz · 20 questions in the bank

shadcn/ui quiz

Test your shadcn/ui knowledge with a free interactive quiz — 20 questions with answers and explanations. No signup needed to play.

Question 1/12Score 0

How does customizing a shadcn/ui component's appearance typically differ from customizing a component in a traditional, npm-installed component library?

In this round
  1. How does customizing a shadcn/ui component's appearance typically differ from customizing a component in a traditional, npm-installed component library?
  2. What is the significance of shadcn/ui components being "copy-pasted" into a project rather than installed as a traditional npm dependency?
  3. What is the purpose of the `components.json` configuration file in a shadcn/ui-enabled project?
  4. How does shadcn/ui's reliance on Radix UI primitives for components like Dialog or DropdownMenu benefit the resulting components' accessibility?
  5. What is shadcn/ui?
  6. What is a `Form` component pattern commonly used with shadcn/ui, often built alongside `react-hook-form` and a schema validation library like Zod?
  7. 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?
  8. What two underlying technologies does shadcn/ui build its components on top of?
  9. How do you typically add a new shadcn/ui component to a project?
  10. What does it mean that shadcn/ui is not tied to any specific meta-framework (usable with Next.js, Vite, Remix, etc.)?
  11. What is the role of `class-variance-authority` (cva), a library commonly used within shadcn/ui component source, particularly for something like a `Button` component with multiple variants?
  12. What does it mean that shadcn/ui is sometimes described as a "component distribution" model rather than a traditional "component library"?
Gaps to close?
Read the curated shadcn/ui notes — core concepts, patterns, interview prep.
shadcn/ui notes

More quizzes

.NET.NET MAUIAbsintheAccessibilityActixActix Web