Quick start

1. Import implemented components

---
import { Button, Input, PageHeader, Surface } from '@freightpx/frasto';
---

2. Render server-first UI

<PageHeader
  eyebrow="Account"
  title="Profile"
  description="Update the name shown to other workspace members."
>
  <Button slot="actions" type="submit" form="profile-form">Save changes</Button>
</PageHeader>

<Surface as="section" padding="lg">
  <form id="profile-form" method="post">
    <label for="display-name">Display name</label>
    <Input id="display-name" name="displayName" autocomplete="name" />
  </form>
</Surface>

The page renders useful HTML and CSS on the server. Button, Input, PageHeader, and Surface do not require a client framework.

3. Keep data application-owned

Load and validate data in your Astro page, action, or endpoint. Pass display values and native form attributes into Frasto components; the UI package does not prescribe transport or persistence.

<Input
  id="display-name"
  name="displayName"
  value={profile.displayName}
  aria-invalid={errors.displayName ? 'true' : undefined}
/>

4. Customize semantic tokens

:root {
  --frasto-bg: #f8f6f0;
  --frasto-ink: #161616;
  --frasto-radius: 0px;
}

Your overrides describe the product theme; component source remains unchanged.

Continue with component setup or browse available components.