Geist Background

A mesmerizing flickering background effect with noise mask and conic gradients, inspired by Vercel's Geist design.

Preview

Geist

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/geist-background.json

Usage

tsx
9 lines
1
2
3
4
5
6
7
8
9
import { GeistBackground } from "@/components/ui/geist-background"

export default function MyComponent() {
  return (
    <GeistBackground className="h-screen" title="Geist">
        {/* Optional children */}
    </GeistBackground>
  )
}

Props

PropTypeDescription
childrenReactNodeOptional content to render inside the background container.
classNamestringAdditional CSS classes for the container.
titlestringLarge title title text to display centered.