Integrations List

About this piece

Connected services listed one per row, each turning active in turn down the right-hand edge, so the whole set can be read at a glance once it settles.

Usage

The import and the props worth knowing about, in one place.

import { Editor56 } from "@/components/beste/piece/editor56";

<Editor56
  surface="card"
  bordered={false}
  inverted={false}
  title="Integrations"
  integrations={[
    {
      "name": "Google Analytics",
      "active": true
    },
    {
      "name": "Google Tag Manager",
      "active": true
    },
    {
      "name": "Meta Pixel"
    },
    {
      "name": "PostHog",
      "active": true
    }
  ]}
  activeLabel="Active"
  stepMs={420}
/>

More Editor pieces

View all Editor

Keybindings

Command palette
⌘+K
Quick open
⌘+P
Toggle terminal
⌃+`
Format document
⌥+⇧+F

Dashboard
state
render
computeStats

button.tsx

12 export function Button({ label }) {
13−  return <button>{label}</button>;
+  return <button className="btn">{label}</button>;
14 }

const name = 'Hania';
const role = 'design';
const team = 'core';

Appearance

Images

Image entranceBlur in

Scroll effectParallax

Motion

Section animationBlur in

Animation speedSlow

12function renderChart(data) {
37}