AI List Generator.

A list turns records into a working queue — one row per order, message, or task, each carrying its own metadata and its own state. Describe what a row contains and what users do to it, and MeDo generates the feed, the selection model, drag reordering, and virtualization for ten thousand rows.

A List Is a Working Queue, Not a Pile of Cards

A list earns its place when the items are records under active triage — emails to file, orders to refund, applicants to advance — and the user's job is to move down the column deciding, one row at a time. Vertical scanning follows reading gravity, so a list packs far more usable information per pixel than a grid: a row carries a title, a secondary metadata line, a status badge, and an action menu in the space a thumbnail would spend on decoration. The state vocabulary is per-row, and that is the real product: read and unread, selected, done, failed, disabled — states a photo tile has no use for. Rows also scale honestly. Because they share one rhythm, a virtualized list renders ten thousand records as smoothly as ten. The boundaries matter just as much: when sequence itself is the message, the stream wants a timeline; when users compare the same fields across many records, it wants a table; the list owns the queue you work through.

4 Vorlagen

List-Vorlagen, die Sie generieren können

Jede Vorlage ist ein echter Prompt, kein Screenshot. Kopieren Sie ihn in einen KI-Editor oder führen Sie ihn in MeDo aus und erhalten Sie React- und Tailwind-Code zurück.

VirtualizedFeed

Newest-First Feed With Unread State

The stream at scale: windowed rendering for ten thousand records, day grouping, and a read model that survives a refresh.

Create a notification feed that renders the newest 50 of 10,000 records with windowing, so scrolling mounts only visible rows. Each row: unread dot, actor avatar, one-line event text with the actor and object in medium weight, and a relative timestamp on the right. New arrivals insert at the top with a subtle highlight flash rather than a violent shift. Group rows by day with a small sticky header per date. Mark-all-read lives in the list header; per-row read state toggles on click and persists. Keep DOM order equal to display order so screen readers traverse newest first.

In MeDo testen

DenseMetadata Rows

Two-Line Records for Back Offices

The workhorse: maximum records per screen for queues where deciding fast matters more than looking rich.

Create a dense records list for admin triage: 52px rows, each carrying a primary line in 14px medium that truncates, and a secondary line in 12px zinc-500 with up to three metadata fields joined by middle dots, plus one trailing badge and a kebab menu. Rows separated by 1px dividers, zebra striping off by default. Align the trailing badges across rows so that field scans vertically like a column. Add keyboard navigation where ArrowUp and ArrowDown move row focus and Enter opens the record.

In MeDo testen

Bulk actionsSelectable

Checkbox List With Bulk Bar

For queues where the user acts on many records at once — archive, assign, refund — with the selection contract fully wired.

Create a selectable task list where each row leads with a real checkbox paired with a label, so click and keyboard both work natively. Space on a focused row toggles it too, and Shift+click selects the range between the last selection and the current row. Selecting any row reveals a floating bulk bar above the list with a count and Archive and Delete actions; the header checkbox shows an indeterminate dash when the selection is partial. Selected rows keep their metadata readable — no color-only selection signal: pair the indigo tint with the checked box and aria-selected.

In MeDo testen

ReorderDraggable

Sortable List With Keyboard Parity

Reordering with the drag affordance done properly: pointer drag plus an explicit keyboard path and announcements.

Create a sortable list for reordering playlist tracks: each row carries a grip-dot drag handle on the left, reordering via pointer drag with a 4px gap opening under the dragged row and a tilted shadow. Keyboard parity is required, not optional: with focus on the handle, Ctrl+ArrowUp and Ctrl+ArrowDown move the row, and an aria-live region announces 'Moved to position 3 of 12'. Persist the new order by emitting the full id array on drop. While dragging, disable the list's hover states so rows do not flicker underneath.

In MeDo testen

So passen Sie Ihre List an

Budget the row anatomy before generating

Decide what one row may hold: a primary line, one secondary line, a trailing slot. Rows that grow past two lines stop being a list and start being stacked cards — and the scan rhythm that makes lists fast is gone. Name the fields in the prompt so the generator spends the space where your users decide.

Give selection a keyboard contract, not just checkboxes

Ask for Space to toggle the focused row, Shift+click to extend a range, and a header control with an indeterminate state. Color-only selection fails contrast checks and disappears for touch users; pair the tint with a checkbox or check icon and aria-selected on every row.

Virtualize past a real threshold, not by default

Under roughly a hundred rows, plain rendering is simpler and fully visible to screen readers. Past several hundred, ask for windowing with announced row counts so assistive technology still knows what the list contains. Say the expected record count in the prompt and let it drive the decision.

Every drag needs a non-drag path

Reordering by pointer only excludes keyboard and motor-impaired users. Require Move up and Move down actions in the row menu with live-region announcements — that is the difference between a demo and a feature, and it doubles as a recovery path when a drag lands wrong.

Wer die List-Komponente nutzt

Email and messaging inboxes

Newest-first rows with unread weight, sender, subject preview, and timestamp — the whole product is moving each row from unread to handled, one decision per line.

Admin queues and back offices

Refund requests or applications as two-line metadata rows with status badges and bulk actions, worked top to bottom in priority order with a stable bottom edge.

Activity and notification feeds

Day-grouped streams of events with unread dots, where newest-first ordering turns the list into a delta report since the last visit rather than an archive.

Search results pages

Ranked records with title, source, and snippet rows, where list density — not thumbnails — lets ten results answer a question before the first scroll.

List-Muster für verschiedene Websites

Dieselbe list-Komponente, abgestimmt auf die Art der Website, auf der sie läuft.

01 / 04

Inboxes and Chat Lists

The unread-to-handled pipeline: unread weight, sender, preview, timestamp. Keep read state persistent across reloads — a list that forgets what you handled loses its whole value.

List-Stile und -Varianten

Wählen Sie die Variante, die zum Rest der Seite passt, und generieren Sie sie.

01 / 04

Divided Rows

Hairline 1px dividers, flush full-width rows, no containers. The quietest and fastest-scanning option; the default for anything over a dozen rows.

List in React, Next.js, Vue und Svelte

React, Next.js, Vue 3, SvelteKit, Astro oder reines HTML — dieselbe list, sechs Wege zur Einbindung.

01 / 03

React List With Keyboard Selection

Selection lives in a Set so range-select and select-all reuse one source of truth, and Space is intercepted so toggling never scrolls the page.

src/components/RecordList.tsx

const [selected, setSelected] = useState<Set<string>>(new Set())

function toggle(id: string) {
  setSelected((prev) => {
    const next = new Set(prev)
    if (next.has(id)) next.delete(id)
    else next.add(id)
    return next
  })
}

<ul role="listbox" aria-multiselectable="true" aria-label="Orders"
    className="divide-y divide-zinc-200">
  {rows.map((row) => (
    <li key={row.id} role="option" aria-selected={selected.has(row.id)}
        tabIndex={0}
        onClick={() => toggle(row.id)}
        onKeyDown={(e) => {
          if (e.key === ' ') { e.preventDefault(); toggle(row.id) }
        }}
        className={selected.has(row.id) ? 'bg-indigo-50' : 'hover:bg-zinc-50'}>
      {row.title}
    </li>
  ))}
</ul>

So fügen Sie Ihre List einem Projekt hinzu

Vier Schritte, von der Auswahl einer list-Vorlage bis zum Einsatz in der Produktion.

01~1min

Name the Unit and Its Order

Decide what one record is and what order serves the task: newest first for streams, priority for queues, manual for curated sets. The order decides whether you need drag handles or just a sort.

02~1min

Budget the Row Anatomy

One primary line, one secondary line, one trailing slot. List the exact fields in the prompt — sender, status, timestamp — so the generated rows spend space where your users actually decide.

03~2min

Drive It by Keyboard

Generate, then put the mouse away: arrows through the rows, Space to toggle, Shift+click for a range, the header select-all including its indeterminate state. Anything the contract gets wrong goes back into the prompt as a described change rather than a handler patch.

04~2min

Scale and Edge Check

Load a realistic count — past several hundred rows, turn on virtualization and check the announced totals. Then force the empty state, the failure state, and the bulk bar with a partial selection.

Häufige Fragen zu List

How do I decide between a list and a table?

Ask what the user compares. A list presents records as records — one identity per row, metadata as context, actions per row. A data table aligns the same field across many records so values can be compared column-to-column. An inbox is a list: each row is one conversation with its own story. A pricing matrix is a table: the point is comparing plans field by field. When you catch yourself adding column headers to a list, you want a table; when a table's rows stop needing field alignment, you want a list.

When is my content a timeline instead of a list?

When the sequence itself carries the meaning. A timeline asserts causality and progression — an order-tracking view reassures because step three followed step two; a changelog proves momentum. A list's order is usually just a sort choice: newest-first is presentation, not history. If reversing the order would change what the content means, generate a timeline; if it would only feel different, a list is right. Most feeds fail the reversal test, which is why they are lists with dates, not timelines.

How do I make list selection keyboard-accessible?

Require three behaviors in the prompt: arrow keys move focus between rows with a roving tabindex so only one row sits in the tab order, Space toggles the focused row, and Shift+arrow or Shift+click extends a range. Every selected row carries aria-selected so state is announced, and selection is never color alone — pair the tint with a checkbox or check icon. MeDo generates this wiring from the prompt; retrofitting it by hand is where most lists quietly break.

Do virtualized lists break screen readers?

Windowing renders only visible rows, so a screen reader that asks for the whole list finds a few dozen. Mitigate rather than mourn: announce total counts such as '143 orders', keep semantic list roles on the rendered window, and offer a traversal alternative through search, filters, or export. Below a few hundred rows skip virtualization entirely — plain rendering is fully accessible and cheap. Virtualize when scale genuinely demands it, and say the row count in the prompt so the accessible scaffolding is generated with it.

How do I add drag-and-drop reordering that keyboard users can operate?

Pair every drag handle with explicit move commands — Ctrl+ArrowUp and Ctrl+ArrowDown on a focused handle are the common contract — and announce each move through a live region: 'Moved to position 3 of 12'. Commit by emitting the full id array so pointer and keyboard produce the same persistence. A draggable list without a keyboard path is not a less accessible feature; it is an unusable one for a meaningful share of users, and touch users benefit from the explicit handles too.

Should a long list use infinite scroll or pagination?

Infinite scroll suits browse streams — feeds, discovery, notifications — where there is no last record and position does not matter. Pagination or a Load more control suits work queues — inboxes, admin lists, search results — where users need a stable bottom edge, shareable positions, and a footer that does not run away. The failure mode to avoid is infinite scroll on a task list: the bulk-action bar and the 'you have reached the end' moment both need somewhere to live.

Erstelle deine list jetzt.

Probiere jeden Prompt – kostenlos, keine Anmeldung erforderlich.

Kostenlos mit dem Bauen beginnen Preise ansehen

Timeline

A timeline turns scattered events into a readable history: a changelog people actually scroll, shipment tracking that answers "where is my order", an activity feed for a project or account. Describe your entries and MeDo generates a vertical or horizontal timeline with connector lines, status badges, timestamps and grouping — React + Tailwind, no timeline library needed.

Verwandte Komponenten

Data Table

A data table is not a table with borders — it is an interactive grid that sorts on header click, filters as you type, keeps selected rows across page changes, and shows honest loading and empty states. Describe your columns and rows, and MeDo generates the React + Tailwind table your admin dashboard actually needs.

Verwandte Komponenten

Grid

A grid is the layout you choose when every item in a collection deserves the same footprint — product cards, post cards, photo tiles. Describe what you are displaying and MeDo generates equal-width tracks, responsive column counts, auto-fit behavior, and aspect-ratio-locked cells with loading and empty states built in.

Verwandte Komponenten

Pagination

Describe your list and MeDo generates numbered pagination with crawlable page URLs, a windowed range that stays readable at ten thousand items, and prev-next controls that never wrap — plus the load-more and cursor variants for the pages where you genuinely do not want page numbers.

Verwandte Komponenten