Next.js Liquid Glass UI — AuraGlass by AuraOne

#App Router Root Layout

Import the AuraGlass stylesheet in the App Router root layout so server-rendered and client-rendered surfaces share the same tokens on first paint. This is the most common setup error in AI-generated examples: the component import is correct, but the stylesheet is missing.

The root layout should stay boring. Put the CSS import there, keep metadata and shell providers there, and move interactive AuraGlass examples into client components when they use state, effects, portals, media APIs, command palettes, drawers, or realtime behavior.

tsx

// app/layout.tsx
import type { ReactNode } from 'react';
import 'aura-glass/styles';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

#Server and Client Boundaries

Static composition can be rendered from a server component when it only passes serializable props to presentational components. Interactive surfaces need a client boundary: command palettes, tabs with local state, drawers, modals, uploaders, media controls, visualizers, realtime collaboration, and any component that listens to browser APIs.

Do not silence boundary issues by moving the entire app to client rendering. Keep data loading and route shells server-side where they belong, then create focused client islands for the AuraGlass surface that actually needs interactivity.

tsx

'use client';

import { GlassCommandPalette, GlassDataGrid } from 'aura-glass';

export function SearchConsole() {
  return (
    <>
      <GlassCommandPalette open contained positionStrategy="inline" />
      <GlassDataGrid />
    </>
  );
}

#App Router Patterns

For dashboards, keep the page route responsible for data fetching and pass data into a client surface. For docs and marketing pages, static rendering is usually enough; use AuraGlass cards and buttons as presentational components and avoid unnecessary client state.

For overlays, make sure the client component owns open state and that the route does not remount the overlay unexpectedly during navigation. For media, visualizers, and WebGL, lazy-load the heavy surface and render a static fallback during reduced motion or slow connections.

Dashboard route

Server page fetches data; client dashboard renders GlassDashboard and grids

Command palette

Client island owns open state and keyboard shortcuts

Media surface

Lazy client component with static reduced-motion fallback

Docs page

Static route with presentational GlassCard examples

#Compatibility Checks

The 3.1 package work verifies install behavior against modern React and Next.js combinations. In an app, run `next build`, inspect the rendered page, and check that the CSS import is included in the final bundle.

When an AI agent adds AuraGlass to a Next.js project, require it to report the file it changed for the stylesheet import, the component file that imports package components, and whether any optional peers were added. That makes broken setup obvious during review.