Design System Components
This page is the contract for how every Activatus component works. It lists each standard component with its variants and key props.
We do not share component code between projects yet, so this page is what keeps them the same. Every project builds its components to the props listed here. See Future-proofing for why.
How to use this page
- Before building a component, look it up here. If it is listed, build it with these variants and props — the same names, the same meaning. Do not invent your own.
- Do not rename, remove or repurpose a listed prop. Projects differ in how a component looks, never in how it works.
- Building a component that is not listed? If it takes everything through props and imports nothing from the project, keep it in the project's
components/ui/and record it, with its props, in the project'sdocs/development/coding-standards.md, under "Components for the standards". Tell the person: it is added to this page in the next release, so the next project builds it the same way. Working in the standards repo itself? Add it here in the same piece of work. - A project needs something a listed component does not do? Add the prop or variant here first, then build it. The reference changes before the code does.
- How to write each component — its folder, files, the order inside the file, tests and stories — is in Component Organization. This page says what each component takes; that page says how every component is written.
This applies to everyone building components, including AI agents.
Global / Navigation
| # | Component | Variants | Key props |
|---|---|---|---|
| 1 | NavigationBar | default, large | logo (asset) navigationItems (link[]) callToAction (Button) sticky (boolean) transparent (boolean) |
| 2 | Expanded Menu | — | columns (linkGroup[]) featured (blok[]) trigger (text) |
| 3 | Hamburger Menu | — | icon menuItems (link[]) icon (asset) position (left/right) |
| 4 | Search Bar | inline, overlay | placeholder scope (text) showSuggestions (boolean) |
| 5 | Promo Bar | — | text (richtext) link dismissible (boolean) startDate endDate |
| 6 | Breadcrumbs | — | items (link[]) separator (text) showHome (boolean) |
| 7 | Sidebar | — | items (link[]) position (left/right) collapsible (boolean) width |
| 8 | Pagination | numbered, load-more, infinite | totalPages (number) current (number) showPrevNext (boolean) |
| 9 | Footer | slim, default, large | logo columns (linkGroup[]) socialLinks (link[]) legalLinks (link[]) copyright (text) |
| 62 | Brand Logo | — | className (Tailwind classes, usually a size such as size-8)Each project inlines its own logo SVG, coloured from the palette and hidden from screen readers: the link around it names it |
| 65 | Dropdown Menu | — | Radix UI's Dropdown Menu props, unchanged (shadcn/ui) parts: Dropdown Menu Trigger, Dropdown Menu Content, Dropdown Menu Item |
Auth / Account
| # | Component | Variants | Key props |
|---|---|---|---|
| 10 | Login Form | — | heading forgotLink signupLink submitLabel |
| 11 | Sign-up Form | — | heading fields (Input[]) termsText (richtext) loginLink submitLabel |
| 12 | Password Reset | — | heading helpText submitLabel |
| 13 | Account Menu | — | avatar (asset) userName menuItems (link[]) logoutLabel |
Hero / Headers
| # | Component | Variants | Key props |
|---|---|---|---|
| 14 | Hero Banner | Image, Video | heading subheading body (richtext) media (asset/video) buttons (Button[]) alignment overlay (boolean) |
| 15 | Banner | — | eyebrow heading subheading (richtext) alignment |
| 64 | Scroll Cue | — | label (text) |
Layout primitives
| # | Component | Variants | Key props |
|---|---|---|---|
| 17 | Duplex | — | left (blok[]) right (blok[]) ratio (50/50, 60/40) verticalAlign reverseOnMobile (boolean) |
| 18 | Triplex | — | columns (blok[] ×3) gap verticalAlign |
| 19 | Card Grid | — | cards (blok[]) columns (number) gap |
| 21 | Section Wrapper | — | content (blok[]) backgroundColor (token) maximumWidth anchorId |
| 22 | Spacer / Divider | — | size (small/medium/large) showLine (boolean) lineColor |
| 23 | Tab Group | — | tabs array (label, content) defaultTab |
| 25 | Carousel | — | slides (blok[]) autoplay (boolean) interval showArrows showDots slidesPerView |
| 26 | Social Icons | — | items array (icon, alt-text, url) |
Content blocks
| # | Component | Variants | Key props |
|---|---|---|---|
| 26 | Rich Text | — | content (richtext) |
| 28 | Notification Toast | — | message type (information/success/warning/error) dismissible (boolean) duration position |
| 29 | Slider | — | direction items array (image, title, url, testimonials) |
| 46 | Review | — | author rating (number) date body avatar verified (boolean) |
| 20 | Card | default, image, icon | image (asset) title body (richtext) link button (Button) |
| 24 | Accordion | — | items array (title, content) allowMultiple (boolean) |
| 63 | Notification Card | — | notifications array (title, message, timeLabel), front card first className |
Media
| # | Component | Variants | Key props |
|---|---|---|---|
| 39 | Image | — | image (asset) alt caption aspectRatio link |
| 40 | Gallery | — | images (asset[]) columns enableLightbox (boolean) |
| 41 | Video | — | source (url/file) poster (asset) autoplay loop controls (boolean) |
| 42 | Modal | — | trigger (Button) content (blok[]) size closeOnOverlay (boolean) |
| 43 | Map / Location | — | latitude (number) longitude (number) zoom markers (blok[]) address (text) |
| 44 | Embed / iframe | — | url aspectRatio title allowFullscreen (boolean) |
CTA / Forms
| # | Component | Variants | Key props |
|---|---|---|---|
| 49 | CTA Banner | — | heading body (richtext) buttons (Button[]) backgroundColor (token) alignment |
| 50 | Newsletter Signup | inline, stacked | heading placeholder submitLabel consentText (richtext) |
| 51 | Contact Form | — | heading fields (Input[]) submitLabel successMessage recipientEmail |
| 52 | Input | type: text, select, auto-select, dropdown, textarea | name placeholder required (boolean) helpText options (select/dropdown) validation |
| 53 | Checkbox / Radio Group | checkbox, radio | name options (text[]) required (boolean) inline (boolean) |
| 54 | Button | primary, secondary, ghost | link size (small/medium/large) icon iconPosition fullWidth (boolean) |
| 55 | Cookie Banner | — | text (richtext) acceptLabel rejectLabel policyLink |
Utility (low-level primitives)
| # | Component | Variants | Key props |
|---|---|---|---|
| 56 | Icon | — | name (text) size color (token) |
| 57 | Avatar | image, initials | image (asset) name size shape (circle/square) |
| 59 | Tooltip | — | content (text) position (top/right/bottom/left) trigger (hover/click) |
| 60 | Progress Bar | linear, circular | value (number) maximum (number) showLabel (boolean) |
| 61 | Alert | information, success, warning, error | message (richtext) type dismissible (boolean) icon (asset) |
Legend:
- blok[] = Array of nested blocks/components (Storyblok terminology)
- richtext = Rich text content (HTML/Markdown)
- asset = Image or media file reference
- token = Design system token (color, spacing, etc.)
- array (x, y) = Array of objects with properties x, y