# UI components reference
Source: https://docs.anetos.dev/reference/ui/
The components of `views/ui`, the package `anetos new` writes into a
web project, which the layout and the pages of `make:crud`
and `make:auth` call. The package is your app's: this page describes it
as `anetos new` writes it. See [Style your app](https://docs.anetos.dev/guides/styling/index.md)
for changing it.
Every component exists for every CSS framework, with the same name and arguments.
The tables show what the starter theme (`anetos`) writes;
[`none`](https://docs.anetos.dev/reference/ui/index.md#none-plain-html) writes the same elements without
classes, and [Pico, Bootstrap and Bulma](https://docs.anetos.dev/reference/ui/index.md#pico-bootstrap-and-bulma)
(and [Tailwind CSS](https://docs.anetos.dev/reference/ui/index.md#tailwind-css)) write their framework's markup.
```templ
// illustrative
@ui.Card("Profile") {
@ui.Form(web.MustURL(ctx, "settings.profile"), "POST", nil) {
@ui.Field("name", "Name", "As others see it") {
@ui.Input("name", "", view.Old(ctx, "name", user.Name), templ.Attributes{"autocomplete": "name"})
}
@ui.Actions() {
@ui.Button(ui.Primary, nil) {
Save
}
}
}
}
```
A component marked *children* takes content in `{ }`. An `attrs`
argument (`templ.Attributes`, or `nil`) adds attributes to the element,
such as `templ.Attributes{"autocomplete": "email"}` or htmx's
`hx-post`; it shouldn't repeat one the component writes.
## The page's shell
`views/ui/shell.templ`. The layout (`views/layout.templ`) puts these
together.
| Component | Children | Writes |
|---|---|---|
| `Head()` | | `` to `app.css` (`public.Assets.URL`), for the layout's `` |
| `Header(brand, home string)` | the `Nav` and `NavEnd` | `` with the app's name, `brand`, linking to `home` |
| `Nav(label string)` | `NavLink`s | `