Edit Profile

Dark Mode

Copy config

Copy and paste the following code into your global.css file to apply the styles.

DISCLAIMER: This component is in
Beta
status. That means that it is ready for production, but the API might change.

Alert

Displays a callout for user attention.

Installation

Run the following cli command or copy/paste the component code into your project

qwik-ui add alert
import { component$, Slot, PropsOf } from '@builder.io/qwik';
import { cn } from '@qwik-ui/utils';
 
import { cva, type VariantProps } from 'class-variance-authority';
 
export const alertVariants = cva(
  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
  {
    variants: {
      look: {
        neutral: 'bg-background text-foreground',
        alert: 'border-alert/60 text-alert [&>svg]:text-alert',
        primary: 'border-primary',
        secondary: 'border-secondary',
      },
    },
    defaultVariants: {
      look: 'neutral',
    },
  },
);
 
type AlertProps = PropsOf<'div'> & VariantProps<typeof alertVariants>;
 
export const Alert = component$<AlertProps>(({ look, ...props }) => {
  return (
    <div {...props} role="alert" class={cn(alertVariants({ look }), props.class)}>
      <Slot />
    </div>
  );
});
 
export const AlertTitle = component$<PropsOf<'h5'>>(({ ...props }) => {
  return (
    <h5
      {...props}
      class={cn('mb-1 font-medium leading-none tracking-tight', props.class)}
    >
      <Slot />
    </h5>
  );
});
 
export const AlertDescription = component$<PropsOf<'div'>>(({ ...props }) => {
  return (
    <div {...props} class={cn('text-sm [&_p]:leading-relaxed', props.class)}>
      <Slot />
    </div>
  );
});

Usage

import { Alert, AlertDescription, AlertTitle } from '@qwik-ui/styled';
<Alert>
  <Terminal className="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Examples

Alert

import { component$ } from '@builder.io/qwik';
import { Alert, AlertDescription, AlertTitle } from '@qwik-ui/styled';
import { LuAlertTriangle } from '@qwikest/icons/lucide';

export default component$(() => {
  return (
    <Alert look="alert">
      <LuAlertTriangle class="h-4 w-4" />
      <AlertTitle>Error</AlertTitle>
      <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
    </Alert>
  );
});

Primary

import { component$ } from '@builder.io/qwik';
import { Alert, AlertDescription, AlertTitle } from '@qwik-ui/styled';
import { LuAlertTriangle } from '@qwikest/icons/lucide';

export default component$(() => {
  return (
    <Alert look="primary">
      <LuAlertTriangle class="h-4 w-4" />
      <AlertTitle>Error</AlertTitle>
      <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
    </Alert>
  );
});