hulla.dev

Reference

Choose a component

Find a shared primitive for content, navigation, forms, overlays, and feedback.

On this page

Install components by registry name with hulla ui add. The registry supplies Astro, React, and Solid source; choose the framework your page uses.

Terminal
hulla ui add --framework astro alert card stepper

A component family can contain several parts. For example, installing card gives you Card, CardHeader, CardTitle, CardDescription, CardContent, and CardFooter. Import the parts you need from their installed files.

Explain and organize content

FamilyUse it for
typographyParagraphs and lists with shared measure, spacing, and text color.
cardA related title, description, content, and actions.
alertA note, warning, error, or success message that affects the reader’s next action.
stepperAn ordered process, with a label and content for each stage.
codeCode samples with a filename, copy action, and optional line emphasis.
tableData compared across the same columns.
badgeA short status or category.
collapsibleOptional details that would interrupt the main task.

Compose an alert

Import the Alert parts from src/components/alert/, then put the consequence in the title and the remedy in the description:

astro
<Alert variant="warning">
  <AlertTitle>Changes aren't saved</AlertTitle>
  <AlertDescription>Save this draft before leaving the page.</AlertDescription>
</Alert>

The default role="note" suits static documentation. Use role="alert" for a newly displayed urgent message, rather than making every note an announcement.

Keep body copy consistent

Install typography when you render Markdown or other long-form content. It adds a shared stylesheet, rather than paragraph or list components:

Terminal
hulla ui add typography

The CLI activates the stylesheet in the application entrypoint. Wrap the rendered content in class="prose":

html
<article class="prose">
  <h2>Save your draft</h2>
  <p>Save the draft before you leave.</p>
  <ul>
    <li>Check the title.</li>
    <li>Preview the result.</li>
  </ul>
  <div class="not-prose"><!-- Shared UI components --></div>
</article>

The stylesheet owns paragraph, heading, list, link, and inline-code defaults using the shared theme. Body copy uses 0.9375rem (15px at the default root size) with a line height of 1.75. A not-prose or data-component-boundary wrapper keeps embedded components under their own styling. A nested prose region can opt back in. Frontmatter remains document metadata; the styles apply to the rendered body.

FamilyUse it for
navigation-menuLinks to other pages.
breadcrumbsThe path from a section to the current page.
sidebarPersistent navigation through a large section.
table-of-contentsLinks to sections within a long page.
tabsEquivalent views of one task.
commandSearchable actions or destinations.

Keep required tutorial steps visible in order. Tabs suit equivalent install commands; they make poor hiding places for step two.

FamilyUse it for
buttonAn action, with shared emphasis, sizes, and disabled states.
input / textareaShort or long text input. Give each control a visible label.
dialogA focused task that interrupts the page and needs focus management.
spinnerIndeterminate progress, paired with a text label.
kbdA keyboard shortcut.
Prefer the control that owns the behavior

Dialogs need focus management, tabs need keyboard navigation, and command menus need selection behavior. Start with the shared component rather than a styled container and a growing list of event handlers.

For a complete page, follow Build a reading counter. For shared styling rules, read Composition and themes.