Liquid Metal Border

Liquid metal shader as a border wrap. Put any registry component inside.

4.1 KB

•

Updated on September 16, 2026

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/components-spaceui-liquid-metal-border

pnpm dlx shadcn@latest add @spaceui/components-spaceui-liquid-metal-border

Usage

Code

import { LiquidBorder } from '@/components/spaceui/liquid-metal-border'
import { Avatar } from '@/components/ui/avatar'
import { AvatarFallback } from '@/components/spaceui/avatar-extended'

;<LiquidBorder className="inline-flex size-14 rounded-full p-0.75">
  <Avatar className="size-full">
    <AvatarFallback name="space" variant="pebble" />
  </Avatar>
</LiquidBorder>

rounded-* and p-0.75 on LiquidBorder are the metal ring.

Variants

Button

Card

Create project

Deploy your new project in one-click.

Your new project will be created with the default settings. You can customize it later in the project settings.

Presets

Props

Prop	Type	Default	Description
`children`	node	—	Any registry component
`preset`	chrome\|gold\|ocean\|sunset\|emerald\|violet	chrome	Built-in metal tint and fallback palette
`colorBack`	string	—	Custom base metal color (overrides preset)
`colorTint`	string	—	Custom highlight tint color (overrides preset)
`fallbackClassName`	string	—	CSS linear gradient classes for fallback layer
`innerClassName`	string	—	Class names for the relative content wrapper
`speed`	number	0.6	Animation speed
`repetition`	number	4	Pattern repeats
`softness`	number	0.5	Highlight softness
`shiftRed`	number	0.3	Red shift
`shiftBlue`	number	0.3	Blue shift
`distortion`	number	0	Distortion
`contour`	number	0	Contour
`angle`	number	45	Pattern angle
`scale`	number	8	Pattern scale
`offsetX`	number	0.1	X offset
`offsetY`	number	-0.1	Y offset

Keep in mind

MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.

Section Scrollspy Rainbow Glow Border

On This Page

Installation Usage Variants Button Card Presets Props Related Components

@paper-design/shaders-react