Liquid Glass Dashboard
A full dashboard on a photograph, built with Sakani's Apple-style liquid glass. Move the pointer over the sidebar.
This is what Glass & Liquid Glass looks like in a real application. Everything in the frame is a live Sakani component: the sidebar, top bar, stat cards, charts, table and activity feed.
It is built in three layers, in this order:
- Background: the photo, as a
<LiquidBackdrop>. Every lens in the frame refracts the photo itself, so the promo card and the sidebar lenses bend sharp detail, as in the Figma frame. - Overlay: one full-size
<LiquidGlass variant="regular" radius={0}>: the frosted sheet the chrome sits on. - Product UI: the sidebar and top bar sit on the overlay with no fills of their own (
data-surface="liquid"); the main panel is a second sheet of glass; the cards on it stay solid so the data stays crisp.
The active sidebar item has its own clear-glass lens and only moves when you click another item; it springs to the new item and stretches on the way, like a droplet. A second, softer lens follows hover and keyboard focus and never changes what is active. Open one of the chart dropdowns to see the frosted menu, and flip the preview to dark: the overlay gains a scrim so the light labels stay readable over the bright parts of the photo.
Refraction renders in Chromium (Chrome, Edge). Safari and Firefox get the frosted fallback with the same rim and depth.
Revenue trend
Track monthly revenue growth and identify sales trends.
Customer growth
Measures customer acquisition, retention, and overall audience growth over time.
Sales channel
Compare revenue contribution across your primary sales channels.
Recent orders
Track recent customer purchases and order progress.
| Order | Customer | Amount | Payment | Status |
|---|---|---|---|---|
| ORD-2481 | Olivia Carter | $482 | Visa | Active |
| ORD-2482 | Noah Kim | $124 | Paypal | Failed |
| ORD-2483 | Sophia Lee | $318 | Mastercard | Pending |
| ORD-2484 | Ethan Walker | $1,248 | Apple Pay | Completed |
| ORD-2485 | Amelia Brown | $86 | Visa | Active |
| ORD-2486 | Lucas Wilson | $212 | Mastercard | Completed |
Recent activity
Latest system and team activity.
Emily Johnson created a new product.
Order ORD-24086 was shipped.
Warehouse inventory synced successfully.
Michael Evans invited Sarah Williams.
Weekly revenue report generated.
Marketing campaign "Summer Sale" started.
New enterprise customer onboarded.
Props
Like every block, this is a composition example. These few props cover the images; for anything else, copy the source and edit it.
| Prop | Type | Default | Description |
|---|---|---|---|
| backgroundImage | string | The photograph behind everything. Not bundled: glass needs something colorful and detailed to bend, and which photo is your call. | |
| accountAvatar | string | Avatar for the account menu in the top bar. | |
| people | { emily?, michael?, sarah? } | Photos for the people in the activity feed. Avatars fall back to a neutral placeholder. | |
| className | string | Extra class on the root. The block fills its container, so give the container a size. |
Copy the source
Blocks are composition examples, not configurable components. Rather than adding props for a layout they don't support, copy the file into your own project and edit it: change the columns, swap the sample data, delete the parts you don't need. Nothing here introduces a primitive you can't already import on its own.
Why it works this way
Why
- It is built in three layers, in order, because glass needs something colourful and detailed behind it to bend. The photograph is not bundled; which photo is your call.
- The active sidebar item has its own lens that only moves when you click another item, while a second, softer lens follows hover and focus and never changes what is active.
- In dark mode the overlay gains a scrim so light labels stay readable over the bright parts of the photo.
Don't
- Don't expect refraction outside Chromium. Safari and Firefox get the frosted fallback with the same rim and depth.
- Don't put it over a flat colour. There is nothing to bend.