shadcn/ui
shadcn/ui is a popular approach: you **copy components into your codebase**. You own the code, styling, and behavior.
Why teams like it
- You can customize components deeply without fighting a vendor.
- Works well with Tailwind design tokens.
- Great accessibility defaults (when used correctly).
Recommended project structure
- `src/components/ui/*` for primitives (button, dialog, input)
- `src/components/*` for product components (pricing, navbar)
Preview: “glass” card pattern (click to reveal code)
html Glass card
Secure by default
Ship reusable UI primitives and keep tokens consistent.
Tip: design tokens first
- Define your “brand” colors and spacing scale in Tailwind config.
- Avoid one-off hex values sprinkled across components.
Page changelog
Last updated
- 2026-01-18—Initial or baseline update for this page.
Related articles
Getting Started
Tutorials Hub — Learn by Building
Step-by-step workflows that teach deployment, security, and operations by shipping small projects.
Getting Started
Glossary — Infrastructure Terms
Short, clear definitions for common deployment, networking, and security terminology.
Getting Started
Changelog — Documentation Updates
What changed recently in the documentation, plus guidance for versioning docs as code.
Getting Started
Support & FAQ
Quick answers, how to get help, and what information to include when reporting an issue.
Getting Started
Bootstrap — Classic CSS Framework (Fast Layouts)
Use Bootstrap for rapid grids and components, and learn how to override safely with real CSS snippets.
Getting Started
daisyUI — Tailwind Components via Class Names
Ship UI quickly with Tailwind + daisyUI class-based components, plus best practices for theming and consistency.
Was this page helpful?