Quick Actions

blocklayout

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.

Installation

$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.json

Named registry:npx shadcn-vue@latest add @uipkge/quick-actionsInstalls to:app/components/blocks/

Variants

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`title`	`string`	—	optional
`description`	`string`	—	optional
`class`	`string`	—	optional

npm dependencies

lucide-vue-next

Includes

section-card icon-box

Files installed (2)

app/components/blocks/QuickActions.vue0.4 kB

<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>

app/components/blocks/QuickActionItem.vue0.9 kB

Raw manifest:https://uipkge.dev/r/vue/quick-actions.json

Change language