81 Pro components and page blocks

Get Pro
uibrik

Mesh Button

Pro

Preview

Customize

Color
Medium
Radius12px
Angle-12°
Folds1.00
Depth1.00
Sheen1.00
Flow1.00
Speed1.0
Grain0.030

Installation

Pro

Mesh Button is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/mesh-button

Usage

import { MeshButton } from "@/components/uibrik/mesh-button/mesh-button";​<MeshButton  children="Get started"  color="#4c5fd5"  size="md"  radius={12}  angle={-12}  folds={1}  depth={1}  sheen={1}  flow={1}  speed={1}  grain={0.03}  interactive  animate  icon={<IconArrowRight />}/>

Props

MeshButton
children
Type string
"Get started"
The label.
color
Type string
"#4c5fd5"
One colour; the button paints itself in shades of it.
colors
Type string[]
["#1e1450","#4a2fc0","#b23a86","#d8673f","#ffd8c2"]
Hex colours, 2 to 6, for a multi-colour button. Deepest first; the last is the sheen, the rest stay mid to deep so white text reads. Overrides color.
size
Type "sm" | "md" | "lg"
"md"
Height, padding and type size. Medium is 44px tall.
radius
Type number
12
Corner radius.
angle
Type number
-12
Direction the waves travel; 0 runs left to right.
folds
Type number
1
How many waves fit along the button.
depth
Type number
1
How deep the folds are; 0 is flat.
sheen
Type number
1
Strength of the satin highlight.
flow
Type number
1
How much the colour and the folds wander.
speed
Type number
1
Animation speed; 1 is the designed pace.
grain
Type number
0.03
Film grain strength.
interactive
Type boolean
true
The pointer presses a swell into the silk, and a click sends a ripple through it.
animate
Type boolean
true
Move on its own. Off draws one still frame.
icon
Type ReactNode
<IconArrowRight />
Shown after the label; nudges forward on hover. Pass null to hide it.
...button props
Type ButtonHTMLAttributes
–
onClick, disabled, aria-label, className and the rest pass through to the button.