Skip to content
NewService Map: 30 components for hosts, ports and routes
<hf-banner>Custom elementFeedbackFree

Announcement

Announcement banner on a dithered gradient with a passing sheen; dismissing breaks it into dots that blow away before it collapses.

View as Markdown
<hf-banner>
Ultracode is herePlan and run multi-agent workflows from the composer.

Trypress the ✕.

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-banner>
Props
actionremounts
variantremounts
<HfBanner action="Try it" />

Installation

pnpm dlx shadcn@latest add @lumesec/hf-banner
First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

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

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-banner.json

Usage

import { HfBanner } from "@/components/lumesec/hf-banner";

export function Example() {
  return (
    <HfBanner action="Try it">
      <span slot="title">Ultracode is here</span>
      {`  Plan and run multi-agent workflows from the composer.`}
    </HfBanner>
  );
}

Behaviour

A dithered gradient with a passing sheen and a twinkling sparkle. Dismissing it disintegrates it into dots that blow away to the right before the space closes.

API reference

Attributes

actionReact propactionTypestringDefaultTry it

Label of the action button. An empty value hides the button. Read once on connect.

variantReact propvariantTypeok | warn

Colour scheme: ok (green) or warn (amber). Without it the accent colour is used.

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

actionReact proponActionDetail{}

Fires when the action button is clicked.

dismissReact proponDismissDetail{}

Fires when the disintegration ends and the collapse begins: about 0.95 s after dismissing, or at once with reduced motion.

Methods

Call them on the element, for example through a React ref.

dismiss()

Plays the disintegration, then collapses the banner. Same as the dismiss button.

show()

Restores a dismissed banner and replays the entrance.

Slots

title

Heading text. Falls back to Ultracode is here.

(default)

Description text. Falls back to a sample sentence.

Accessibility

  • The banner has role="status".
  • The dismiss button is a native button with aria-label="Dismiss"; the action button is a native button.
  • Dismissing makes the content inert, so its buttons leave the tab order and the accessibility tree; show() restores them.
  • Reduced motion: there is no entrance or sheen, the sparkle is static, and dismissing clears the canvas and emits dismiss at once; the CSS height collapse still transitions.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --foreground, --lumesec, --lumesec-foreground, --lumesec-success, --lumesec-warning and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg, --ui-font, --ui-muted, --ui-ok, --ui-on-accent and --ui-warn.

Notes

  • The canvas extends 24px to the left, 72px to the right and 24px above and below the banner so the particles can leave it; an ancestor with overflow: hidden clips them.

Related

<hf-progress>
Progresshf-progressOpen Progress
<hf-context>
Context windowhf-contextOpen Context window
<hf-gauge>
Gaugehf-gaugeOpen Gauge
<hf-rings>
Goal ringshf-ringsOpen Goal rings

Was this page helpful?