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-borderUsage
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
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.
