Styling and CSS Imports
Load the AuraGlass stylesheet once, scope local overrides safely, and keep Liquid Glass styling portable across React and Next.js apps.
#Import the Package Stylesheet Once
AuraGlass components are package components, not source-copied snippets. The package stylesheet is part of the public API because it provides the material tokens, base surface rules, focus indicators, reduced-motion defaults, overlay layering, and component-level class contracts that make the components look finished. Import it once near the app root rather than inside every component file.
In Next.js, place the import in `app/layout.tsx`. In Vite or a client-rendered React app, place it in `main.tsx` or the highest shell that is guaranteed to run before components mount. Avoid importing private files from `node_modules/aura-glass/dist` because those paths can change between patch releases. The stable stylesheet path is `aura-glass/styles`.
import 'aura-glass/styles';
// 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>
);
}#Override Tokens, Not Internals
The customization layer is CSS variables first. Set variables on `:root`, on the app shell, or on a feature-specific wrapper when a section needs a different material density. Prefer scoped variables such as `--glass-backdrop-blur`, `--glass-radius-lg`, `--glass-border-default`, `--glass-bg-default`, and brand accent variables over descendant selectors aimed at internal markup.
Use component props for ordinary variants and use CSS variables for brand-level tuning. `className`, `style`, and wrapper classes are intended extension points. Reaching into implementation class names should be reserved for temporary app patches because it makes upgrades brittle and can break SSR snapshots, visual QA, and reduced-motion behavior.
.billing-shell {
--glass-backdrop-blur: 18px;
--glass-bg-default: rgba(10, 15, 26, 0.72);
--glass-border-default: rgba(124, 211, 255, 0.2);
--glass-radius-lg: 18px;
}#Tailwind and Utility CSS
AuraGlass does not require Tailwind, but it works well beside utility CSS when the ownership line is clear. Let AuraGlass own the glass material, depth, overlay behavior, and interaction states. Use Tailwind or local CSS for page layout, spacing between product sections, responsive grid tracks, and business-specific typography.
Do not rebuild a component surface by stripping the package styles and reapplying a utility-only recipe. That usually loses focus treatment, disabled states, blur budgets, contrast tuning, and reduced-motion defaults. If a product needs a different visual tone, override tokens at the wrapper and keep the component API intact.
#Copy-Safe Styling Checklist
A copy-safe AuraGlass example imports from `aura-glass`, imports `aura-glass/styles` once, uses public component props, and keeps app-specific CSS outside the package. It should not depend on this website repository, global demo-only classes, local media files, or private preview wrappers.
For documentation, recipes, and AI-agent output, include the stylesheet line next to the first usage example. Agents frequently omit CSS when examples are split across files, so the docs repeat the import intentionally. Production apps should still import the stylesheet only once.