Kickresume UI

Command Palette

Search for a command to run...

List

Checked, pros, and cons lists with the canonical 20px markers and 8px icon-to-text gap.

Loading…
import { List, ListItem } from "@/components/ui/list"

export default function ListDemo() {
  return (
    <List className="max-w-md">
      <ListItem>40+ ATS-friendly resume templates</ListItem>
      <ListItem>AI writing help in every section</ListItem>
      <ListItem>Matching cover letters and websites</ListItem>
    </List>
  )
}

Installation

pnpm dlx shadcn@latest add @kickresume/list

Usage

import { List, ListItem } from "@/components/ui/list"

export function ListExample() {
  return (
    <List>
      <ListItem>40+ ATS-friendly resume templates</ListItem>
      <ListItem>AI writing help in every section</ListItem>
    </List>
  )
}

Examples

Pros & cons

Two List columns — variant="pros" with green markers, variant="cons" with coral — introduced by uppercase ListHeader labels.

Loading…
import { List, ListHeader, ListItem } from "@/components/ui/list"

export default function ListProsCons() {
  return (
    <div className="grid max-w-2xl gap-8 sm:grid-cols-2">
      <div>
        <ListHeader>Pros</ListHeader>
        <List variant="pros">
          <ListItem>Fast to fill in</ListItem>
          <ListItem>Reads well at a glance</ListItem>
          <ListItem>Works for most industries</ListItem>
        </List>
      </div>
      <div>
        <ListHeader>Cons</ListHeader>
        <List variant="cons">
          <ListItem>Less room for storytelling</ListItem>
          <ListItem>Not ideal for academia</ListItem>
        </List>
      </div>
    </div>
  )
}

API Reference

  • List renders a ul and accepts variant ("checked" — the default —, "pros", or "cons"), which picks the marker icon and color for every item. The variant is written to a data-variant attribute, and each item's marker is revealed purely via CSS, so the components stay server-renderable.
  • ListItem renders a li with the variant's marker; pass any inline content.
  • ListHeader renders the 14px uppercase column label used above pros/cons lists.

All three accept their native element props, including className.