Components
Feedback
Alerts, progress, and loading placeholders.
Alerts
Explain what happened and what someone can do next. Keep feedback specific and concise.
Changes saved
Your workspace is up to date.
Unable to connect
Check your connection and try again.
View code
import { Alert, AlertTitle, AlertDescription } from "@repo/ui/components/ui/alert"
<Alert>
<AlertTitle>Changes saved</AlertTitle>
<AlertDescription>Your workspace is up to date.</AlertDescription>
</Alert>Progress & loading
Show known progress with a bar. Use skeletons while the shape of incoming content is predictable.
Demo progress40%
View code
import { Progress } from "@repo/ui/components/ui/progress"
import { Skeleton } from "@repo/ui/components/ui/skeleton"
<Progress value={40} aria-label="Demo progress" />
<Skeleton className="h-4 w-48" />