AIcss
Components/Structured Outputs

List Output

A clean bulleted list for enumerated answers and steps.

Component byKevin@kvnkld

Preview

  • Set up the database schema and migrations
  • Wire authentication with magic links
  • Add Stripe checkout and webhooks
  • Ship the pricing page

Code

ListOutput.tsx
export function ListOutput({ items }: { items: string[] }) {
  return <ul className="bullets">{items.map((i) => <li key={i}>{i}</li>)}</ul>;
}

/* ListOutput.css */
.bullets { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.bullets li { position: relative; padding-left: 20px; }
.bullets li::before { content: ""; position: absolute; left: 4px; top: 6.5px; width: 6px; height: 6px; border-radius: 50%; background: #0b0d12; }
@media (prefers-color-scheme: dark) {
  .bullets { color: #f5f5f5; }
  .bullets li::before { background: #f5f5f5; }
}