Components
Banner communicates system-wide announcements, statuses, and alerts, from Meta's Astryx design system. Supports info, success, warning, and error statuses, dismissable and collapsible content, action buttons via endContent, and a section container variant for in-page placement.
npx @21st-dev/cli add Astryxdesign/astryx-bannerLoading preview...
'use client';
import Banner from '@/components/ui/astryx-banner';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {Stack} from '@astryxdesign/core/Layout';
export default function BannerDismissable() {
return (
<Theme theme={neutralTheme}>
<div
style={{
minHeight: '100dvh',
display: 'grid',
placeItems: 'center',
padding: 24,
}}>
<Stack direction="vertical" gap={3}>
<Banner
status="success"
title="Deployment complete"
description="Version 3.2.0 is now live in production."
isDismissable
/>
<Banner
status="warning"
title="Scheduled maintenance tonight"
description="The system will be briefly unavailable from 2:00–3:00 AM."
isDismissable
/>
<Banner
status="info"
title="New feature available"
description="Try the new dashboard layout in Settings."
isDismissable
/>
</Stack>
</div>
</Theme>
);
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...