Frameline

Frameline materials install like shadcn components: a registry package writes typed source into @/components/ui. Free materials install without auth. Paid materials need a registry token from your account after purchase.

CLI install

From your app root (Next.js, Vite, or any project already set up for the shadcn CLI):

# Free or entitled materials
npx shadcn@latest add @frameline/aurora-mesh

# Explicit registry URL (CI / non-interactive)
npx shadcn@latest add "https://frameline.ai/r/aurora-mesh.json"

Continuing from a material page? Replace aurora-mesh with any catalog slug, or open aurora-mesh for the copy button that matches the live configurator output.

Import and render

import { AuroraMesh } from "@/components/ui/aurora-mesh"

export function Hero() {
  return (
    <section className="relative min-h-[70vh]">
      <AuroraMesh className="absolute inset-0" aria-hidden />
      <div className="relative z-10 …">…</div>
    </section>
  )
}

Materials are decorative by default — put aria-hidden on the surface and keep readable content in a sibling layer.
Pass colors as props that map to your CSS variables (see Theming).
Prefer the material’s documented size and placement notes on its detail page over inventing new containers.

Copy-paste path

If you do not use the CLI, open any material detail page and use Copy JSX from the configurator. Paste the generated component tree into your file, then copy the underlying source from the same page’s install panel into components/ui/aurora-mesh.tsx. Keep peer dependencies listed on the material page in sync with your package.json.

Registry token (paid materials)

After checkout, your receipt email and account page include a registry access token. Configure it once:

# .env.local — never commit
FRAMELINE_REGISTRY_TOKEN=fl_live_…

# components.json — registry auth (shadcn-compatible)
{
  "registries": {
    "@frameline": {
      "url": "https://frameline.ai/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${FRAMELINE_REGISTRY_TOKEN}"
      }
    }
  }
}

Verify the install

Component file exists under your UI path and TypeScript resolves.
Dev server renders without hydration warnings (see hydration).
Theme tokens flow through — colors should match your design system, not Frameline’s marketing palette.
Toggle OS reduced-motion and confirm the static fallback, not a frozen animation.