shadcn/ui topics
12 short topics in UI UX and Design Systems. Each one is a single focused exercise with a clear piece of evidence at the end.
12 topics, one exercise each.
Work through them in order, or jump to the one you need.
These are draft topic outlines (draft; instructor review pending). Full lessons follow after review; ask Ajay if you need a topic sooner.
- 01
Component API and composition
Demonstrate component api and composition in a focused shadcn/ui example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 02
Theme configuration and overrides
Demonstrate theme configuration and overrides in a focused shadcn/ui example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 03
Token and variable design
Demonstrate token and variable design in a focused shadcn/ui example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 04
Layout primitives and spacing
Demonstrate layout primitives and spacing in a focused shadcn/ui example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 05
Form and input presentation
Demonstrate form and input presentation in a focused shadcn/ui example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 06
Accessible focus and keyboard behavior
Demonstrate accessible focus and keyboard behavior in a focused shadcn/ui example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 07
Responsive component adaptation
Demonstrate responsive component adaptation in a focused shadcn/ui example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 08
Overlay and modal interactions
Demonstrate overlay and modal interactions in a focused shadcn/ui example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 09
Styling specificity and isolation
Demonstrate styling specificity and isolation in a focused shadcn/ui example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 10
Interaction-state consistency
Demonstrate interaction-state consistency in a focused shadcn/ui example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 11
Component documentation and examples
Demonstrate component documentation and examples in a focused shadcn/ui example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 12
Visual and interaction regression review
Demonstrate visual and interaction regression review in a focused shadcn/ui example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course →
Learn the same ideas beyond shadcn/ui.
These courses share topics with this one, so you can compare how each language or tool handles the same concept.
More in CSS UI and design systems.
You have the curiosity.
Let’s turn it into capability.
Start with a practical workshop or bring a specific question to Ajay.