ItemList

Basic usage

Basic usage — see the example below.

Item 1
Item 2
Item 3

tsx

import { ItemList } from "~/components/ui/base/item-list";

<ItemList>
  <li class="px-2 py-1.5 text-callout text-label">Item 1</li>
  <li class="px-2 py-1.5 text-callout text-label">Item 2</li>
  <li class="px-2 py-1.5 text-callout text-label">Item 3</li>
</ItemList>

With icons

With icons — see the example below.

Documents
File.pdf
Photo.png

tsx

import { ItemList } from "~/components/ui/base/item-list";
import { LuFileText, LuFolder, LuImage } from "@qwikest/icons/lucide";

<ItemList class="rounded-lg border border-separator-opaque bg-surface-raised">
  {[
    { icon: <LuFolder />, label: "Documents" },
    { icon: <LuFileText />, label: "File.pdf" },
    { icon: <LuImage />, label: "Photo.png" },
  ].map((item) => (
    <li class="flex items-center gap-2 px-3 py-2 text-callout text-label hover:bg-surface-overlay">
      <span class="text-secondary-label">{item.icon}</span>
      {item.label}
    </li>
  ))}
</ItemList>

Metadata

Source: meta.generated.json (see npm run generate)

File base/item-list/meta.generated.json not found or path not allowed.