Inline alert

Playground#

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

<PxAlert type="warning" heading="Usage at 85%" dismissible>You’ve used most of this week’s limit.</PxAlert>

Installation#

pnpm dlx shadcn@latest add @lumesec/px-alert

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

npx shadcn@latest add https://elements.lumesec.ai/r/px-alert.json

Usage#

import { PxAlert } from "@/components/lumesec/px-alert";

export function Example() {
  return (
    <PxAlert type="warning" heading="Usage at 85%" dismissible>
      You’ve used most of this week’s limit.
    </PxAlert>
  );
}

Behaviour#

Info, success, warning and error, each with a pixel icon and a glowing stripe. Dismissing scatters the stripe and collapses the alert.

API reference#

Props#

Also accepts every prop of <div> (React.ComponentProps<"div">), spread onto the root element.

Ref#

ref points at the root HTMLDivElement.

Accessibility#

• error and warning alerts have role="alert"; info and success alerts have role="status".
• The dismiss button is a native button labelled "Dismiss".
• The icon and stripe are drawn on an aria-hidden canvas; the tone is not conveyed as text.
• Once dismissed the root is hidden and leaves the accessibility tree.
• Reduced motion: the stripe glow stops, and dismissing hides the alert at once without scattering pixels.

Theming#

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --lumesec, --lumesec-shine, --lumesec-success, --lumesec-warning, --destructive, --border, --card, --foreground and --muted-foreground.

Notes#

• Uncontrolled alerts stay hidden after dismissal; control open to show one again.
• The root carries data-state="open" or data-state="closed" and data-type.