Quick Actions

blocklayout

Vertical list of clickable shortcuts in a SectionCard. Spell rows out inline with QuickActionItem — point the hrefs at your own SvelteKit routes.

Installation

$pnpm dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/quick-actions.json

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

$yarn dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/quick-actions.json

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

Manifest:https://uipkge.dev/r/svelte/quick-actions.jsonInstalls to:src/lib/components/blocks/quick-actions/

Variants

Loading interactive previews…

npm dependencies

@lucide/svelte

Includes

section-card icon-box

Files installed (2)

src/lib/components/blocks/quick-actions/QuickActions.svelte0.5 kB

<script lang="ts">
  import type { Snippet } from 'svelte'
  import { SectionCard } from '$lib/components/ui/section-card'

  interface Props {
    title?: string
    description?: string
    class?: string
    children?: Snippet
  }

  let { title = 'Quick Actions', description, class: className, children }: Props = $props()
</script>

<SectionCard
  data-slot="quick-actions"
  {title}
  {description}
  contentClass="flex flex-col gap-2"
  class={className}
>
  {@render children?.()}
</SectionCard>

src/lib/components/blocks/quick-actions/QuickActionItem.svelte0.9 kB

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

Change language