PaperAlert

Editorial notice box with clear severity accents.

← urgency without shouting.

Preview

Notice

Scheduled maintenance

Read-only mode starts Friday at 11:00 PM IST.

import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const paperAlertVariants = cva(
  'relative overflow-hidden rounded-none border-2 border-ink-black p-5 shadow-lift-1 transition-all duration-150 ease-paper',

Installation

Copy this file into your project, export its barrel, and then add it to the master UI index.

Step 1.Create this file:
components/ui/paperAlert/paperAlert.tsx⎘
Step 2.Create the barrel:
components/ui/paperAlert/index.ts⎘
Step 3.Add this export in components/ui/index.ts:
```
export * from './paperAlert'
```

Variants

Info

Notice

Heads up

New docs are available.

Success

Notice

Saved

All changes synced.

Warning

Notice

Warning

Double-check before publishing.

Danger

Notice

Blocked

Permission required.

Props

Prop	Type	Default	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'danger'`	`info`	Accent stripe and tone color.
`children`	`ReactNode`	`required`	Alert title/content blocks.

Examples

Deployment warning

Use warning variant for risky actions.

Notice

Production deploy

Traffic may spike for 3-5 minutes.

<PaperAlert variant="warning">...</PaperAlert>

Success confirmation

Short success notice after async actions.

Notice

Publish complete

Your page is live.

<PaperAlert variant="success">...</PaperAlert>