Skip to content

Conversation

rasyidly
Copy link

@rasyidly rasyidly commented Oct 2, 2025

πŸ”— Linked issue

❓ Type of change

  • πŸ“– Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

This PR adds a dedicated links slot and props to UPageCard, enabling users to place interactive controls (e.g., buttons, menus) alongside the title/leading area without mixing them into the default slot. This solves the common struggle when the default slot contains complex content like UTable or UForm, ensuring a clean, predictable layout. The links slot or props is rendered within the card’s wrapper area so actions align naturally with the header/body composition across orientations and variants.

Here the example usage:

  • On default orientation (vertical)
<UPageCard title="Card Title" description="This is a description." icon="i-lucide-star" class="w-4xl">
  <template #links>
    <UButton label="Action 1" />
    <UButton label="Action 2" variant="soft" />
  </template>
  <Placeholder class="h-32" />
</UPageCard>
  • On horizontal orientation
<UPageCard title="Card Title" description="This is a description." icon="i-lucide-star" orientation="horizontal" class="w-full" :links="[
  { label: 'Action 1' },
  { label: 'Action 2', variant: 'soft' }
  ]">
    <Placeholder class="h-32" />
</UPageCard>

Output:

Screenshot 2025-09-27 at 23 05 58

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

Copy link

pkg-pr-new bot commented Oct 2, 2025

npm i https://pkg.pr.new/@nuxt/ui@5129

commit: 6807756

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
v4 #4488
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant