Noise Texture

PreviewCode

@/demos/NoiseTextureDemo.tsx

import { cn } from '@/lib/utils'
import { NoiseTexture } from '@/registry/magicui/noise-texture'

export function NoiseTextureDemo() {
  return (
    <div class="
      relative flex h-125 w-full flex-col items-center justify-center
      overflow-hidden rounded-lg border bg-neutral-100/80
      dark:bg-neutral-950
    "
    >
      <NoiseTexture
        class={cn(
          'absolute inset-0',
          'mask-[radial-gradient(420px_circle_at_center,white,transparent)]',
        )}
      />
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/noise-texture

bun

bunx shadcn@latest add @magicui-solid/noise-texture

yarn

yarn dlx shadcn@latest add @magicui-solid/noise-texture

npm

npx shadcn@latest add @magicui-solid/noise-texture

Examples

Newsletter digest

PreviewCode

The weekly digest

One email on Sundays—new components, tips, and changelog highlights. No spam, unsubscribe anytime.

Email

Subscribe

@/demos/NoiseTextureDemo2.tsx

import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { TextField, TextFieldInput, TextFieldLabel } from '@/components/ui/text-field'
import { NoiseTexture } from '@/registry/magicui/noise-texture'

export function NoiseTextureDemo2() {
  return (
    <div class="flex justify-center p-4">
      <Card class="relative w-full max-w-md overflow-hidden border bg-card/80">
        <NoiseTexture noiseOpacity={0.45} />
        <CardHeader class="relative z-10 space-y-1 pb-4">
          <CardTitle class="text-xl">The weekly digest</CardTitle>
          <CardDescription>
            One email on Sundays—new components, tips, and changelog highlights.
            No spam, unsubscribe anytime.
          </CardDescription>
        </CardHeader>
        <CardContent class="relative z-10 space-y-4 pt-0">
          <TextField class="space-y-2">
            <TextFieldLabel for="newsletter-email">Email</TextFieldLabel>
            <TextFieldInput
              id="newsletter-email"
              autocomplete="email"
              placeholder="you@company.com"
              type="email"
            />
          </TextField>
          <Button class="w-full" type="button">
            Subscribe
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}

Button

PreviewCode

Subscribe

@/demos/NoiseTextureDemo3.tsx

import { Button } from '@/components/ui/button'
import { NoiseTexture } from '@/registry/magicui/noise-texture'

export function NoiseTextureDemo3() {
  return (
    <div class="flex justify-center p-8">
      <Button
        class="
          group/button relative cursor-pointer overflow-hidden px-8
          active:scale-98
        "
        type="button"
        variant="secondary"
      >
        <span class="relative z-10 font-medium">Subscribe</span>
        <NoiseTexture
          noiseOpacity={0.45}
          class="
            size-full! transition-all
            group-hover/button:opacity-100
          "
        />
      </Button>
    </div>
  )
}

Input field

PreviewCode

Search with texture

@/demos/NoiseTextureDemo4.tsx

import { TextField, TextFieldInput, TextFieldLabel } from '@/components/ui/text-field'
import { NoiseTexture } from '@/registry/magicui/noise-texture'

export function NoiseTextureDemo4() {
  return (
    <div class="mx-auto flex max-w-sm flex-col gap-3 p-4">
      <TextField>
        <TextFieldLabel class="text-muted-foreground" for="noise-input-demo">
          Search with texture
        </TextFieldLabel>
        <div class="relative overflow-hidden rounded-lg border bg-muted/30">
          <NoiseTexture noiseOpacity={0.45} />
          <TextFieldInput
            class="
              relative z-10 border-0 bg-transparent shadow-none
              focus-visible:ring-2
            "
            id="noise-input-demo"
            placeholder="Try typing…"
            type="search"
          />
        </div>
      </TextField>
    </div>
  )
}

Usage

NoiseTexture renders a full-size svg (absolute, inset 0). Put it inside a relative container and layer content above with z-10 when needed.

import { NoiseTexture } from '@/components/magicui/noise-texture'

<div className="relative h-64 overflow-hidden rounded-lg border">
  <NoiseTexture />
</div>

Props

NoiseTextureProps extends the SVG component props. Besides standard SVG attributes, these props are supported:

NoiseTexture

Prop	Type	Default	Description
class	string	-	Merged onto the root svg (via cn)
frequency	number	0.4	baseFrequency for feTurbulence
octaves	number	6	numOctaves for feTurbulence
slope	number	0.15	Linear slope per channel after desaturation
noiseOpacity	number	0.6	Opacity of the noise rect

Credits

• Credit to @chishiyac

Original:

magicui.design/docs/components/noise-texture