UIPackage
Vue React

List

Vue data-display
Edit on GitHub

Plain content list with `<ul>` / `<li>` semantics and a few preset gap and divider modes. Use for menu items, navigation lists, or any vertical sequence of small rows.

Also available for React ->

Installation

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

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

Examples

Props

Name Type / Values Default Required
class HTMLAttributes['class'] — optional
as
'ul''ol''div'
— optional

Files (4)

  • app/components/ui/list/List.vue 0.3 kB 
    <script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
  as?: 'ul' | 'ol' | 'div'
}>()
</script>

<template>
  <component :is="props.as ?? 'ul'" :class="cn('list-none space-y-1', props.class)" v-bind="$attrs">
    <slot />
  </component>
</template>
  • app/components/ui/list/ListItem.vue 0.7 kB 
    <script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
  as?: 'li' | 'div' | 'a'
  active?: boolean
  disabled?: boolean
}>()
</script>

<template>
  <component
    :is="props.as ?? 'li'"
    :aria-disabled="disabled"
    :class="
      cn(
        'hover:bg-accent focus-visible:bg-accent cursor-pointer rounded-md px-2 py-1.5 text-sm transition-colors duration-200 select-none focus-visible:outline-none',
        active && 'bg-accent text-accent-foreground',
        disabled && 'pointer-events-none opacity-50',
        props.class,
      )
    "
    v-bind="$attrs"
  >
    <slot />
  </component>
</template>
  • app/components/ui/list/ListSubheader.vue 0.4 kB 
    <script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
  inset?: boolean
}>()
</script>

<template>
  <li
    :class="
      cn(
        'text-muted-foreground px-2 py-1.5 text-xs font-semibold tracking-wide uppercase',
        inset && 'pl-8',
        props.class,
      )
    "
    v-bind="$attrs"
  >
    <slot />
  </li>
</template>
  • app/components/ui/list/index.ts 0.2 kB 
    export { default as List } from './List.vue'
export { default as ListItem } from './ListItem.vue'
export { default as ListSubheader } from './ListSubheader.vue'

Raw manifest: https://uipkge.dev/r/vue/list.json