HomeUI Components
Preview
css
Saved successfully.
Something went wrong.
Heads up: review this.
Code
css
.toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  display: flex; flex-direction: column; gap: 0.75rem; z-index: 1000;
}

.toast {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.875rem 1.125rem; border-radius: 0.75rem;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  font-size: 0.875rem; min-width: 280px;
  animation: toastIn 0.3s cubic-bezier(0.16,1,0.3,1);
}

.toast-success { border-left: 3px solid #22C55E; }
.toast-error   { border-left: 3px solid #EF4444; }
.toast-warning { border-left: 3px solid #F59E0B; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
Related Blocks
css
Badge & Chip
Status indicators, labels, and category chips.
css
Button Family
Primary, secondary, ghost, destructive variants.
css
Input Fields
Text, email, password, textarea + error/success states.