Announcement

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeAnnouncementExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeAnnouncementExample/></NativeScope>}

In the sidebar

The card is designed for the foot of the 260px sidebar panel - it's what the sidebar block renders above the user menu.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="announcement" id="in-sidebar"/>}

Variations

Every part is optional - swap the icon, drop the description or actionLabel, and toggle dismissible.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="announcement" id="variations"/>}