97 Pro components and page blocks

Get Pro
uibrik

Integration Box

Pro

Preview

Customize

Neutral
Color
Duration2.4s
Interval0.24s

Installation

Pro

Integration Box 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/integration-box

Usage

import { IntegrationBox } from "@/components/uibrik/integration-box/integration-box";​<IntegrationBox  tone="neutral"  halo  color="#3b82f6"  duration={2.4}  interval={0.24}  pauseOnHover  title="Bring your stack"  description="Connect the tools your team already uses."  // integrations={[{ name: "…" }]}/>

Props

IntegrationBox
tone
Type "neutral" | "kraft"
"neutral"
Box material: soft white (grey in dark mode) or cardboard.
halo
Type boolean
true
Two half circles behind the box, filled with a slow mesh gradient.
color
Type string
"#3b82f6"
Colour of the mesh gradient; drawn in shades of it.
duration
Type number
2.4
How long one logo takes from the top of the card into the box.
interval
Type number
0.24
Time between one logo and the next.
pauseOnHover
Type boolean
true
Hold the logos where they are while the card is pointed at.
integrations
Type { name: string; src?: string; srcDark?: string; icon?: ReactNode }[]
11 apps
Logos in the order they fall. srcDark swaps in on dark backgrounds.
title
Type string
"Bring your stack"
Heading under the box. Empty hides it.
description
Type string
"Connect the tools your team already uses."
Line under the title.
className
Type string
–
Classes for the card.