UIPackage
Vue React

List

React 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 Vue ->

Installation

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

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

Examples

Props

Name Type / Values Default Required
as 'ul' | 'ol' | 'div' — optional

Files (2)

  • components/ui/list/list.tsx 1.8 kB 
    import * as React from 'react'
import { cn } from '@/lib/utils'

export interface ListProps extends React.HTMLAttributes<HTMLElement> {
  as?: 'ul' | 'ol' | 'div'
}

const List = React.forwardRef<HTMLElement, ListProps>(
  ({ as: Comp = 'ul', className, children, ...props }, ref) => (
    <Comp
      ref={ref as never}
      className={cn('list-none space-y-1', className)}
      {...props}
    >
      {children}
    </Comp>
  ),
)
List.displayName = 'List'

export interface ListItemProps extends React.HTMLAttributes<HTMLElement> {
  as?: 'li' | 'div' | 'a'
  active?: boolean
  disabled?: boolean
}

const ListItem = React.forwardRef<HTMLElement, ListItemProps>(
  ({ as: Comp = 'li', active, disabled, className, children, ...props }, ref) => (
    <Comp
      ref={ref as never}
      aria-disabled={disabled}
      className={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',
        className,
      )}
      {...props}
    >
      {children}
    </Comp>
  ),
)
ListItem.displayName = 'ListItem'

export interface ListSubheaderProps extends React.LiHTMLAttributes<HTMLLIElement> {
  inset?: boolean
}

const ListSubheader = React.forwardRef<HTMLLIElement, ListSubheaderProps>(
  ({ inset, className, children, ...props }, ref) => (
    <li
      ref={ref}
      className={cn(
        'text-muted-foreground px-2 py-1.5 text-xs font-semibold tracking-wide uppercase',
        inset && 'pl-8',
        className,
      )}
      {...props}
    >
      {children}
    </li>
  ),
)
ListSubheader.displayName = 'ListSubheader'

export { List, ListItem, ListSubheader }
  • components/ui/list/index.ts 0.1 kB 
    export {
  List,
  ListItem,
  ListSubheader,
  type ListProps,
  type ListItemProps,
  type ListSubheaderProps,
} from './list'

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