# SaaS pack

Apps people work in: records in tables, settings pages, plans and billing.

Added with: `npx prongs add saas` · Profile: [UI](https://www.prongs.dev/docs/intents/ui.md) · Intents: [8](#intents) · Domains: [`action.*`](https://www.prongs.dev/docs/intents/action.md) [`nav.*`](https://www.prongs.dev/docs/intents/nav.md) [`choice.*`](https://www.prongs.dev/docs/intents/choice.md) [`layout.*`](https://www.prongs.dev/docs/intents/layout.md)

## Adding it

```bash
npx prongs add saas
```

Copies the 8 intents below into your registry, skipping any it already has, and regenerates `PRONGS.md`. A “not for” line that points at an intent your registry does not have is left out.

## Intents

### [`action.*`](https://www.prongs.dev/docs/intents/action.md) Action

| Intent | Status | Use it for |
|---|---|---|
| [`action.inspect`](https://www.prongs.dev/docs/intents/action/inspect.md) | `<button>` | Opens the details of a record in a table, on its name: the whole row opens it, while the other controls in the row, like its menu, still work on their own |
| [`action.sort`](https://www.prongs.dev/docs/intents/action/sort.md) | `<button>` | Sorts a table by a column: the button inside its th. Put aria-sort="ascending" or "descending" on the th of the sorted column; the arrow follows it |
| [`action.upgrade`](https://www.prongs.dev/docs/intents/action/upgrade.md) | `<button>` | Starts or manages paying for more: upgrade, change plan, manage billing |

### [`nav.*`](https://www.prongs.dev/docs/intents/nav.md) Navigation

| Intent | Status | Use it for |
|---|---|---|
| [`nav.trail`](https://www.prongs.dev/docs/intents/nav/trail.md) | `<a>` | One link in a breadcrumb trail of the pages above this one. Put them in a nav with aria-label="Breadcrumb" and pass current on the last |

### [`choice.*`](https://www.prongs.dev/docs/intents/choice.md) Choice

| Intent | Status | Use it for |
|---|---|---|
| [`choice.bulk`](https://www.prongs.dev/docs/intents/choice/bulk.md) | `<button>` | Picks a row to act on together with others: the checkbox at the start of a table row. Pass pressed while picked; show a layout.toolbar of actions while any are picked |

### [`layout.*`](https://www.prongs.dev/docs/intents/layout.md) Layout

| Intent | Status | Use it for |
|---|---|---|
| [`layout.setting`](https://www.prongs.dev/docs/intents/layout/setting.md) | `<div>` | One setting changed in place: its label and help text at the start, its switch or menu at the end. Settings pages, preferences |
| [`layout.subnav`](https://www.prongs.dev/docs/intents/layout/subnav.md) | `<div>` | A page with its own section nav beside its content: settings, account, a project’s admin. Put the nav first (a nav of nav.page links), then the content. On phones the nav sits above it |
| [`layout.locked`](https://www.prongs.dev/docs/intents/layout/locked.md) | `<div>` | A feature the current plan does not include, with how to get it: what it does and an action.upgrade |

## Next to the starter

The starter intents this pack’s intents are told apart from. Each pack intent’s page says when to use which.

| Intent | Use it for | Resolves to |
|---|---|---|
| [`action.command`](https://www.prongs.dev/docs/intents/action/command.md) | Does something and stays on the page: edit, add, remove, retry, share, open, back, refresh, duplicate, move, download, archive, sign out. The label says the verb; pass verb="duplicate", "archive"... to name it for analytics. Pass tone="danger" when it is destructive or hard to undo, like leaving a workspace. | `<button>` |
| [`choice.open`](https://www.prongs.dev/docs/intents/choice/open.md) | Shows what is picked and opens the choices to change it: a sort order, sources. The trigger of a Popover picker | `<button>` |
| [`layout.field`](https://www.prongs.dev/docs/intents/layout/field.md) | One form field: its label, input, help text and error | `<div>` |
| [`layout.shell`](https://www.prongs.dev/docs/intents/layout/shell.md) | The frame of an app with a sidebar: one layout.aside beside the main column. Used once, around the signed-in part of the app | `<div>` |
| [`action.start`](https://www.prongs.dev/docs/intents/action/start.md) | The main action of a page or region that begins something: New project, Get started, Sign up, Start a trial. Pass verb="create", "signup"... to name it for analytics. | `<a>` |
| [`choice.filter`](https://www.prongs.dev/docs/intents/choice/filter.md) | Narrows which items are shown: All, Unread, a source. Pass pressed while it applies | `<button>` |
| [`layout.notice`](https://www.prongs.dev/docs/intents/layout/notice.md) | A message about the page or the account: check your email, password updated, your trial ends soon. Add an action.dismiss when it can be dismissed | `<div>` |
| [`nav.page`](https://www.prongs.dev/docs/intents/nav/page.md) | A link to a page in site or app navigation, including Sign in. Pass current on the page you are on | `<a>` |

## For registry authors

**Pack intent.** `prongs add saas` puts the saas pack’s intents in your registry. They are then yours like the starter intents: rename, restyle and add to them, and see them with `prongs add gallery`.