Alert — Sketchcn

Alert

A hand-drawn callout whose outline is sketched around the message.

Default

Sketchcn just got a new pen

Every outline is drawn with RoughJS, so no two alerts look alike.

Destructive

Your sketch couldn't be saved

Check your connection and try drawing it again.

With action

A new pencil set is available

Update the registry to pick up the latest components.

Paper texturesPatterns from Hero Patterns

Polka dots

Bullet-journal dot paper.

Hexagons

Honeycomb hexagon grid.

Graph

Engineering graph paper.

Plus

Scattered plus-sign paper.

Filled dots

Tight pinprick dot grid.

Title only

Saved to your sketchbook

Installation

Add Alert with the shadcn CLI.

npx shadcn@latest add https://sketchcn.chuwii.com/r/alert.json

Examples

Notices, errors, inline actions, and a steadier drawing hand.

Release note

Sketchcn 1.2 is out

Alerts now draw their own outline with RoughJS.

import { InfoCircle } from "@boxicons/react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

export function ReleaseNote() {
  return (
    <Alert>
      <InfoCircle />
      <AlertTitle>Sketchcn 1.2 is out</AlertTitle>
      <AlertDescription>
        Alerts now draw their own outline with RoughJS.
      </AlertDescription>
    </Alert>
  );
}

Upload error

Upload failed

The file is larger than the 5 MB limit.

import { AlertTriangle } from "@boxicons/react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

export function UploadError() {
  return (
    <Alert variant="destructive">
      <AlertTriangle />
      <AlertTitle>Upload failed</AlertTitle>
      <AlertDescription>
        The file is larger than the 5 MB limit.
      </AlertDescription>
    </Alert>
  );
}

With action

Draft saved

You can keep sketching from any device.

import { CheckCircle } from "@boxicons/react";
import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert";
import { Button } from "@/components/ui/button";

export function DraftSaved() {
  return (
    <Alert>
      <CheckCircle />
      <AlertTitle>Draft saved</AlertTitle>
      <AlertDescription>You can keep sketching from any device.</AlertDescription>
      <AlertAction>
        <Button size="xs" variant="ghost">
          Undo
        </Button>
      </AlertAction>
    </Alert>
  );
}

Paper texture

Scheduled maintenance

Sketches are read-only until 18:00.

import { AlertTriangle } from "@boxicons/react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

export function MaintenanceNotice() {
  return (
    <Alert paper="graph" variant="destructive">
      <AlertTriangle />
      <AlertTitle>Scheduled maintenance</AlertTitle>
      <AlertDescription>
        Sketches are read-only until 18:00.
      </AlertDescription>
    </Alert>
  );
}

Steadier outline

A steadier hand drew this one

import { Alert, AlertTitle } from "@/components/ui/alert";

export function CalmAlert() {
  return (
    <Alert className="[--sketch-roughness:0.4] [--sketch-bowing:0.6]">
      <AlertTitle>A steadier hand drew this one</AlertTitle>
    </Alert>
  );
}