81 Pro components and page blocks

Get Pro
uibrik

Extruded Logo

Pro

Preview

Customize

Logo size0.62
Thickness0.16
Bevel0.025
Gloss
Auto
Color
Side colour
Sway
Tilt22°
Speed1.0×
Shadow0.40
Size320px

Installation

Pro

Extruded Logo 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/extruded-logo

Usage

import { ExtrudedLogo } from "@/components/uibrik/extruded-logo/extruded-logo";​<ExtrudedLogo  logoScale={0.62}  thickness={0.16}  bevel={0.025}  finish="gloss"  theme="auto"  color="#f4f4f5"  sideColor="#8b8b94"  idle="sway"  tilt={22}  draggable  speed={1}  shadow={0.4}  size={320}  label="Logo"  // logoPath={["…"]}/>

Props

ExtrudedLogo
logoScale
Type number
0.62
Logo size, as a share of the frame.
thickness
Type number
0.16
How far the logo is pushed out, as a share of its size.
bevel
Type number
0.025
Size of the rounded bevel on the front and back edges.
finish
Type "matte" | "gloss" | "metal"
"gloss"
Matte clay, glossy plastic, or polished metal.
theme
Type "auto" | "dark" | "light"
"auto"
Light or dark colours when color and sideColor aren't set. Auto follows the page.
color
Type string
"#f4f4f5"
Colour of the front and back faces. Left at its default, the theme picks it.
sideColor
Type string
"#8b8b94"
Colour of the sides. Left at its default, the theme picks it.
idle
Type "sway" | "spin" | "none"
"sway"
What it does on its own: sway a little, turn slowly round, or hold still.
tilt
Type number
22
Most the logo leans toward the pointer.
draggable
Type boolean
true
Drag sideways to spin it.
speed
Type number
1
Speed of the idle motion. 0 holds still.
shadow
Type number
0.4
Soft shadow on the ground below.
size
Type number
320
Width of the frame; it shrinks to fit its container.
logoPath
Type string | string[]
–
Your own logo as one or more SVG path d strings on a 24 × 24 grid. Defaults to the uibrik mark.
label
Type string
"Logo"
Read out to screen readers.
className
Type string
–
Classes for the frame.