Showcase

A complete demonstration of all UI features.

Typography

This section demonstrates basic typography. Here's a paragraph with bold text, and here's some text with a styled link that opens in a new tab.

You can also use inline code within paragraphs. This is useful for referencing code like useState or file paths like src/app/page.tsx.

Subheading (h3)

Subheadings use a slightly smaller font weight and are useful for breaking up content within a section.

This is a blockquote. It's useful for highlighting important information or quoting external sources. The left border and italic styling help it stand out from regular paragraphs.

Lists

Unordered list with bold labels

First item — Description of the first item goes here
Second item — Another item with helpful context
Third item — Lists support multiple items with consistent spacing

Ordered list

First step in a process
Second step with more details
Third step to complete the task

Nested lists

Parent item one
- Nested child item
- Another nested item
Parent item two
- More nested content here

Code Blocks

Here's a syntax-highlighted code block:

import { useState } from "react";

function Counter() {
const [count, setCount] = useState(0);

return (
  <button onClick={() => setCount(c => c + 1)}>
    Count: {count}
  </button>
);
}

Copyable code block

This version includes a copy button:

npm install agentation

Markdown code block

## Page Feedback: /dashboard
**Viewport:** 1512x738

## 1. button.submit-btn
**Location:** `.form-container > .actions > button.submit-btn`
**Feedback:** Button text should say "Save" not "Submit"

FAQ Accordion

Click to expand each question:

This is an FAQ accordion component. It uses CSS grid for smooth height animations and supports HTML content in answers.

The accordion uses grid-template-rows to animate between 0fr and 1fr, creating a smooth expand/collapse effect without JavaScript height calculations.

The current implementation only allows one item open at a time. Clicking a new item closes the previous one.

Keyboard Shortcuts Table

`Cmd+Shift+A`	Toggle feedback mode
`Esc`	Close or cancel
`P`	Pause/resume animations
`C`	Copy to clipboard

Shortcuts are disabled when typing in an input field.

Props List (API style)

onSubmit(data: FormData) => void

Callback function called when the form is submitted

disabledbooleandefault: false

Whether the component is disabled

variant'primary' | 'secondary'default: 'primary'

Visual style variant of the component

Demo Elements

Interactive demo components:

Example Card

This is a demo card component. It can contain any content and uses the standard card styling from the design system.