diff --git a/docs/components/content/examples/ListExampleObjectButtons.vue b/docs/components/content/examples/ListExampleObjectButtons.vue
new file mode 100644
index 0000000000..d0b16dc558
--- /dev/null
+++ b/docs/components/content/examples/ListExampleObjectButtons.vue
@@ -0,0 +1,39 @@
+<template>
+  <UList :items="items" />
+</template>
+
+<script setup>
+const items = [
+  {
+    label: 'Store',
+    icon: 'i-heroicons-building-storefront',
+    color: 'blue',
+    variant: 'solid',
+    to: '#store'
+  },
+  {
+    label: 'Clients',
+    icon: 'i-heroicons-user-group',
+    color: 'cyan',
+    to: '#clients'
+  },
+  {
+    label: 'Products',
+    icon: 'i-heroicons-gift',
+    color: 'green',
+    to: '#products'
+  },
+  {
+    label: 'Warehouses',
+    icon: 'i-heroicons-home-modern',
+    color: 'lime',
+    to: '#warehouses'
+  },
+  {
+    label: 'Inventory',
+    icon: 'i-heroicons-gift-top',
+    color: 'yellow',
+    to: '#inventory'
+  },
+]
+</script>
diff --git a/docs/components/content/examples/ListExampleObjects.vue b/docs/components/content/examples/ListExampleObjects.vue
new file mode 100644
index 0000000000..3944ac0117
--- /dev/null
+++ b/docs/components/content/examples/ListExampleObjects.vue
@@ -0,0 +1,28 @@
+<template>
+  <UList :items="items" />
+</template>
+
+<script setup>
+const items = [
+  {
+    label: 'Store',
+    icon: 'i-heroicons-building-storefront'
+  },
+  {
+    label: 'Clients',
+    icon: 'i-heroicons-user-group'
+  },
+  {
+    label: 'Products',
+    icon: 'i-heroicons-gift'
+  },
+  {
+    label: 'Warehouses',
+    icon: 'i-heroicons-home-modern'
+  },
+  {
+    label: 'Inventory',
+    icon: 'i-heroicons-gift-top'
+  },
+]
+</script>
diff --git a/docs/components/content/examples/ListExampleSlotDefault.vue b/docs/components/content/examples/ListExampleSlotDefault.vue
new file mode 100644
index 0000000000..330da8a504
--- /dev/null
+++ b/docs/components/content/examples/ListExampleSlotDefault.vue
@@ -0,0 +1,38 @@
+<template>
+  <UList>
+    <div v-for="item in items" :key="item.label" class="flex flex-row gap-4 flex-nowrap items-center justify-between">
+      <div class="grow flex items-center gap-2">
+        <UIcon :name="item.icon" />
+        {{ item.label }}
+      </div>
+      <div class="font-mono text-gray-500">
+        {{ item.count.toLocaleString() }}
+      </div>
+    </div>
+  </UList>
+</template>
+
+<script setup>
+const items = [
+  {
+    label: 'Phones',
+    icon: 'i-heroicons-device-phone-mobile',
+    count: 17346
+  },
+  {
+    label: 'Tablets',
+    icon: 'i-heroicons-device-tablet',
+    count: 6349
+  },
+  {
+    label: 'Laptops & desktops',
+    icon: 'i-heroicons-computer-desktop',
+    count: 1647
+  },
+  {
+    label: 'Servers',
+    icon: 'i-heroicons-server-stack',
+    count: 574
+  },
+]
+</script>
diff --git a/docs/components/content/examples/ListExampleSlotSeparator.vue b/docs/components/content/examples/ListExampleSlotSeparator.vue
new file mode 100644
index 0000000000..33ff73b353
--- /dev/null
+++ b/docs/components/content/examples/ListExampleSlotSeparator.vue
@@ -0,0 +1,12 @@
+<template>
+  <UList :items="items" orientation="horizontal">
+    <template #separator="{ isLast }">
+      <UIcon v-if="isLast" name="i-heroicons-arrow-right-circle" class="mx-2 h-6 w-6 text-primary-500" />
+      <UIcon v-else name="i-heroicons-arrow-small-right" class="mx-2 text-gray-500"/>
+    </template>
+  </Ulist>
+</template>
+
+<script setup>
+const items = ['Home', 'Account', 'Security', 'Password Reset']
+</script>
diff --git a/docs/components/content/examples/ListExampleWrap.vue b/docs/components/content/examples/ListExampleWrap.vue
new file mode 100644
index 0000000000..f43feb6455
--- /dev/null
+++ b/docs/components/content/examples/ListExampleWrap.vue
@@ -0,0 +1,7 @@
+<template>
+  <UList :items="items" class="w-56" orientation="horizontal" :separator="false" :wrap="true"/>
+</template>
+
+<script setup>
+const items = ['Home', 'Account', 'Security', 'Password Reset']
+</script>
diff --git a/docs/content/4.data/2.list.md b/docs/content/4.data/2.list.md
new file mode 100644
index 0000000000..bdb551fede
--- /dev/null
+++ b/docs/content/4.data/2.list.md
@@ -0,0 +1,193 @@
+---
+description: Create horizontal o vertical lists with separators.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/layout/List.vue
+---
+
+## Usage
+
+The `UList` component is a simple but flexible component to list items. The most basic approach is to set a list of items as an array of strings.
+
+::component-card
+---
+componentClass: 'w-full lg:w-56'
+baseProps:
+  items:
+    - Store
+    - Clients
+    - Products
+    - Warehouses
+    - Inventory
+---
+::
+
+A more complex but flexible approach is to use a list of objects with the following properties:
+
+- `label` - The text to show for the item
+- `icon` - The icon to add before the item label
+- `trailing` - If the icon should be after the item label
+
+:component-example{component="list-example-objects" componentClass="w-full lg:w-56"}
+
+If you set the `to` or `click` properties of the item, it will be transformed into a [Button](/elements/button). All props of a button will be passed to the Button component. The `variant` of the Button is set to `link` unless set otherwise.
+
+:component-example{component="list-example-object-buttons" componentClass="w-full lg:w-56"}
+
+Additionally, you can have total control on each item by using the [component slots](#slots).
+
+::callout{icon="i-heroicons-light-bulb"}
+Lists are unordered by default, and are created using the `ul` tag. You can change the tag to `ol` for semantically ordered list by setting the `ordered` prop to `true`. This does not make any impact on the List style.
+::
+
+### Separator
+
+The visual separation of each item is done through the separator, which by default is a line done with a `div` element. It is  oriented depending on the list orientation.
+
+You can disable the separator using `separator` with the `false` value, which will bring each item together.
+
+::component-card
+---
+componentClass: 'w-full lg:w-56'
+baseProps:
+  items:
+    - Store
+    - Clients
+    - Products
+    - Warehouses
+    - Inventory
+props:
+  separator: false
+---
+::
+
+Alternatively, you may use a custom separator with the [`separator`](#separator-1) slot.
+
+### Separator Style
+
+The separator color can be changed using the `separatorColor`. 
+
+Besides all the colors from the `ui.colors` object, you can also use the `white`, `gray` and `black` colors with their pre-defined variants.
+
+::component-card
+---
+componentClass: 'w-full lg:w-56'
+baseProps:
+  items:
+    - Store
+    - Clients
+    - Products
+    - Warehouses
+    - Inventory
+props:
+  separatorColor: primary
+---
+::
+
+### Separator trailing
+
+The separator is created at the start of each item, from the second item in the list, which organically makes the separator absent when the list contains only one item. 
+
+By setting the `trailing` property to `true`, it makes the separator appear on all items except the last one. The list will still remove the separator if the list contains only one item.
+
+Most of the time you won't need to change where the separator is located, but the option is available if you plan to make deep visual changes.
+
+::component-card
+---
+componentClass: 'w-full lg:w-56'
+baseProps:
+  items:
+    - Store
+    - Clients
+    - Products
+    - Warehouses
+    - Inventory
+props:
+  separatorTrailing: true
+---
+::
+
+### Orientation
+
+By default, items are stacked vertically. To stack the list items horizontally, set the `orientation` prop to `horizontal`.
+
+::component-card
+---
+extraClass: "overflow-x-auto"
+baseProps:
+  items:
+    - Store
+    - Clients
+    - Products
+    - Warehouses
+    - Inventory
+props:
+  orientation: 'horizontal'
+options:
+  - name: orientation
+    restriction: only
+    values:
+      - 'horizontal'
+      - 'vertical'
+---
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+You can also change the default orientation for all list through the [global UI config](#/getting-started/theming#appconfigts).
+::
+
+### Wrapping
+
+When the items exceed the container height or width, these will not be wrapped into another line. To enable this behaviour, set the `wrap` prop.
+
+:component-example{component="list-example-wrap"}
+
+### Key
+
+Items are _keyed_ by their object. This may work for animation libraries or other utilities that rely on object comparison, but may come at some performance in some scenarios.
+
+You may set a property value as key name using the `by` prop. It accepts `dot.notation` to access to deep values. When the key it's not found, it uses the item's array position by default.  
+
+```vue
+<template>
+  <UList :items="items" key="label" />
+</template>
+
+<script setup>
+  const items = [
+    { label: 'Store', icon: 'i-heroicons-building-storefront' },
+    { label: 'Clients', icon: 'i-heroicons-user-group' },
+    { label: 'Products', icon: 'i-heroicons-gift' },
+    { label: 'Warehouses', icon: 'i-heroicons-home-modern' },
+    { label: 'Inventory', icon: 'i-heroicons-gift-top' },
+  ]
+</script>
+
+```
+
+## Slots
+
+### `default`
+
+You can use the default slot to add your own set of items. You can use plain HTML elements, components, or a loop of components. Each child will be moved wrapped into its respective `<li>` element.
+
+:component-example{component="list-example-slot-default"}
+
+### `separator`
+
+Use this slot to set a separator. It receives the current `index` of the item where is located, and both `isFirst` and `isLast` boolean if is the first or last item of the list, respectively.  
+
+:component-example{component="list-example-slot-separator" extraClass="overflow-x-auto"}
+
+::callout{icon="i-heroicons-exclamation-triangle"}
+Both `isFirst` and `isLast` booleans always returns `true` if there is only one item. 
+::
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset
diff --git a/playground/app.vue b/playground/app.vue
index 5c8f5a2b52..826941845e 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -1,19 +1,95 @@
 <template>
   <UContainer class="min-h-screen flex items-center">
-    <UCard class="flex-1" :ui="{ background: 'bg-gray-50 dark:bg-gray-800/50', ring: 'ring-1 ring-gray-300 dark:ring-gray-700', divide: 'divide-y divide-gray-300 dark:divide-gray-700', header: { base: 'font-bold' } }">
+    <UCard class="flex-1"
+           :ui="{ background: 'bg-gray-50 dark:bg-gray-800/50', ring: 'ring-1 ring-gray-300 dark:ring-gray-700', divide: 'divide-y divide-gray-300 dark:divide-gray-700', header: { base: 'font-bold' } }">
       <template #header>
         Welcome to the playground!
       </template>
 
       <p class="text-gray-500 dark:text-gray-400">
-        Try your components here!
+        <UList :columns="columns" :items="filteredRows" :sort="{ column: 'title' }" />
       </p>
     </UCard>
   </UContainer>
 </template>
 
 <script setup>
+const columns = [
+  {
+    key: 'id',
+    label: 'ID'
+  }, {
+    key: 'name',
+    label: 'Name',
+    sortable: true
+  }, {
+    key: 'title',
+    label: 'Title',
+    sortable: true
+  }, {
+    key: 'email',
+    label: 'Email',
+    sortable: true,
+    direction: 'desc'
+  }, {
+    key: 'role',
+    label: 'Role'
+  }
+]
 
+const people = [
+  {
+    id: 1,
+    name: 'Lindsay Walton',
+    title: 'Front-end Developer',
+    email: 'lindsay.walton@example.com',
+    role: 'Member'
+  }, {
+    id: 2,
+    name: 'Courtney Henry',
+    title: 'Designer',
+    email: 'courtney.henry@example.com',
+    role: 'Admin'
+  }, {
+    id: 3,
+    name: 'Tom Cook',
+    title: 'Director of Product',
+    email: 'tom.cook@example.com',
+    role: 'Member'
+  }, {
+    id: 4,
+    name: 'Whitney Francis',
+    title: 'Copywriter',
+    email: 'whitney.francis@example.com',
+    role: 'Admin'
+  }, {
+    id: 5,
+    name: 'Leonard Krasner',
+    title: 'Senior Designer',
+    email: 'leonard.krasner@example.com',
+    role: 'Owner'
+  }, {
+    id: 6,
+    name: 'Floyd Miles',
+    title: 'Principal Designer',
+    email: 'floyd.miles@example.com',
+    role: 'Member'
+  }
+]
+
+const q = ref('')
+
+const filteredRows = computed(() => {
+  if (!q.value) {
+    return people
+  }
+
+  return people.filter((person) => {
+    return Object.values(person).some((value) => {
+      return String(value).toLowerCase().includes(q.value.toLowerCase())
+    })
+  })
+})
 </script>
 
 <style>
diff --git a/src/colors.ts b/src/colors.ts
index b866d24ba8..e59988d7f6 100644
--- a/src/colors.ts
+++ b/src/colors.ts
@@ -204,7 +204,13 @@ const safelistByComponent = {
     variants: ['dark']
   }, {
     pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
-  }]
+  }],
+  table: (colorsAsRegex) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex})-200`),
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex})-800`),
+    variants: ['dark']
+  }],
 }
 
 const safelistComponentAliasesMap = {
diff --git a/src/runtime/components/data/List.ts b/src/runtime/components/data/List.ts
new file mode 100644
index 0000000000..ca86d2e8b0
--- /dev/null
+++ b/src/runtime/components/data/List.ts
@@ -0,0 +1,194 @@
+import { h, computed, toRef, defineComponent } from 'vue'
+import type { PropType, SlotsType, ComputedRef } from 'vue'
+import { twMerge, twJoin } from 'tailwind-merge'
+import { useUI } from '../../composables/useUI'
+import type { Strategy, ListOrientation, ListItem, ListSlots, ListSeparatorColor } from '../../types'
+// @ts-expect-error
+import appConfig from '#build/app.config'
+import { mergeConfig, getSlotsChildren, get } from '#ui/utils'
+import { list } from '#ui/ui.config'
+import UAvatar from '../elements/Avatar.vue'
+import UButton from '../elements/Button.vue'
+import UIcon from '../elements/Icon.vue'
+
+const config = mergeConfig<typeof list>(appConfig.ui.strategy, appConfig.ui.list, list)
+
+export default defineComponent({
+  components: {
+    UIcon,
+    UAvatar
+  },
+  inheritAttrs: false,
+  props: {
+    items: {
+      type: Array as PropType<Array<String> | Array<ListItem>>,
+      default: () => [],
+    },
+    by: {
+      type: String,
+      default: undefined
+    },
+    ordered: {
+      type: Boolean,
+      default: false
+    },
+    orientation: {
+      type: String as PropType<ListOrientation>,
+      default: () => config.default.orientation,
+      validator (value: string) {
+        return Object.keys(config.stacking.orientation).includes(value)
+      }
+    },
+    wrap: {
+      type: Boolean,
+      default: () => config.default.wrap
+    },
+    separator: {
+      type: Boolean,
+      default: true
+    },
+    separatorColor: {
+      type: String as PropType<ListSeparatorColor>,
+      default: () => config.default.separatorColor,
+      validator (value: string) {
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
+      }
+    },
+    separatorTrailing: {
+      type: Boolean,
+      default: false
+    },
+    class: {
+      type: [String, Object, Array] as PropType<any>,
+      default: undefined
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
+    }
+  },
+  slots: Object as SlotsType<ListSlots>,
+  setup (props, { slots }) {
+    const { ui, attrs } = useUI('list', toRef(props, 'ui'), config)
+
+    function objectToVNodes (item: ListItem) {
+      // If the item is a button, pass everything to the button
+      if ('to' in item || 'click' in item) {
+        return h(UButton, { variant: 'link', ...item })
+      }
+
+      const isLeading = (item.icon && item.leading) || (item.icon && !item.trailing) || item.leadingIcon
+      const isTrailing = (item.icon && item.trailing) || item.trailingIcon
+
+      const elements = []
+
+      if (isLeading) {
+        elements.push(h(UIcon, { name: item.leadingIcon || item.icon }))
+      }
+
+      elements.push(h('div', item.label))
+
+      if (isTrailing) {
+        elements.push(h(UIcon, { name: item.trailingIcon || item.icon }))
+      }
+
+      return h('div', { class: contentClass.value }, elements)
+    }
+
+    function addSeparator (array) {
+      return array.map((item, index) => {
+        const itemProps = {
+          class: itemClass.value,
+          key: props.by ? get(item, props.by, index) : item
+        }
+
+        const children = []
+
+        const isFirst = index === 0
+        const isLast = index === (array.length - 1)
+
+        if (hasSeparator.value && !isFirst && !separatorObject.value.trailing) {
+          children.push(separatorElement.value({ index, isFirst, isLast }))
+        }
+
+        children.push(item)
+
+        if (hasSeparator.value && !isLast && separatorObject.value.trailing) {
+          children.push(separatorElement.value({ index, isFirst, isLast }))
+        }
+
+        return h('li', itemProps, children)
+      })
+    }
+
+    const items = computed(() => {
+      const items = getSlotsChildren(slots)
+
+      if (items.length) {
+        return items
+      }
+
+      return props.items.map(item => {
+        const object = {
+          label: '',
+          icon: '',
+          leading: true,
+          trailing: false,
+        }
+
+        Object.assign(object, typeof item === 'object' ? item : { label: item })
+
+        return objectToVNodes(object)
+      })
+    })
+
+    const hasSeparator = computed(() => props.separator && items.value.length > 1)
+
+    const orderedElement = computed(() => props.ordered ? 'ol' : 'ul')
+
+    const separatorObject = computed(() => ({
+      color: props.separatorColor,
+      trailing: props.separatorTrailing
+    }))
+
+    const listClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.stacking.base,
+        ui.value.stacking.orientation[props.orientation],
+        props.wrap ? ui.value.stacking.wrap : ui.value.stacking.nowrap
+      ), props.class)
+    })
+
+    const itemClass = computed(() => {
+      return twJoin(
+        ui.value.item.base,
+        ui.value.stacking.base,
+        ui.value.stacking.orientation[props.orientation],
+        ui.value.stacking.nowrap
+      )
+    })
+
+    const contentClass = computed(() => {
+      return twJoin(
+        ui.value.item.contents,
+        ui.value.stacking.base,
+        ui.value.stacking.orientation['horizontal'],
+        ui.value.stacking.nowrap
+      )
+    })
+
+    const separatorClass = computed(() => {
+      return twJoin(
+        ui.value.separator.base,
+        ui.value.separator.color.replaceAll('{color}', props.separatorColor),
+        ui.value.separator.orientation[props.orientation]
+      )
+    })
+
+    const separatorElement: ComputedRef<Function> = computed(() => {
+      return slots.separator || (() => h('div', { class: separatorClass.value }))
+    })
+
+    return () => h(orderedElement.value, { ...attrs.value, class: listClass.value }, addSeparator(items.value))
+  }
+})
diff --git a/src/runtime/types/index.d.ts b/src/runtime/types/index.d.ts
index 519d296317..d3516a7381 100644
--- a/src/runtime/types/index.d.ts
+++ b/src/runtime/types/index.d.ts
@@ -13,6 +13,7 @@ export * from './form'
 export * from './input'
 export * from './kbd'
 export * from './link'
+export * from './list'
 export * from './meter'
 export * from './notification'
 export * from './popper'
diff --git a/src/runtime/types/list.d.ts b/src/runtime/types/list.d.ts
new file mode 100644
index 0000000000..11b4acb699
--- /dev/null
+++ b/src/runtime/types/list.d.ts
@@ -0,0 +1,24 @@
+import colors from '#ui-colors'
+import { list } from '../ui.config'
+
+export type ListSeparatorColor = keyof typeof list.color | typeof colors[number]
+
+export type ListOrientation = keyof typeof list.stacking.orientation
+
+export type ListItem = {
+  label: string,
+  icon?: string,
+  leading?: boolean,
+  trailing?: boolean,
+  leadingIcon?: string
+  trailingIcon?: string
+}
+
+export interface ListSlots {
+  default: undefined,
+  separator?: {
+    index: number,
+    isFirst: boolean,
+    isLast: boolean
+  },
+}
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index 3aadd3b6ae..f9b5ad75ae 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -69,6 +69,41 @@ export const table = {
   }
 }
 
+export const list = {
+  stacking: {
+    base: 'flex',
+    orientation: {
+      vertical: 'flex-col justify-center',
+      horizontal: 'flex-row items-center'
+    },
+    wrap: 'flex-wrap',
+    nowrap: 'flex-nowrap'
+  },
+  item: {
+    base: 'grow',
+    contents: 'grow gap-x-2'
+  },
+  separator: {
+    base: 'grow',
+    color: 'bg-{color}-200 dark:bg-{color}-800',
+    orientation: {
+      vertical: 'h-px w-auto my-2',
+      horizontal: 'h-auto w-px mx-2 self-stretch'
+    }
+  },
+  color: {
+    gray: 'bg-gray-200 dark:bg-gray-800',
+    black: 'bg-black dark:bg-white',
+    white: 'bg-white dark:bg-black'
+  },
+  default: {
+    orientation: 'vertical',
+    separatorColor: 'gray',
+    variant: 'link',
+    wrap: false
+  }
+}
+
 // Elements
 
 export const avatar = {