Vertical list of clickable shortcuts in a SectionCard. Spell rows out inline with QuickActionItem — swap the anchor for NuxtLink or RouterLink when you need SPA routing.
Also available for React ->$pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/quick-actions.json$npx shadcn-vue@latest add https://uipkge.dev/r/vue/quick-actions.json$yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/quick-actions.json$bunx shadcn-vue@latest add https://uipkge.dev/r/vue/quick-actions.jsonnpx shadcn-vue@latest add @uipkge/quick-actionsInstalls to:app/components/blocks/| Name | Type / Values | Default | Required |
|---|---|---|---|
title | string | — | optional |
description | string | — | optional |
class | string | — | optional |
<script setup lang="ts">
import { SectionCard } from '@/components/ui/section-card'
defineProps<{
title?: string
description?: string
class?: string
}>()
</script>
<template>
<SectionCard
data-slot="quick-actions"
:title="title ?? 'Quick Actions'"
:description="description"
content-class="flex flex-col gap-2"
:class="$props.class"
>
<slot />
</SectionCard>
</template>
<script setup lang="ts">
import type { Component, HTMLAttributes } from 'vue'
import { ArrowUpRight } from 'lucide-vue-next'
import { IconBox } from '@/components/ui/icon-box'
defineProps<{
label: string
icon?: Component
href?: string
class?: HTMLAttributes['class']
}>()
</script>
<!-- One shortcut row. Needs no router adapter: paste your own RouterLink in
place of the anchor when you need SPA routing — you own this file. -->
<template>
<a
:href="href"
class="hover:border-border hover:bg-muted/50 group flex cursor-pointer items-center gap-3 rounded-lg border border-transparent p-3 transition-colors duration-200"
:class="$props.class"
>
<IconBox v-if="icon" :icon="icon" />
<span class="flex-1 text-sm font-medium">{{ label }}</span>
<ArrowUpRight
class="text-muted-foreground size-4 opacity-0 transition-colors duration-200 group-hover:opacity-100"
/>
</a>
</template>
Raw manifest:https://uipkge.dev/r/vue/quick-actions.json
