Home› Tutorials› CSS› Chapter 39: UI Components

UI Components

🎨 CSS3+ 🟢 Chapter 39 of 49 📂 Phase 14: Forms & UI Components 📅 2026 Edition
📌 Covered in this chapter: Buttons · Cards · Alerts · Badges · Navbars · Sidebars · Modals · Dropdowns · Tabs · Accordions · Tooltips · Breadcrumbs · Pagination · Tables · Skeletons
Welcome to Chapter 39: UI Components — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
📚 What You Will Learn
  • Reusable button, card, alert, badge component patterns
  • Navigation bar, sidebar, modal, dropdown CSS architecture
  • Tabs, accordion, tooltip, breadcrumb, pagination styling
  • Data table styling and loading skeleton animations
  • Component-based CSS that scales across large projects
💡 Why This Matters

Modern websites are built from UI components — not individual pages. Learning to style buttons, cards, modals, and navbars with consistent CSS patterns is what separates beginner developers from professional frontend engineers.

1Buttons — Primary, Secondary, Ghost
CSS — Button System▶ Try in Editor
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 150ms, transform 150ms, box-shadow 150ms;
}

.btn-primary {
  background: #2563eb;
  color: #fff;
}

.btn-primary:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.btn-secondary {
  background: transparent;
  color: #2563eb;
  border-color: #2563eb;
}

.btn-ghost {
  background: transparent;
  color: #374151;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
2Cards, Alerts & Badges
CSS — Card + Alert + Badge▶ Try in Editor
.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 200ms, transform 200ms;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

.alert {
  padding: 14px 18px;
  border-radius: 8px;
  border-left: 4px solid;
  font-size: 0.9375rem;
}

.alert--success { background: #f0fdf4; border-color: #16a34a; color: #166534; }
.alert--error   { background: #fef2f2; border-color: #dc2626; color: #991b1b; }
.alert--info    { background: #eff6ff; border-color: #2563eb; color: #1e40af; }

.badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
}
3Navigation Bar & Sidebar
HTML + CSS — Navbar▶ Try in Editor
CSS▶ Try in Editor
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 24px;
  background: #111827;
}

.navbar__brand {
  color: #fff;
  font-weight: 800;
  font-size: 1.125rem;
  text-decoration: none;
}

.navbar__links {
  display: flex;
  gap: 16px;
}

.navbar__links a {
  color: #d1d5db;
  text-decoration: none;
  font-weight: 500;
  transition: color 150ms;
}

.navbar__links a:hover { color: #fff; }

.sidebar {
  width: 240px;
  min-height: 100vh;
  background: #f9fafb;
  border-right: 1px solid #e5e7eb;
  padding: 20px 12px;
  position: sticky;
  top: 0;
}
Property / SelectorExplanation
display: flexNavbar items horizontal row lo arrange
justify-content: space-betweenBrand left, links right
gap: 24pxItems madhya consistent spacing
position: sticky; top: 0Sidebar scroll ayina top lo stick avuthundi
4Modals, Dropdowns & Tabs
CSS — Modal Overlay▶ Try in Editor
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.modal {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.tabs { display: flex; border-bottom: 2px solid #e5e7eb; gap: 0; }
.tab {
  padding: 12px 20px;
  background: none;
  border: none;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.tab--active { color: #2563eb; border-bottom-color: #2563eb; }
5Accordion, Tables & Loading Skeletons
CSS — Accordion + Table + Skeleton▶ Try in Editor
.accordion-item { border-bottom: 1px solid #e5e7eb; }
.accordion-trigger {
  width: 100%; padding: 16px; background: none; border: none;
  text-align: left; font-weight: 600; cursor: pointer;
  display: flex; justify-content: space-between;
}
.accordion-content { padding: 0 16px 16px; color: #4b5563; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
  padding: 12px 16px; text-align: left; border-bottom: 1px solid #e5e7eb;
}
.data-table th { background: #f9fafb; font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; }
.data-table tr:hover td { background: #f9fafb; }

.skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
  height: 20px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
⚠️ Common Mistakes
  • Modal without focus trap — keyboard users escape cheyaleru
  • Dropdown hover-only — touch devices lo work avvadu
  • Table without horizontal scroll on mobile — content clip avuthundi
  • Skeleton animation without prefers-reduced-motion check
  • Inconsistent border-radius across components — unprofessional look
💻 Coding Challenge — Pricing Card Component

Add hover elevation effect and a featured badge positioned at top-right.

HTML▶ Try in Editor

  Popular
  
Pro Plan

  
₹499/mo

  
  • All courses
  • Compiler access
CSS▶ Try in Editor
.pricing-card {
  border: 2px solid #2563eb; border-radius: 16px; padding: 32px;
  display: flex; flex-direction: column; gap: 16px; text-align: center;
}
.price { font-size: 2.5rem; font-weight: 800; color: #2563eb; }
Open in HTML/CSS Editor →
❓ Mini Quiz

Q1 Modal overlay ki position: fixed enduku use chestam?

Viewport ki relative ga full screen cover cheyadaniki — scroll ayina overlay fixed ga untundi.

Q2 Loading skeleton purpose enti?

Content load avuthunna time lo placeholder UI show chestundi — perceived performance improve avuthundi.

✅ Quick Recap
  • Component CSS = reusable patterns with consistent tokens (radius, spacing, colors)
  • BEM naming: .navbar, .navbar__links, .navbar__brand
  • Modals need overlay + centered content + z-index stacking
  • Tables: collapse borders, hover rows, responsive overflow-x scroll
  • Skeleton loaders improve perceived loading speed
OC
Written by Our Compiler Technical Editorial Team
Reviewed for accuracy · CSS Complete Roadmap · Last updated August 2026
← Previous38. Styling FormsNext Chapter →40. CSS Naming & Organization