# layout.command

A shell command to copy and run: the main call to action wherever it appears. Its copy button covers the whole box, so a click anywhere copies

Component: [`<Layout>`](https://www.prongs.dev/docs/components/layout.md) · Renders: `<div>` · Profile: [UI](https://www.prongs.dev/docs/intents/ui.md)

## Example

```tsx
<Layout intent="layout.command">
  …
</Layout>
```

## Choosing between neighbours

Find the row that describes your element, and use the intent on the right.

| If it is for… | Use |
|---|---|
| A shell command to copy and run: the main call to action wherever it appears. Its copy button covers the whole box, so a click anywhere copies | `layout.command` (this page) |
| A code sample of several lines | [`text.code`](https://www.prongs.dev/docs/intents/text/code.md) |
| A row of controls for the content below | [`layout.toolbar`](https://www.prongs.dev/docs/intents/layout/toolbar.md) |

## Connections

Declared in the registry, both directions. Where an intent is used in your own code is something check and the gallery see; this site has no app code.

- Built from: [`arrange.row`](https://www.prongs.dev/docs/intents/ui.md#arrange-row)

## For registry authors

**Starter intents.** These are the intents `prongs add` puts in your registry, shown in this site’s theme. Yours are your own `registry.ts`: rename, restyle and add to them, and see them with `prongs add gallery`.

What this intent is built from and its entry in `components/prongs/registry.ts`. You only need this to change how it looks or to add an intent like it.

How layout.command resolves, and its definition

Each layer adds to the one before it; a later class wins over an earlier one that sets the same thing.

- [`arrange.row`](https://www.prongs.dev/docs/intents/ui.md#arrange-row) — Children in a wrapping row

  ```
  flex flex-row flex-wrap items-center
  ```

- `layout.command` (this page) — A shell command to copy and run: the main call to action wherever it appears. Its copy button covers the whole box, so a click anywhere copies

  ```
  relative w-fit cursor-pointer flex-nowrap items-center gap-4
  rounded-lg bg-secondary py-1.5 pr-1.5 pl-4 font-mono text-sm
  text-foreground transition-colors hover:bg-secondary/80
  [&>button]:static [&>button]:size-auto [&>button]:rounded-full
  [&>button]:bg-primary [&>button]:px-3 [&>button]:py-1.5
  [&>button]:text-primary-foreground [&>button]:after:absolute
  [&>button]:after:inset-0 [&>button]:after:rounded-lg
  [&>button]:after:content-[''] hover:[&>button]:bg-primary/90
  [&>button:hover]:text-primary-foreground
  hover:[&>button]:text-primary-foreground
  ```

Final classes

```
flex flex-row relative w-fit cursor-pointer flex-nowrap
items-center gap-4 rounded-lg bg-secondary py-1.5 pr-1.5 pl-4
font-mono text-sm text-foreground transition-colors
hover:bg-secondary/80 [&>button]:static [&>button]:size-auto
[&>button]:rounded-full [&>button]:bg-primary [&>button]:px-3
[&>button]:py-1.5 [&>button]:text-primary-foreground
[&>button]:after:absolute [&>button]:after:inset-0
[&>button]:after:rounded-lg [&>button]:after:content-['']
hover:[&>button]:bg-primary/90
[&>button:hover]:text-primary-foreground
hover:[&>button]:text-primary-foreground
```

Definition

```ts
'layout.command': {
  kind: 'semantic',
  description: 'A shell command to copy and run: the main call to action wherever it appears. Its copy button covers the whole box, so a click anywhere copies',
  refs: ['arrange.row'],
  binding: {
    classes: 'relative w-fit cursor-pointer flex-nowrap items-center gap-4 rounded-lg bg-secondary py-1.5 pr-1.5 pl-4 font-mono text-sm text-foreground transition-colors hover:bg-secondary/80 [&>button]:static [&>button]:size-auto [&>button]:rounded-full [&>button]:bg-primary [&>button]:px-3 [&>button]:py-1.5 [&>button]:text-primary-foreground [&>button]:after:absolute [&>button]:after:inset-0 [&>button]:after:rounded-lg [&>button]:after:content-[\'\'] hover:[&>button]:bg-primary/90 [&>button:hover]:text-primary-foreground hover:[&>button]:text-primary-foreground',
  },
  notFor: [
    { context: 'a code sample of several lines', instead: 'text.code' },
    {
      context: 'a row of controls for the content below',
      instead: 'layout.toolbar',
    },
  ],
},
```