Good practices with shadcn/ui: accessibility, variants and consistency

shadcn/ui helps teams move quickly with well-designed components styled through Tailwind. Consistent practices are essential for long-term use.

1. Predictable variants

• Adopt variant and size conventions, such as primary, secondary and ghost buttons in small, medium and large sizes.
• Expose a few meaningful variants instead of every possible combination.
• Document when a new variant should be created and the context it serves.

2. Accessibility by default

• Respect aria properties and focus states.
• Maintain color contrast across variants and dark mode.
• Use existing primitives such as AlertDialog and Dialog before creating replacements.

3. Composition instead of duplication

• Extend components through composition and slots instead of copying them.
• Use asChild where appropriate to preserve element semantics.

4. Tokens and themes

• Centralize tokens in Tailwind and keep components visually coherent.
• Avoid arbitrary utility values in base components; standardize through tokens.

5. Testability

• Use data-testid on critical components for end-to-end tests.
• Keep variant contracts stable to avoid unnecessary snapshot breakage.

Conclusion

shadcn/ui delivers speed and quality when supported by limits and conventions. The result is a cohesive, accessible system that is easier to evolve.