Glass tile field

Integrations with a field of frosted glass app tiles.

Usage

import { IntegrationsGlassTiles } from '@/components/blocks/integrations-02'


<IntegrationsGlassTiles />


// Change the copy and the apps with props
<IntegrationsGlassTiles
  eyebrow="Connections"
  heading={['Plug in your stack.', 'Keep it all in sync.']}
  description="Link the apps your team already uses in a couple of clicks."
  integrations={[
    { name: 'Slack', icon: 'Slack', glow: '#36C5F0', syncs: 'Posts updates to channels' },
    { name: 'Figma', icon: 'Figma', glow: '#F24E1E', syncs: 'Pins design files to tasks' },
  ]}
  showConnection={false}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/integrations-02

npx shadcn@latest add @pastaui-pro/integrations-02

yarn dlx shadcn@latest add @pastaui-pro/integrations-02

bunx --bun shadcn@latest add @pastaui-pro/integrations-02

Source

Props

Glass tile field props
Prop	Type	Default	Description
eyebrow	string	= 'Integrations'	Small label with a blue dash. Pass an empty string to hide it.
heading	[string, string]	= ['Every tool you rely on.', 'Woven into one workspace.']	Two heading lines. The first is ink, the second muted grey.
description	string	= Weftly threads your calendar, docs, chat and payments copy	Short paragraph under the heading. Pass an empty string to hide it.
integrations	GlassIntegration[]	= 18 apps from Slack to Loom	Apps shown on the tiles, center first. Each has a name, an icon key from the shared logo set, a glow color and a one-line syncs note for the tooltip. Unused slots become empty glass tiles.
showConnection	boolean	= true	Draw a dashed blue line from the active tile to the product mark.
label	string	= 'Apps that connect to Weftly'	Accessible name for the list of apps.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* color variables.