Ideas backlog for Nuxt UI

[jxk-developer]

Package

v4.x

Description

First of all, thank you for building such an amazing library.

I've been using Nuxt UI in almost every project, and it's become one of my favorite UI libraries in the Vue/Nuxt ecosystem.

While working on different projects, I occasionally write down ideas for components and composables that could be useful in the future. Some of them may not fit the philosophy or scope of Nuxt UI—and that's completely fine. I simply wanted to share them in case they are useful as inspiration or for a future roadmap.

Think of this as a backlog of ideas rather than a feature request.

---

Components

UKanban

A Trello/Linear-style Kanban board for task management.

Example:

<UKanban
  v-model="columns"
  draggable
  :groups="groups"
/>

Possible features:

• Drag & drop cards

• Drag between columns

• Custom card slots

• Keyboard accessibility

• Touch support

• Optional virtualization for large boards

• Configurable drag handles

• Events such as:

  • card:move
  • column:move
  • card:add
  • card:remove

Useful for:

• Project management
• CRM pipelines
• Ticket systems
• Issue trackers

---

USplitter

Resizable panels similar to VS Code or IDE layouts.

Example:

<USplitter direction="horizontal">
  <div />
  <div />
</USplitter>

Possible API:

<USplitter
  direction="horizontal"
  :min="200"
  :max="600"
  collapsible
  persistent
/>

Useful for:

• Admin panels
• Editors
• Documentation
• Dashboards
• File explorers

---

UJsonEditor

A JSON editor with built-in validation.

Example:

<UJsonEditor
  v-model="schema"
/>

Possible features:

• Syntax highlighting
• JSON validation
• Folding/collapsing
• Formatting
• Read-only mode
• Line numbers
• Error highlighting
• Copy / paste
• Search

Useful for:

• API clients
• Settings pages
• Config editors
• Developer tools

---

UQrCode

Generate QR codes directly from Vue.

Example:

<UQrCode
  value="https://nuxt.com"
  center="logo"
/>

Possible props:

• size
• foreground color
• background color
• error correction level
• center image
• center text

Useful for:

• Authentication
• Sharing links
• Wi-Fi credentials
• Payments

---

USignaturePad

Canvas-based signature component.

<USignaturePad
  v-model="signature"
/>

Possible API:

<USignaturePad
  pen-color="black"
  background="white"
  clearable
/>

Methods:

clear()

undo()

redo()

export()

import()

Useful for:

• Document signing
• Delivery confirmation
• Contracts
• Forms

---

UFab

Floating Action Button inspired by Material Design.

<UFab
  icon="i-lucide-plus"
/>

Possible features:

• Expand into multiple actions (Speed Dial)
• Position presets
• Custom animations
• Badge support

Useful for:

• Mobile apps
• Dashboards
• Quick actions

---

Composables

useDialog()

Programmatic dialogs.

I know this can already be implemented using existing components, but having an official composable would provide a consistent developer experience while still allowing the dialog appearance to be customized via app.config.ts.

Example:

const dialog = useDialog()

const confirmed = await dialog.confirm({
  title: 'Delete project?',
  description: 'This action cannot be undone.'
})

if (confirmed) {
  // ...
}

Possible methods:

dialog.confirm()

dialog.alert()

dialog.info()

dialog.error()

dialog.success()

dialog.custom()

---

usePrompt()

Programmatic input dialogs.

Example:

const prompt = usePrompt()

const name = await prompt.text({
  title: 'Project name'
})

Possible methods:

prompt.text()

prompt.number()

prompt.password()

prompt.select()

prompt.custom()

Useful for:

• Rename dialogs
• Quick forms
• Small input flows

---

useNotification()

A unified API on top of Toast.

Example:

const notify = useNotification()

notify.success('Saved')

notify.error('Something went wrong')

Possible API:

notify.info()

notify.warning()

notify.loading()

---

useLoading()

Global loading overlay.

Example:

const loading = useLoading()

loading.start()

await save()

loading.stop()

Possible state:

loading.active

Useful for:

• Navigation
• Large requests
• Global async operations

---

Improvements to defineShortcuts()

Shortcut scopes

Currently all shortcuts are effectively global.

Example:

defineShortcuts({
  '/': openSearch,
  'meta+k': openCommandPalette,
  'ctrl+b': toggleSidebar
})

Imagine the page also contains a rich text editor.

Inside the editor we want:

defineShortcuts({
  scope: 'editor',

  'ctrl+b': toggleBold,
  'ctrl+i': toggleItalic
})

Now Ctrl+B only toggles bold while the editor is focused instead of triggering the global shortcut.

Possible scopes:

• global (default)
• editor
• table
• dialog
• Custom scopes

---

Shortcut groups

Groups make it easy to enable or disable an entire set of shortcuts.

Example:

const cats = createShortcutGroup()

const dogs = createShortcutGroup()

cats.register({
  arrowleft: catsSlider.prev,
  arrowright: catsSlider.next
})

dogs.register({
  arrowleft: dogsSlider.prev,
  arrowright: dogsSlider.next
})

cats.enable()

When switching tabs:

cats.disable()

dogs.enable()

No need to unregister every shortcut individually.

Useful for:

• Tabs
• Presentation mode
• Editors
• Games
• Interactive tools

---

UShortcutRecorder

A component that records keyboard shortcuts.

Example:

<UShortcutRecorder
  v-model="shortcut"
/>

User presses:

Ctrl + Shift + P

Result:

shortcut === 'ctrl+shift+p'

No parsing required.

Possible features:

• Conflict detection
• Reserved shortcut warnings
• macOS / Windows key normalization
• Visual key display while recording

Useful for:

• User preferences
• IDEs
• Editors
• Games

---

Shortcut Cheat Sheet

Automatically generate a list of shortcuts registered on the current page.

Example:

defineShortcuts({
  'meta+k': {
    description: 'Open command palette',
    handler: openPalette
  }
})

Then:

<UShortcutHelp />

could display something similar to GitHub, VS Code, or Notion, making keyboard shortcuts easier to discover.

---

useTimer()

A generic timer composable.

Example:

const timer = useTimer({
  duration: 60_000,
  autoStart: true,

  onFinish() {
    toast.add({
      title: 'Done'
    })
  }
})

Methods:

timer.start()

timer.pause()

timer.resume()

timer.stop()

timer.reset()

Reactive state:

timer.running

timer.finished

timer.elapsed

timer.remaining

timer.progress

timer.hours

timer.minutes

timer.seconds

timer.formatted

Possible modes:

useTimer({
  mode: 'countdown',
  duration: 30_000
})

or

useTimer({
  mode: 'stopwatch'
})

Useful for:

• OTP countdowns
• Session expiration
• Quiz timers
• Stopwatch
• Progress indicators

---

useInterval() and useTimeout()

Simple wrappers with reactive controls.

const interval = useInterval(1000, () => {})

Methods:

interval.pause()

interval.resume()

interval.clear()

Timeout:

const timeout = useTimeout(5000, () => {})

Methods:

timeout.restart()

timeout.cancel()

timeout.clear()

---

useRateLimiter()

A unified abstraction over debounce and throttle.

Example:

const limiter = useRateLimiter({
  strategy: 'debounce',
  delay: 300
})

const search = limiter.wrap(async query => {})

Or:

const { run } = useRateLimiter({
  strategy: 'throttle',
  interval: 1000
})

run(() => {})

Possible features:

• debounce
• throttle
• leading/trailing
• cancel()
• flush()
• pending state

---

useBreakpoint()

A composable that uses Nuxt UI's configured breakpoints instead of manually writing media queries.

const breakpoint = useBreakpoint()

Reactive state:

breakpoint.current

breakpoint.sm

breakpoint.md

breakpoint.lg

breakpoint.xl

Instead of:

const lg = useMediaQuery('(min-width: 1024px)')

This would ensure that if breakpoints are customized in Nuxt UI, the composable automatically stays in sync.

---

useSticky()

Make any element sticky while exposing reactive state.

const sticky = useSticky(el)

Possible API:

sticky.enable()

sticky.disable()

Reactive state:

sticky.active

sticky.top

sticky.offset

Useful for:

• Sticky headers
• Documentation navigation
• Sidebars
• Floating toolbars

---

Again, these are simply ideas collected while using Nuxt UI across different projects. Some may overlap with existing libraries or fall outside the intended scope of Nuxt UI, and that's perfectly understandable. I hope at least a few of them can serve as inspiration for future discussions or roadmap planning.

Finally, thank you again for all the work you've put into Nuxt UI. It's an excellent library and a pleasure to use.

Additional context

No response

[coderabbitai[bot]]

🔗 Related PRs

#5757 - feat(InputRating): new component [merged]
#6576 - feat(theme): uniformize focus styles across components [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[benjamincanac]

Thanks for the thoughtful list! Most of these already exist:

• UJsonEditor → UEditor with content-type="json"
• UQrCode → community module at https://qrcode.s94.dev/
• useDialog() / usePrompt() → useOverlay (open + await a modal/slideover)
• useNotification() → useToast
• useLoading() → build on useOverlay or shared state
• useInterval / useTimeout / useTimer / useRateLimiter / useBreakpoint → VueUse (useIntervalFn, useTimeoutFn, useDebounceFn, useThrottleFn, useBreakpoints)
• useSticky() → mostly position: sticky

Worth exploring: USplitter (Reka UI has one, and we already use useResizable internally, so exposing it is on my radar) and the defineShortcuts ideas (scopes, groups, recorder, cheat sheet) which don't exist yet.

UKanban, USignaturePad and UFab are probably out of scope for now, community libs cover those well.