UIPackage
Vue React

Quick Actions

block dashboard
Edit on GitHub

Vertical list of clickable shortcuts in a SectionCard. Pass linkComponent (NuxtLink or RouterLink) for SPA routing.

Also available for React ->

Installation

$ npx shadcn-vue@latest add https://uipkge.dev/r/vue/quick-actions.json

Or with the named registry: npx shadcn-vue@latest add @uipkge/quick-actions

Examples

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

QuickAction 
interface QuickAction {
  id: string | number
  label: string
  icon?: Component
  route: string
}

npm dependencies

lucide-vue-next

Files (1)

  • app/components/blocks/QuickActions.vue 1.3 kB 
    <script setup lang="ts">
import type { Component } from 'vue'
import { ArrowUpRight } from 'lucide-vue-next'
import { SectionCard } from '@/components/ui/section-card'
import { IconBox } from '@/components/ui/icon-box'

interface QuickAction {
  id: string | number
  label: string
  icon?: Component
  route: string
}

withDefaults(
  defineProps<{
    title?: string
    description?: string
    actions: QuickAction[]
    linkComponent?: string | Component
    class?: string
  }>(),
  { linkComponent: 'a' },
)
</script>

<template>
  <SectionCard
    :title="title ?? 'Quick Actions'"
    :description="description"
    content-class="flex flex-col gap-2"
    :class="$props.class"
  >
    <component
      :is="linkComponent"
      v-for="action in actions"
      :key="action.id"
      :to="action.route"
      :href="action.route"
      class="hover:border-border hover:bg-muted/50 group flex cursor-pointer items-center gap-3 rounded-lg border border-transparent p-3 transition-all duration-200"
    >
      <IconBox v-if="action.icon" :icon="action.icon" />
      <span class="flex-1 text-sm font-medium">{{ action.label }}</span>
      <ArrowUpRight
        class="text-muted-foreground size-4 opacity-0 transition-all duration-200 group-hover:opacity-100"
      />
    </component>
  </SectionCard>
</template>

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