Uilora Email
3-pane email client skeleton — sidebar folders, inbox list with active-item state, and a full email preview with header, body, attachments, and reply box.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Color palette. "dark" uses deep navy panes; "light" uses white panels on a neutral page. |
| accentColor | string | "#0ea5e9" | Brand accent applied to the compose button background and subtle shimmer tint. |
| emailCount | number | 6 | Number of inbox list items to render (clamped 3–10). |
| previewOpen | boolean | true | Shows or hides the right email preview pane. Set false for mobile-first list-only layouts. |
When to Use
Use for email clients, support inboxes, notification centers, and any 3-pane messaging layout. The active-item highlight on the first list item communicates the selected-state clearly even in skeleton form.
Best Practices
Set previewOpen=false on mobile breakpoints to match your responsive layout. Match emailCount to the number of items visible in your inbox at typical viewport heights.
Why This Component Matters
Email clients are among the most complex UIs to skeleton correctly. A 3-pane layout with proper column widths, folder badges, active states, and a realistic preview pane immediately communicates the app's information architecture before any data loads.
FAQ
QHow does the active email state work?
The first email list item uses the active-item background color token (slightly lighter/purple-tinted) to simulate the selected state, matching how real email clients behave during load.
QCan I remove the preview pane?
Yes — set previewOpen=false. The component renders only the sidebar and inbox list, which is ideal for mobile or narrow-viewport email views.
QAre the folder badges always visible?
Badge pills appear on alternating folder items (Inbox and Drafts by default). Fork the component and adjust the badge condition in the sidebar folder map.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.