# Components & styling

> Editable components for Astro, React, and Solid, with the same tokens, variants, and interaction rules.

`@hulla/ui` is a collection of components for Astro, React, and Solid. Install the source files into your app, then compose them into pages with shared colors, spacing, and interaction behavior.

**Interactive example: **Use the shipped form. Add tasks, complete them, and try keyboard focus and disabled states.

The live form uses installed Solid components and their shipped keyboard, focus, and disabled behavior.

[Build the working example](https://hulla.dev/guides/ui/quick-start.md)

Build a [reading counter](https://hulla.dev/guides/ui/quick-start.md) for a first example, or [find a component](https://hulla.dev/docs/ui/components.md) for your next page.

## One design, across frameworks

`@hulla/ui` provides components for Astro, React, and Solid. The generated components use the same design tokens and public variants across all three frameworks.

The example uses the default card and button styles. Its surrounding page only controls layout.

## Compose an example

With the components installed under `src/components`, an Astro composition looks like this:

```astro filename="Example.astro"
---
import Button from '@/components/button/button.astro'
import Card from '@/components/card/card.astro'
import CardHeader from '@/components/card/card-header.astro'
import CardTitle from '@/components/card/card-title.astro'
import CardContent from '@/components/card/card-content.astro'
---

<Card>
  <CardHeader>
    <CardTitle>Your next project</CardTitle>
  </CardHeader>
  <CardContent>
    <Button>Get started</Button>
  </CardContent>
</Card>
```

## Keep the shared styles together

Component source and the shared stylesheet are a pair. Update both when you update the components. The stylesheet includes the fonts, theme tokens, and supporting rules used by the generated source.

| Layer        | Responsibility                                           |
| ------------ | -------------------------------------------------------- |
| Shared theme | Fonts, colors, radii, shadows, and shared states         |
| Components   | Appearance and behavior of each public part              |
| Page layout  | Placement, available width, and spacing between examples |
| Markdown     | Headings, paragraphs, lists, and links in the document   |

## Markdown and components

Write explanations in Markdown and use components for richer examples. This documentation maps Markdown elements to explicit renderers: inline code and tables use shared components, and fenced code uses the same code-block composition as other examples.

> Prose styles should belong to the prose elements. A paragraph inside a card should keep the card component's typography.

The preview below is nested in a Markdown blockquote to exercise that boundary:

## Color themes

Use the theme control in the header to switch between light and dark. Components use the shared theme tokens in both modes.