List
listuiList and Item row primitives with List, ListItem, ListItemMedia, ListItemContent, ListItemTitle, ListItemDescription, ListItemActions, and ListSubheader for structured rows, settings lists, and feeds.
Installation
$pnpm dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/list.json$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/list.json$yarn dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/list.json$bunx shadcn-svelte@latest add https://uipkge.dev/r/svelte/list.jsonManifest:
https://uipkge.dev/r/svelte/list.jsonInstalls to:src/lib/components/ui/list/Examples
Loading interactive previews…
Loading interactive previews…
Props
| Name | Type / Values | Default | Required |
|---|---|---|---|
as | 'ul' | 'ol' | 'div' | ul | optional |
children | Snippet | — | optional |
ref | HTMLElement | null | — | optional |
Files installed (9)
src/lib/components/ui/list/List.svelte0.9 kB
<script lang="ts" module> import type { Snippet } from 'svelte' import type { HTMLAttributes } from 'svelte/elements' export interface ListProps extends HTMLAttributes<HTMLElement> { as?: 'ul' | 'ol' | 'div' children?: Snippet ref?: HTMLElement | null } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, as = 'ul', children, ref = $bindable(null), ...restProps }: ListProps = $props() const listClass = $derived(cn('list-none space-y-1', className)) </script> {#if as === 'ol'} <ol bind:this={ref} data-uipkge="" data-slot="list" class={listClass} {...restProps}> {@render children?.()} </ol> {:else if as === 'div'} <div bind:this={ref} data-uipkge="" data-slot="list" class={listClass} {...restProps}> {@render children?.()} </div> {:else} <ul bind:this={ref} data-uipkge="" data-slot="list" class={listClass} {...restProps}> {@render children?.()} </ul> {/if}src/lib/components/ui/list/ListItem.svelte2.1 kB
<script lang="ts" module> import type { Snippet } from 'svelte' import type { HTMLAttributes } from 'svelte/elements' export interface ListItemProps extends HTMLAttributes<HTMLElement> { as?: 'li' | 'div' | 'a' active?: boolean disabled?: boolean /** Destination when `as="a"`. Also marks the item interactive, like an `onclick` handler. */ href?: string children?: Snippet ref?: HTMLElement | null } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, as = 'li', active = false, disabled = false, href, onclick, children, ref = $bindable(null), ...restProps }: ListItemProps = $props() // Only show pointer/hover affordances when the item is actually interactive. const isInteractive = $derived(!disabled && (as === 'a' || href != null || onclick != null)) const itemClass = $derived( cn( 'rounded-md px-2 py-1.5 text-sm transition-colors duration-200 select-none focus-visible:outline-none', 'has-[>[data-slot=list-item-content]]:flex has-[>[data-slot=list-item-content]]:items-center has-[>[data-slot=list-item-content]]:gap-3', !disabled && isInteractive && 'hover:bg-accent focus-visible:bg-accent cursor-pointer', active && 'bg-accent text-accent-foreground', disabled && 'pointer-events-none cursor-not-allowed opacity-50', className, ), ) const sharedAttrs = $derived({ 'data-uipkge': '', 'data-slot': 'list-item', 'data-active': active ? '' : undefined, 'data-disabled': disabled ? '' : undefined, 'aria-disabled': disabled ? ('true' as const) : undefined, 'aria-current': active ? ('true' as const) : undefined, tabindex: disabled ? -1 : undefined, class: itemClass, onclick, }) </script> {#if as === 'a'} <a bind:this={ref} href={disabled ? undefined : href} {...sharedAttrs} {...restProps}> {@render children?.()} </a> {:else if as === 'div'} <div bind:this={ref} {...sharedAttrs} {...restProps}> {@render children?.()} </div> {:else} <li bind:this={ref} {...sharedAttrs} {...restProps}> {@render children?.()} </li> {/if}src/lib/components/ui/list/ListItemMedia.svelte0.6 kB
<script lang="ts" module> import type { Snippet } from 'svelte' import type { HTMLAttributes } from 'svelte/elements' export interface ListItemMediaProps extends HTMLAttributes<HTMLDivElement> { children?: Snippet } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, children, ...restProps }: ListItemMediaProps = $props() </script> <div data-uipkge="" data-slot="list-item-media" class={cn('flex shrink-0 items-center justify-center self-center', className)} {...restProps} > {@render children?.()} </div>src/lib/components/ui/list/ListItemContent.svelte0.6 kB
<script lang="ts" module> import type { Snippet } from 'svelte' import type { HTMLAttributes } from 'svelte/elements' export interface ListItemContentProps extends HTMLAttributes<HTMLDivElement> { children?: Snippet } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, children, ...restProps }: ListItemContentProps = $props() </script> <div data-uipkge="" data-slot="list-item-content" class={cn('flex min-w-0 flex-1 flex-col gap-0.5 self-center', className)} {...restProps} > {@render children?.()} </div>src/lib/components/ui/list/ListItemTitle.svelte0.6 kB
<script lang="ts" module> import type { Snippet } from 'svelte' import type { HTMLAttributes } from 'svelte/elements' export interface ListItemTitleProps extends HTMLAttributes<HTMLDivElement> { children?: Snippet } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, children, ...restProps }: ListItemTitleProps = $props() </script> <div data-uipkge="" data-slot="list-item-title" class={cn('text-foreground truncate text-sm leading-none font-medium', className)} {...restProps} > {@render children?.()} </div>src/lib/components/ui/list/ListItemDescription.svelte0.6 kB
<script lang="ts" module> import type { Snippet } from 'svelte' import type { HTMLAttributes } from 'svelte/elements' export interface ListItemDescriptionProps extends HTMLAttributes<HTMLDivElement> { children?: Snippet } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, children, ...restProps }: ListItemDescriptionProps = $props() </script> <div data-uipkge="" data-slot="list-item-description" class={cn('text-muted-foreground line-clamp-1 text-xs', className)} {...restProps} > {@render children?.()} </div>src/lib/components/ui/list/ListItemActions.svelte0.6 kB
<script lang="ts" module> import type { Snippet } from 'svelte' import type { HTMLAttributes } from 'svelte/elements' export interface ListItemActionsProps extends HTMLAttributes<HTMLDivElement> { children?: Snippet } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, children, ...restProps }: ListItemActionsProps = $props() </script> <div data-uipkge="" data-slot="list-item-actions" class={cn('text-muted-foreground flex shrink-0 items-center gap-1.5 self-center', className)} {...restProps} > {@render children?.()} </div>src/lib/components/ui/list/ListSubheader.svelte0.6 kB
<script lang="ts" module> import type { Snippet } from 'svelte' import type { HTMLAttributes } from 'svelte/elements' export interface ListSubheaderProps extends HTMLAttributes<HTMLLIElement> { inset?: boolean children?: Snippet } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, inset = false, children, ...restProps }: ListSubheaderProps = $props() </script> <li data-uipkge="" data-slot="list-subheader" class={cn( 'text-muted-foreground px-2 py-1.5 text-xs font-semibold tracking-wide uppercase', inset && 'pl-8', className, )} {...restProps} > {@render children?.()} </li>src/lib/components/ui/list/index.ts0.7 kB
export { default as List, type ListProps } from './List.svelte' export { default as ListItem, type ListItemProps } from './ListItem.svelte' export { default as ListItemMedia, type ListItemMediaProps } from './ListItemMedia.svelte' export { default as ListItemContent, type ListItemContentProps } from './ListItemContent.svelte' export { default as ListItemTitle, type ListItemTitleProps } from './ListItemTitle.svelte' export { default as ListItemDescription, type ListItemDescriptionProps } from './ListItemDescription.svelte' export { default as ListItemActions, type ListItemActionsProps } from './ListItemActions.svelte' export { default as ListSubheader, type ListSubheaderProps } from './ListSubheader.svelte'
Raw manifest:https://uipkge.dev/r/svelte/list.json