Components
Empty & loading states
Explain what has happened, what will appear here, and what someone can do next.
Usage & approach
Empty states should name the missing content and provide a useful next step. Loading placeholders remain static in this library. Set aria-busy only while a real request is running and announce completion in the host application.
Specifications
- Empty state
- border border-dashed rounded-lg p-8 text-center
- Loading
- bg-[#f1f2f0] dark:bg-[#303232]; no animate-* utilities
- Content
- Heading + explanation + one next action.
- Accessibility
- Visible loading text; decorative placeholders aria-hidden.
No policies yet
A restrained empty state with a next step.
<section class="rounded-lg border border-dashed border-[#c7d4c9] p-8 text-center dark:border-[#565c58]">
<h3 class="text-lg font-semibold">No policies yet</h3><p class="mx-auto mt-2 max-w-sm text-base leading-7 text-[#333] dark:text-[#c4c7c5]">Your issued policies will appear here. Start with a quotation to explore coverage.</p><button type="button" class="mt-5 inline-flex min-h-11 items-center justify-center rounded-md bg-[#006838] px-5 py-2.5 text-sm font-semibold text-white hover:bg-[#00552e] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:bg-[#006838] dark:text-white dark:hover:bg-[#00552e] dark:focus-visible:outline-[#006838] disabled:cursor-not-allowed disabled:opacity-50">Create quotation</button>
</section>HTML + Tailwind CSS · fit to panel
Loading appearance
Static placeholders establish layout without adding animation.
<div class="rounded-lg border border-[#dfe7df] bg-white p-6 dark:border-[#3d4140] dark:bg-[#262828]"><p role="status" class="text-sm text-[#333] dark:text-[#c4c7c5]">Loading policy details…</p><div aria-hidden="true" class="mt-5 space-y-3"><div class="h-5 w-2/3 rounded bg-[#f1f2f0] dark:bg-[#303232]"></div><div class="h-4 w-full rounded bg-[#f1f2f0] dark:bg-[#303232]"></div><div class="h-4 w-4/5 rounded bg-[#f1f2f0] dark:bg-[#303232]"></div></div></div>HTML + Tailwind CSS · fit to panel
Bring this into your project
Copy the HTML from the code panel. Keep complete utility names in files scanned by Tailwind, retain accessible labels and focus styles, and connect actions to your own application. Preview controls belong to this documentation and are not part of the copied example.