styling-patterns
Styling Patterns
Quick Start
<!-- ✅ Correct: Proper background hierarchy -->
<div class="bg-base-200 p-6">
<div class="card bg-base-100 p-4 shadow-md">
<h2 class="mb-3 text-2xl font-bold">Section Title</h2>
<p class="text-base">Main content text</p>
<p class="text-sm opacity-60">Secondary metadata</p>
</div>
</div>
<!-- ❌ Wrong: Same background as parent -->
<div class="bg-base-100">
<div class="card bg-base-100">No visual separation</div>
</div>
More from spences10/devhub-crm
auth-patterns
Better-auth integration for authentication. Use when implementing login, registration, protected routes, or email verification.
4component-testing-patterns
Vitest browser mode component testing. Use for testing Svelte 5 components with real browsers, locators, accessibility patterns, and reactive state.
4form-patterns
DaisyUI v5 form patterns. Use for inputs, selects, textareas, validation, and form structure with fieldset/legend.
2reactive-ui-patterns
Remote functions reactive UI patterns. Use for smooth in-place updates, preventing page jumps, and managing loading states with .current property.
2database-patterns
SQLite operations using better-sqlite3 with prepared statements. Use when implementing CRUD operations, timestamps, and user-scoped queries with row-level security.
2error-handling-patterns
Svelte 5 error handling. Use for error boundaries, async await expressions, loading states, and form errors.
2