# Shortcuts

> Six outlined link items in a grid, each with a Phosphor icon, title, full description and an arrow, for quick actions such as requesting a planet visit. It steps to two columns by container width.

A shadcn/ui block from the [@01orbital](https://01orbital.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/01orbital/shortcuts).

- Page, with a live preview: https://shadcn.exchange/r/01orbital/shortcuts
- Screenshot: https://shadcn.exchange/shot/01orbital/shortcuts/light.png
- Registry item: https://01orbital.dev/r/shortcuts.json
- Categories: app
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/01orbital/shortcuts.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@phosphor-icons/react`
- Registry items: `@01orbital/grid`, `@01orbital/item`, `@01orbital/section`

## Files

### `blocks/app/shortcuts/index.tsx`

```tsx
import {
  AirplaneTiltIcon,
  AlienIcon,
  ArrowUpRightIcon,
  FootprintsIcon,
  PlanetIcon,
  RadioactiveIcon,
  RocketLaunchIcon,
} from "@phosphor-icons/react/dist/ssr"

import { Grid } from "@/components/editorial/grid"
import {
  Section,
  SectionContent,
} from "@/components/editorial/section"
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"

const ACTIONS = [
  {
    name: "Request a planet visit",
    description:
      "Pick the planet and the window. Flight dynamics replies with a launch date and the delta-v it costs.",
    href: "#",
    icon: PlanetIcon,
  },
  {
    name: "Submit an alien sighting report",
    description:
      "Time, bearing and what you saw. Anything brighter than Venus goes to the duty astronomer.",
    href: "#",
    icon: AlienIcon,
  },
  {
    name: "Moonwalking training",
    description:
      "Book the pool. Six hours underwater for every hour you will spend on the surface.",
    href: "#",
    icon: FootprintsIcon,
  },
  {
    name: "Launch pass",
    description:
      "Your badge for the pad, the firing room and the crawlerway, with the next closure dates.",
    href: "#",
    icon: RocketLaunchIcon,
  },
  {
    name: "Radiation dose",
    description:
      "Your dosimeter readings for the year, and how much of the career limit is left.",
    href: "#",
    icon: RadioactiveIcon,
  },
  {
    name: "Zero-g flight",
    description:
      "Seats on the next parabolic flight: thirty arcs, twenty-five seconds of weightlessness each.",
    href: "#",
    icon: AirplaneTiltIcon,
  },
] as const

export default function Shortcuts() {
  return (
    <Section>
      <SectionContent className="@container/shortcuts">
        <Grid
          render={<ul role="list" />}
          cols={1}
          gap="sm"
          className="@2xl/shortcuts:grid-cols-2"
        >
          {ACTIONS.map((action) => (
            <li key={action.name}>
              <Item variant="outline" render={<a href={action.href} />}>
                <ItemMedia variant="icon">
                  <action.icon weight="light" aria-hidden="true" />
                </ItemMedia>
                <ItemContent>
                  <ItemTitle>{action.name}</ItemTitle>
                  <ItemDescription className="line-clamp-none">
                    {action.description}
                  </ItemDescription>
                </ItemContent>
                <ItemActions>
                  <ArrowUpRightIcon weight="light" aria-hidden="true" />
                </ItemActions>
              </Item>
            </li>
          ))}
        </Grid>
      </SectionContent>
    </Section>
  )
}
```