HomeUI Components
Preview
css
Primary
Secondary
Ghost
Delete
Code
css
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.25rem; border-radius: 0.5rem;
  font-size: 0.875rem; font-weight: 500; cursor: pointer;
  transition: all 0.15s; border: 1px solid transparent;
}
.btn-primary     { background: var(--accent); color: #fff; }
.btn-primary:hover { opacity: 0.88; }

.btn-secondary   { border-color: var(--accent); color: var(--accent); }
.btn-secondary:hover { background: var(--accent-dim); }

.btn-ghost       { color: var(--muted); }
.btn-ghost:hover { background: var(--border); color: var(--text); }

.btn-destructive { background: #EF4444; color: #fff; }
.btn-sm { padding: 0.35rem 0.875rem; font-size: 0.75rem; }
.btn-lg { padding: 0.75rem 2rem;     font-size: 1rem; }
Related Blocks
css
Badge & Chip
Status indicators, labels, and category chips.
css
Input Fields
Text, email, password, textarea + error/success states.
css
Skeleton Loader
Skeleton interface shown while content is loading.