# Shortcuts

> A short list of quick links or actions, flush to its container.

Source: https://ui.jcsoftdev.com/docs/components/shortcuts

A short list of quick links or actions, flush to its container. Items go in `ShortcutsItem`.

## Import

```ts
import { Shortcuts } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/shortcuts`.

## Usage

```tsx
<Shortcuts aria-label="Quick links">
  <>
          <ShortcutsItem href="#students" icon={<Users />} kbd="G S">
            Students
          </ShortcutsItem>
          <ShortcutsItem href="#calendar" icon={<Calendar />} count={4}>
            Calendar
          </ShortcutsItem>
        </>
</Shortcuts>
```

## Props

This component declares no props of its own.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-shortcuts--default)
- [Actions Are Buttons](/storybook/?path=/story/containers-shortcuts--actions-are-buttons)
- [As Child With Router Link](/storybook/?path=/story/containers-shortcuts--as-child-with-router-link)

## Source

`packages/ui/src/containers/shortcuts/shortcuts.tsx`