81 Pro components and page blocks

Get Pro
uibrik

Icon Hive

Pro

Preview

Customize

Honeycomb
Shuffle
Tinted
Columns11
Rows5
Tile size60px
Gap10px
Radius16px
Fade0.55
Interval1800ms

Installation

Pro

Icon Hive 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/icon-hive

Usage

import { IconHive } from "@/components/uibrik/icon-hive/icon-hive";​<IconHive  layout="honeycomb"  ambient="shuffle"  tone="color"  magnify  columns={11}  rows={5}  tileSize={60}  gap={10}  radius={16}  fade={0.55}  interval={1800}  center={<Mark />}  centerLabel="uibrik"  // icons={[{ id: "…", label: "…" }]}/>

Props

IconHive
layout
Type "honeycomb" | "grid" | "diamond"
"honeycomb"
Offset rows, a square grid, or a diamond cut from offset rows.
ambient
Type "shuffle" | "ripple" | "none"
"shuffle"
What the hive does on its own: icons hop between tiles, a wave rolls out from the centre, or nothing.
tone
Type "color" | "mono"
"color"
Tiles tinted with each brand's colour, or plain ones.
magnify
Type boolean
true
Tiles swell under the pointer.
columns
Type number
11
Columns at full width. Fewer show on narrow screens.
rows
Type number
5
Rows. Odd numbers keep the centre centred.
tileSize
Type number
60
Largest a tile gets.
gap
Type number
10
Space between tiles.
radius
Type number
16
Corner radius of a tile.
fade
Type number
0.55
How much of the edge fades out.
interval
Type number
1800
Time between hops or waves.
icons
Type { id: string; label: string; src?: string; srcDark?: string; icon?: ReactNode; color?: string }[]
SAMPLE_ICONS
Integrations scattered across the hive: a logo image (srcDark for dark mode) or any icon node. color is the brand colour for the tile tint.
center
Type ReactNode
uibrik mark
What sits in the centre tile, usually your logo.
centerLabel
Type string
"uibrik"
Names the centre for screen readers.
className
Type string
–
Classes for the wrapper.