Atoms

Alert

Displays a callout for important messages.

shadcn/uiBased on shadcn/ui with Formance brand styling.

Docs

Heads up!

You can add components using the CLI.

Good to know

The sandbox provisions in about 30 seconds.

Edition required

This page requires the Enterprise Edition.

Saved

Your changes have been published.

Error

Your session has expired. Please log in again.

Installation#

npx shadcn@latest add @formance/alert

Install the following dependencies:

npm install class-variance-authority

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'

<Alert>
  <AlertTitle>Transaction processing paused</AlertTitle>
  <AlertDescription>
    Payments to this ledger have been temporarily suspended. Check your
    connector configuration for details.
  </AlertDescription>
</Alert>