Surfaces

Surface components structure content without fighting the glass aesthetic. Cards, tabs, layout primitives (Stack, Cluster, Grid), resizable panels, scroll areas, and separators give your Next.js app clear hierarchy while frosted chrome stays on the edges.

Use Glass Content Card–adjacent patterns and surface primitives when you need readable content regions over mesh or image backgrounds. Tabs organize dense settings and docs; Resizable lets power users split panes; Scroll Area keeps long lists inside a fixed glass frame; Separator and layout helpers keep density under control on marketing and product pages.

Every surface is free, Tailwind-first, and installed via the IntelliHelper CLI so you can restyle tokens without forking a closed design system. If you are comparing shadcn/ui alternatives for glassmorphism React UIs, surfaces are where Liquid Glass readability wins — content stays legible while chrome remains translucent.