# Integrations

A list of tools with search, category Tabs and Connect, Configure or a Connected Badge.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/integrations
```

## Usage

```tsx
import { Integrations } from '@/components/fetaui/integrations'

export function Example(props) {
  return <Integrations items={props.items} onConnect={connect} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| items | Integration[] | required |
| onConnect | (id) => Promise<void> | void |  |
| onConfigure | (id) => void |  |
| connecting | string |  |
| animated | boolean | true |

## When to use

- For connecting third party tools.

## When not to use

- For a marketing gallery of logos.

## Accessibility

- Tabs and search use finished components.
- Connecting announces through the Button state.
- Logos are decorative. Names are text.

## Motion

- Connect holds its width and shows Connecting with a spinner.
- The panel fades in and rises 8 px over 400 ms, once.
- Rows fade in over 240 ms with a 40 ms stagger.
- Numbers and bars tween over 240 ms by writing text and transforms, so React does not render per frame.
- With reduced motion, the panel appears in place and values swap at once.