Silk Border

Fluid WebGPU silk mesh gradient wrapper. Wrap avatars, badges, buttons, and cards with theme presets and CSS fallback.

3.3 KB

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/components-spaceui-silk-border

Usage

Code

import { SilkBorder } from '@/components/spaceui/silk-border'
import { Avatar } from '@/components/ui/avatar'
import { AvatarFallback } from '@/components/spaceui/avatar-extended'

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

rounded-* and p-0.75 on SilkBorder form the silk outline ring with an automatic CSS gradient fallback if WebGPU is unsupported.

Variants

Button & Badge

SUNSET EDITION

SYSTEM ACTIVE

Card

Space UI Pro Tier

Full access to all shaders, components, and blocks.

Get instant access to production-grade WebGPU canvas shaders and fluid squircle primitives.

All future updates included

Presets

Props

Prop	Type	Default	Description
`children`	React.ReactNode	—	Any component wrapped inside the border
`preset`	aurora\|ember\|twilight\|ocean\|sunset\|emerald\|amber\|violet	ember	Built-in silk color and fallback palette
`color1`	string	—	Custom primary hex color
`color2`	string	—	Custom secondary hex color
`color3`	string	—	Custom tertiary hex color
`speed`	number	0.65	Animation speed multiplier
`animate`	boolean	true	Whether the silk mesh flows smoothly
`grain`	boolean	false	Film grain texture overlay
`fallbackClassName`	string	—	CSS linear gradient classes for fallback layer
`innerClassName`	string	—	Class names for the relative content wrapper

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.

Liquid Metal Border

Morph Icon

On This Page

Installation Usage Variants Button & Badge Card Presets Props Related Components

vgpu