Alert

1import { Alert, AlertTitle, AlertDescription } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <Alert>
6      <AlertTitle>Changes saved</AlertTitle>
7      <AlertDescription>Your workspace has been updated.</AlertDescription>
8    </Alert>
9  )
10}

1import { Alert, AlertTitle, AlertDescription } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="space-y-3">
6      <Alert variant="glass">
7        <AlertTitle>Glass</AlertTitle>
8        <AlertDescription>Frosted glass surface with refraction edge.</AlertDescription>
9      </Alert>
10      <Alert variant="liquid">
11        <AlertTitle>Liquid</AlertTitle>
12        <AlertDescription>Caustic light pools with depth shimmer.</AlertDescription>
13      </Alert>
14      <Alert variant="matte">
15        <AlertTitle>Matte</AlertTitle>
16        <AlertDescription>Brushed aluminum with inner glow.</AlertDescription>
17      </Alert>
18      <Alert variant="glow">
19        <AlertTitle>Glow</AlertTitle>
20        <AlertDescription>Dark surface with soft outer luminance.</AlertDescription>
21      </Alert>
22    </div>
23  )
24}

1import { Alert, AlertTitle, AlertDescription } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="space-y-3">
6      <Alert variant="success">
7        <AlertTitle>Success</AlertTitle>
8        <AlertDescription>Operation completed successfully.</AlertDescription>
9      </Alert>
10      <Alert variant="warning">
11        <AlertTitle>Warning</AlertTitle>
12        <AlertDescription>Please review before continuing.</AlertDescription>
13      </Alert>
14      <Alert variant="destructive">
15        <AlertTitle>Error</AlertTitle>
16        <AlertDescription>Something went wrong.</AlertDescription>
17      </Alert>
18      <Alert variant="info">
19        <AlertTitle>Info</AlertTitle>
20        <AlertDescription>Here is some helpful context.</AlertDescription>
21      </Alert>
22    </div>
23  )
24}

1import { Alert, AlertTitle } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="space-y-3">
6      <Alert variant="outline"><AlertTitle>Outline</AlertTitle></Alert>
7      <Alert variant="ghost"><AlertTitle>Ghost</AlertTitle></Alert>
8    </div>
9  )
10}