feat(Feed): new component

docs/components/content/examples/FeedExampleObjects.vue

@@ -0,0 +1,36 @@
+<template>
+  <UFeed :feed="feed" />
+</template>
+
+<script setup>
+const feed = [
+  {
+    title: 'Cloned',
+    description: 'Repository retrieved from GitHub',
+    icon: 'i-heroicons-cloud-arrow-down',
+    trailing: 'Oct 8 09:35:05',
+    color: 'amber'
+  },
+  {
+    title: 'Installed',
+    description: 'Dependencies installed',
+    icon: 'i-heroicons-clipboard-document-check',
+    trailing: 'Oct 8 09:36:21',
+    color: 'yellow'
+  },
+  {
+    title: 'Configured',
+    description: 'App configuration applied',
+    icon: 'i-heroicons-wrench',
+    trailing: 'Oct 8 09:36:32',
+    color: 'lime'
+  },
+  {
+    title: 'Deployed',
+    description: 'App running',
+    icon: 'i-heroicons-paper-airplane',
+    trailing: 'Oct 8 09:36:38',
+    color: 'green'
+  }
+]
+</script>

docs/components/content/examples/FeedExampleSlotBody.vue

@@ -0,0 +1,21 @@
+<template>
+  <UFeed :feed="feed" :indicators="false">
+    <template #body="{ item }">
+      <div class="space-y-2">
+        <div class="text-xl">
+          {{ item.title }}
+        </div>
+        <div class="px-3 py-2 text-gray-100 text-sm font-mono ring-1 ring-gray-800 rounded bg-gray-950 shadow">
+          &gt; {{ item.description }}
+        </div>
+      </div>
+    </template>
+  </UFeed>
+</template>
+
+<script setup>
+const feed = [
+  { title: 'Process started', description: 'transcode --file=/storage/cf423da1.mp4' },
+  { title: 'Process finished', description: 'cf423da1.mp4 transcode successful' }
+]
+</script>

docs/components/content/examples/FeedExampleSlotIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <UFeed :feed="feed">
+    <template #icon="{ item }">
+      <div class="px-2 py-0.5 font-sm font-mono rounded-full bg-gray-200 dark:bg-gray-700 flex items-center gap-2">
+        <UIcon name="i-heroicons-clock" />
+        {{ item.time }}
+      </div>
+    </template>
+  </UFeed>
+</template>
+
+<script setup>
+const feed = [
+  { title: 'Task started', time: '20:30' },
+  { title: 'Task finished', time: '20:34' }
+]
+</script>

docs/components/content/examples/FeedExampleSlotTrailing.vue

@@ -0,0 +1,19 @@
+<template>
+  <UFeed :feed="feed">
+    <template #trailing="{ item }">
+      <div v-if="item.trailing" class="mt-1.5 font-mono text-xs text-gray-500 flex items-center gap-2">
+        {{ item.trailing }} <UIcon name="i-heroicons-clock" />
+      </div>
+    </template>
+  </UFeed>
+</template>
+
+<script setup>
+const feed = [
+  { title: 'Device turned on' },
+  { title: 'OS boot', trailing: '3s' },
+  { title: 'OS drivers load', trailing: '12s' },
+  { title: 'OS ready', trailing: '13s' },
+  { title: 'User profile loaded', trailing: '5s' }
+]
+</script>

docs/content/2.elements/12.feed.md

@@ -0,0 +1,139 @@
+---
+title: 'Feed'
+description: Show an ordered list of events vertically
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Feed.vue
+---
+
+## Usage
+
+Add an array of events in the `feed` prop.
+
+::component-card
+---
+baseProps:
+  feed:
+    - Cloned
+    - Installed
+    - Configured
+    - Deployed
+---
+::
+
+You may also use an array of objects as a feed, with the following properties:
+
+- `title` - The item title text
+- `description` - The secondary line of text below the title
+- `trailing` - The third line of text at the end of the item
+- `color` - The color of the indicator
+- `icon` - The icon to add as an indicator
+
+:component-example{component="feed-example-objects"}
+
+### Indicators
+
+You can transform the indicators to a small dot for all the events by setting the `indicators` prop to `false`.
+
+::component-card
+---
+baseProps:
+  feed:
+    - title: Cloned
+      description: Repository retrieved from GitHub
+      icon: i-heroicons-cloud-arrow-down
+      trailing: Oct 8 09:35:05
+    - title: Installed
+      description: Dependencies installed
+      icon: i-heroicons-clipboard-document-check
+      trailing: Oct 8 09:36:21
+    - title: Configured
+      description: App configuration applied
+      icon: i-heroicons-wrench
+      trailing: Oct 8 09:36:32
+    - title: Deployed
+      description: App running
+      icon: i-heroicons-paper-airplane
+      trailing: Oct 8 09:36:38
+props:
+  indicators: false
+---
+::
+
+### Separators
+
+You may disable the separators by setting `separators` to `false` 
+
+::component-card
+---
+baseProps:
+  feed:
+    - Cloned
+    - Installed
+    - Configured
+    - Deployed
+props:
+  separators: false
+  indicators: false
+---
+::
+
+### Style
+
+Use the `color` prop to change the visual style of the indicators. If an event contains the `color` property, it will take precedence over the element prop.
+
+::component-card
+---
+baseProps:
+  feed:
+    - title: Cloned
+      description: Repository retrieved from GitHub
+      icon: i-heroicons-cloud-arrow-down
+      trailing: Oct 8 09:35:05
+    - title: Installed
+      description: Dependencies installed
+      icon: i-heroicons-clipboard-document-check
+      trailing: Oct 8 09:36:21
+    - title: Configured
+      description: App configuration applied
+      icon: i-heroicons-wrench
+      trailing: Oct 8 09:36:32
+    - title: Deployed
+      description: App running
+      icon: i-heroicons-paper-airplane
+      trailing: Oct 8 09:36:38
+      color: 'gray'
+props:
+  indicators: true
+  color: 'primary'
+---
+::
+
+## Slots
+
+### `icon`
+
+You have access to the item indicator through the `icon` prop, that receives the item and its index on the feed. You can use this to change how the indicator is shown on the feed for each item.
+
+:component-example{component="feed-example-slot-icon"}
+
+### `body`
+
+You can change how the feed item contents is presented using the `body` prop. It receives the item and the index position.
+
+:component-example{component="feed-example-slot-body"}
+
+### `trailing`
+
+You can change how the trailing text is presented using the `trailing` prop. It receives the item and the index position.
+
+:component-example{component="feed-example-slot-trailing"}
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

src/colors.ts

@@ -188,6 +188,12 @@ const safelistByComponent = {
   }, {
     pattern: new RegExp(`text-(${colorsAsRegex})-500`)
   }],
+  feed: (colorsAsRegex) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex})-200`)
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex})-700`),
+    variants: ['dark']
+  }],
   notification: (colorsAsRegex) => [{
     pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
     variants: ['dark']