Stalk UI

Component

Alert

Surfaces an inline, persistent status message.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/alert

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<Alert.Root tone="info">
  <Alert.Icon>
    <Info />
  </Alert.Icon>
  <Alert.Body>
    <Alert.Title>Heads up</Alert.Title>
    <Alert.Description>You can add components using the CLI.</Alert.Description>
  </Alert.Body>
</Alert.Root>
Theme
<Alert.Root tone="warning">
  <Alert.Icon>
    <AlertTriangle />
  </Alert.Icon>
  <Alert.Body>
    <Alert.Title>Storage almost full</Alert.Title>
    <Alert.Description>You're using 92% of your storage.</Alert.Description>
  </Alert.Body>
  <Alert.Close aria-label="Dismiss">
    <X />
  </Alert.Close>
</Alert.Root>
Theme
<Alert.Root tone="danger">
  <Alert.Icon>
    <AlertCircle />
  </Alert.Icon>
  <Alert.Body>
    <Alert.Title>Deployment failed</Alert.Title>
    <Alert.Description>Build #424 exited with code 1.</Alert.Description>
    <Alert.Actions>
      <Button size="sm" tone="danger">
        Retry
      </Button>
    </Alert.Actions>
  </Alert.Body>
</Alert.Root>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`size``AlertSize`No--
`tone``AlertTone`No-Selects the semantic color palette. Defaults to \`info\`.
`variant``AlertVariant`No--

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`size``sm`, `md`, `lg`
`variant``subtle`, `solid`, `outline`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/alert.json`
  • Recipe: `alert`
  • Files: `src/components/ui/alert.tsx`