# Caseroom

> Black-and-white UI components and page sections for React, Astro and plain HTML, by themes.dev. shadcn/ui token names, light and dark, WCAG 2.2 AA, every state on every item, an optional Ink accent.

Rules for agents: https://www.themes.dev/caseroom/AGENT.md. Theme: https://www.themes.dev/caseroom/r/theme.json (black and white) or https://www.themes.dev/caseroom/r/theme-ink.json (one accent). Registry index: https://www.themes.dev/caseroom/r/registry.json.

## Components

- [Button](https://www.themes.dev/caseroom/components/button/): An action, or a link that looks like one. Six variants, four sizes. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/button.json` · Astro: `https://www.themes.dev/caseroom/r/astro/button.json` · HTML: https://www.themes.dev/caseroom/r/html/button.html · Markdown: https://www.themes.dev/caseroom/components/button.md
- [Badge](https://www.themes.dev/caseroom/components/badge/): A short status or count next to text. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/badge.json` · Astro: `https://www.themes.dev/caseroom/r/astro/badge.json` · HTML: https://www.themes.dev/caseroom/r/html/badge.html · Markdown: https://www.themes.dev/caseroom/components/badge.md
- [Input](https://www.themes.dev/caseroom/components/input/): A text field with a 3:1 border and an invalid state. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/input.json` · Astro: `https://www.themes.dev/caseroom/r/astro/input.json` · HTML: https://www.themes.dev/caseroom/r/html/input.html · Markdown: https://www.themes.dev/caseroom/components/input.md
- [Textarea](https://www.themes.dev/caseroom/components/textarea/): A multi-line field that grows with its content. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/textarea.json` · Astro: `https://www.themes.dev/caseroom/r/astro/textarea.json` · HTML: https://www.themes.dev/caseroom/r/html/textarea.html · Markdown: https://www.themes.dev/caseroom/components/textarea.md
- [Label](https://www.themes.dev/caseroom/components/label/): The visible name of a field. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/label.json` · Astro: `https://www.themes.dev/caseroom/r/astro/label.json` · HTML: https://www.themes.dev/caseroom/r/html/label.html · Markdown: https://www.themes.dev/caseroom/components/label.md
- [Checkbox](https://www.themes.dev/caseroom/components/checkbox/): A native checkbox in the Caseroom style. No JavaScript. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/checkbox.json` · Astro: `https://www.themes.dev/caseroom/r/astro/checkbox.json` · HTML: https://www.themes.dev/caseroom/r/html/checkbox.html · Markdown: https://www.themes.dev/caseroom/components/checkbox.md
- [Switch](https://www.themes.dev/caseroom/components/switch/): An on/off setting: a native checkbox with role=switch. No JavaScript. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/switch.json` · Astro: `https://www.themes.dev/caseroom/r/astro/switch.json` · HTML: https://www.themes.dev/caseroom/r/html/switch.html · Markdown: https://www.themes.dev/caseroom/components/switch.md
- [Card](https://www.themes.dev/caseroom/components/card/): A bordered panel with a title, description and footer. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/card.json` · Astro: `https://www.themes.dev/caseroom/r/astro/card.json` · HTML: https://www.themes.dev/caseroom/r/html/card.html · Markdown: https://www.themes.dev/caseroom/components/card.md
- [Separator](https://www.themes.dev/caseroom/components/separator/): A hairline between groups, horizontal or vertical. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/separator.json` · Astro: `https://www.themes.dev/caseroom/r/astro/separator.json` · HTML: https://www.themes.dev/caseroom/r/html/separator.html · Markdown: https://www.themes.dev/caseroom/components/separator.md
- [Alert](https://www.themes.dev/caseroom/components/alert/): A message on the page, neutral or destructive. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/alert.json` · Astro: `https://www.themes.dev/caseroom/r/astro/alert.json` · HTML: https://www.themes.dev/caseroom/r/html/alert.html · Markdown: https://www.themes.dev/caseroom/components/alert.md
- [Kbd](https://www.themes.dev/caseroom/components/kbd/): A keyboard key or shortcut. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/kbd.json` · Astro: `https://www.themes.dev/caseroom/r/astro/kbd.json` · HTML: https://www.themes.dev/caseroom/r/html/kbd.html · Markdown: https://www.themes.dev/caseroom/components/kbd.md
- [Avatar](https://www.themes.dev/caseroom/components/avatar/): A photo, or initials when there is none. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/avatar.json` · Astro: `https://www.themes.dev/caseroom/r/astro/avatar.json` · HTML: https://www.themes.dev/caseroom/r/html/avatar.html · Markdown: https://www.themes.dev/caseroom/components/avatar.md
- [Tabs](https://www.themes.dev/caseroom/components/tabs/): Panels behind a row of tabs, or page links that look like tabs. Arrow keys, Home and End. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/tabs.json` · Astro: `https://www.themes.dev/caseroom/r/astro/tabs.json` · HTML: https://www.themes.dev/caseroom/r/html/tabs.html · Markdown: https://www.themes.dev/caseroom/components/tabs.md
- [Dialog](https://www.themes.dev/caseroom/components/dialog/): A modal on the native dialog element: focus stays inside, Escape and the backdrop close it, focus returns to the trigger. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/dialog.json` · Astro: `https://www.themes.dev/caseroom/r/astro/dialog.json` · HTML: https://www.themes.dev/caseroom/r/html/dialog.html · Markdown: https://www.themes.dev/caseroom/components/dialog.md
- [Dropdown menu](https://www.themes.dev/caseroom/components/dropdown-menu/): A menu button on the native popover: arrow keys, Home, End and type-ahead, checkbox items, Escape returns focus. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/dropdown-menu.json` · Astro: `https://www.themes.dev/caseroom/r/astro/dropdown-menu.json` · HTML: https://www.themes.dev/caseroom/r/html/dropdown-menu.html · Markdown: https://www.themes.dev/caseroom/components/dropdown-menu.md
- [Select](https://www.themes.dev/caseroom/components/select/): A native select in the field style, with groups, a placeholder and disabled options. No JavaScript. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/select.json` · Astro: `https://www.themes.dev/caseroom/r/astro/select.json` · HTML: https://www.themes.dev/caseroom/r/html/select.html · Markdown: https://www.themes.dev/caseroom/components/select.md
- [Tooltip](https://www.themes.dev/caseroom/components/tooltip/): A short label on hover and keyboard focus. Stays while hovered, Escape hides it (WCAG 1.4.13). React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/tooltip.json` · Astro: `https://www.themes.dev/caseroom/r/astro/tooltip.json` · HTML: https://www.themes.dev/caseroom/r/html/tooltip.html · Markdown: https://www.themes.dev/caseroom/components/tooltip.md
- [Toast](https://www.themes.dev/caseroom/components/toast/): Short confirmations that announce themselves, pause while hovered and close on their own. Above open dialogs. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/toast.json` · Astro: `https://www.themes.dev/caseroom/r/astro/toast.json` · HTML: https://www.themes.dev/caseroom/r/html/toast.html · Markdown: https://www.themes.dev/caseroom/components/toast.md
- [Radio group](https://www.themes.dev/caseroom/components/radio-group/): Native radios in a fieldset, with hints: one Tab stop, arrow keys choose. No JavaScript. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/radio-group.json` · Astro: `https://www.themes.dev/caseroom/r/astro/radio-group.json` · HTML: https://www.themes.dev/caseroom/r/html/radio-group.html · Markdown: https://www.themes.dev/caseroom/components/radio-group.md
- [Pagination](https://www.themes.dev/caseroom/components/pagination/): Page links with gaps: first, last, the current page and its neighbours; the ends turn off. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/pagination.json` · Astro: `https://www.themes.dev/caseroom/r/astro/pagination.json` · HTML: https://www.themes.dev/caseroom/r/html/pagination.html · Markdown: https://www.themes.dev/caseroom/components/pagination.md
- [Breadcrumb](https://www.themes.dev/caseroom/components/breadcrumb/): Where the page sits: a nav with an ordered list and the current page marked. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/breadcrumb.json` · Astro: `https://www.themes.dev/caseroom/r/astro/breadcrumb.json` · HTML: https://www.themes.dev/caseroom/r/html/breadcrumb.html · Markdown: https://www.themes.dev/caseroom/components/breadcrumb.md
- [Skeleton](https://www.themes.dev/caseroom/components/skeleton/): A loading placeholder with a slow sheen that stands still under reduced motion. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/skeleton.json` · Astro: `https://www.themes.dev/caseroom/r/astro/skeleton.json` · HTML: https://www.themes.dev/caseroom/r/html/skeleton.html · Markdown: https://www.themes.dev/caseroom/components/skeleton.md
- [Table](https://www.themes.dev/caseroom/components/table/): A data table with a caption, right-aligned numbers and sortable columns (aria-sort). Scrolls in its own box. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/table.json` · Astro: `https://www.themes.dev/caseroom/r/astro/table.json` · HTML: https://www.themes.dev/caseroom/r/html/table.html · Markdown: https://www.themes.dev/caseroom/components/table.md
- [Accordion](https://www.themes.dev/caseroom/components/accordion/): Sections on native details, one open at a time if you like. Keyboard and find-in-page, no JavaScript. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/accordion.json` · Astro: `https://www.themes.dev/caseroom/r/astro/accordion.json` · HTML: https://www.themes.dev/caseroom/r/html/accordion.html · Markdown: https://www.themes.dev/caseroom/components/accordion.md
- [Progress](https://www.themes.dev/caseroom/components/progress/): A labelled progress bar, or a sweep while the amount is unknown that stands still under reduced motion. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/progress.json` · Astro: `https://www.themes.dev/caseroom/r/astro/progress.json` · HTML: https://www.themes.dev/caseroom/r/html/progress.html · Markdown: https://www.themes.dev/caseroom/components/progress.md
- [Slider](https://www.themes.dev/caseroom/components/slider/): A native range input with a filled track and a live value. Arrows, Page Up/Down, Home and End. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/slider.json` · Astro: `https://www.themes.dev/caseroom/r/astro/slider.json` · HTML: https://www.themes.dev/caseroom/r/html/slider.html · Markdown: https://www.themes.dev/caseroom/components/slider.md
- [Popover](https://www.themes.dev/caseroom/components/popover/): A non-modal panel next to its trigger on the native popover: focus moves in and back, Escape and outside clicks close it. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/popover.json` · Astro: `https://www.themes.dev/caseroom/r/astro/popover.json` · HTML: https://www.themes.dev/caseroom/r/html/popover.html · Markdown: https://www.themes.dev/caseroom/components/popover.md
- [Command menu](https://www.themes.dev/caseroom/components/command-menu/): A command palette: filter as you type, arrows and Enter, grouped commands, ⌘K or Ctrl+K to open. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/command-menu.json` · Astro: `https://www.themes.dev/caseroom/r/astro/command-menu.json` · HTML: https://www.themes.dev/caseroom/r/html/command-menu.html · Markdown: https://www.themes.dev/caseroom/components/command-menu.md
- [Search field](https://www.themes.dev/caseroom/components/search-field/): A search input in a role=search form, with a / shortcut and a clear button. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/search-field.json` · Astro: `https://www.themes.dev/caseroom/r/astro/search-field.json` · HTML: https://www.themes.dev/caseroom/r/html/search-field.html · Markdown: https://www.themes.dev/caseroom/components/search-field.md
- [Sidebar navigation](https://www.themes.dev/caseroom/components/sidebar-nav/): A docs sidebar: groups of links, the current page marked, collapsible groups on native details. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/sidebar-nav.json` · Astro: `https://www.themes.dev/caseroom/r/astro/sidebar-nav.json` · HTML: https://www.themes.dev/caseroom/r/html/sidebar-nav.html · Markdown: https://www.themes.dev/caseroom/components/sidebar-nav.md
- [Drawer](https://www.themes.dev/caseroom/components/drawer/): A side sheet on the native dialog: slides in from its edge, keeps focus inside, Escape and the backdrop close it. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/drawer.json` · Astro: `https://www.themes.dev/caseroom/r/astro/drawer.json` · HTML: https://www.themes.dev/caseroom/r/html/drawer.html · Markdown: https://www.themes.dev/caseroom/components/drawer.md
- [Link list](https://www.themes.dev/caseroom/components/link-list/): Links as rows with a line under the title and a chevron; the whole row is the target. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/link-list.json` · Astro: `https://www.themes.dev/caseroom/r/astro/link-list.json` · HTML: https://www.themes.dev/caseroom/r/html/link-list.html · Markdown: https://www.themes.dev/caseroom/components/link-list.md
- [Empty state](https://www.themes.dev/caseroom/components/empty-state/): Nothing here yet, or no results: a mark, what is going on, what to do, announced when it replaces results. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/empty-state.json` · Astro: `https://www.themes.dev/caseroom/r/astro/empty-state.json` · HTML: https://www.themes.dev/caseroom/r/html/empty-state.html · Markdown: https://www.themes.dev/caseroom/components/empty-state.md
- [Tag](https://www.themes.dev/caseroom/components/tag/): A topic or an active filter: static, a link, or removable with focus moving to the next tag. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/tag.json` · Astro: `https://www.themes.dev/caseroom/r/astro/tag.json` · HTML: https://www.themes.dev/caseroom/r/html/tag.html · Markdown: https://www.themes.dev/caseroom/components/tag.md
- [Filter bar](https://www.themes.dev/caseroom/components/filter-bar/): Toggle chips, a sort select and a live result count; Clear turns every filter off. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/filter-bar.json` · Astro: `https://www.themes.dev/caseroom/r/astro/filter-bar.json` · HTML: https://www.themes.dev/caseroom/r/html/filter-bar.html · Markdown: https://www.themes.dev/caseroom/components/filter-bar.md
- [Filter sheet](https://www.themes.dev/caseroom/components/filter-sheet/): The Filters button of a phone layout: the active count on the button, checkbox groups in a side sheet, Clear all and Show results. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/filter-sheet.json` · Astro: `https://www.themes.dev/caseroom/r/astro/filter-sheet.json` · HTML: https://www.themes.dev/caseroom/r/html/filter-sheet.html · Markdown: https://www.themes.dev/caseroom/components/filter-sheet.md
- [Steps](https://www.themes.dev/caseroom/components/steps/): Progress through a flow: done, current (aria-current=step) and to come; horizontal when there is room. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/steps.json` · Astro: `https://www.themes.dev/caseroom/r/astro/steps.json` · HTML: https://www.themes.dev/caseroom/r/html/steps.html · Markdown: https://www.themes.dev/caseroom/components/steps.md
- [Quantity](https://www.themes.dev/caseroom/components/quantity/): Minus, a number field and plus as one control; the buttons turn off at the ends. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/quantity.json` · Astro: `https://www.themes.dev/caseroom/r/astro/quantity.json` · HTML: https://www.themes.dev/caseroom/r/html/quantity.html · Markdown: https://www.themes.dev/caseroom/components/quantity.md
- [Code block](https://www.themes.dev/caseroom/components/code-block/): Code with a filename bar and Copy, in a focusable scroll box that shades its edges. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/code-block.json` · Astro: `https://www.themes.dev/caseroom/r/astro/code-block.json` · HTML: https://www.themes.dev/caseroom/r/html/code-block.html · Markdown: https://www.themes.dev/caseroom/components/code-block.md
- [Carousel](https://www.themes.dev/caseroom/components/carousel/): A swipeable row of cards with Previous and Next that turn off at the ends. No autoplay. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/carousel.json` · Astro: `https://www.themes.dev/caseroom/r/astro/carousel.json` · HTML: https://www.themes.dev/caseroom/r/html/carousel.html · Markdown: https://www.themes.dev/caseroom/components/carousel.md
- [Date field](https://www.themes.dev/caseroom/components/date-field/): The native date input in the field style, or a from–to range that keeps the end after the start. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/date-field.json` · Astro: `https://www.themes.dev/caseroom/r/astro/date-field.json` · HTML: https://www.themes.dev/caseroom/r/html/date-field.html · Markdown: https://www.themes.dev/caseroom/components/date-field.md
- [Toolbar](https://www.themes.dev/caseroom/components/toolbar/): A row of controls that is one Tab stop; arrows move. Toggle buttons, and a "Was this helpful?" variant. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/toolbar.json` · Astro: `https://www.themes.dev/caseroom/r/astro/toolbar.json` · HTML: https://www.themes.dev/caseroom/r/html/toolbar.html · Markdown: https://www.themes.dev/caseroom/components/toolbar.md
- [Copy button](https://www.themes.dev/caseroom/components/copy-button/): Copies a value, an element's text or a whole page (its markdown), then says Copied for a moment. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/copy-button.json` · Astro: `https://www.themes.dev/caseroom/r/astro/copy-button.json` · HTML: https://www.themes.dev/caseroom/r/html/copy-button.html · Markdown: https://www.themes.dev/caseroom/components/copy-button.md
- [Read aloud](https://www.themes.dev/caseroom/components/read-aloud/): Listen to an article: the browser's own speech reads it, with pause, resume and stop. Nothing leaves the page. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/read-aloud.json` · Astro: `https://www.themes.dev/caseroom/r/astro/read-aloud.json` · HTML: https://www.themes.dev/caseroom/r/html/read-aloud.html · Markdown: https://www.themes.dev/caseroom/components/read-aloud.md
- [Language switcher](https://www.themes.dev/caseroom/components/language-switcher/): The page in other languages as links with lang and hreflang, behind one button; the current one is marked. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/language-switcher.json` · Astro: `https://www.themes.dev/caseroom/r/astro/language-switcher.json` · HTML: https://www.themes.dev/caseroom/r/html/language-switcher.html · Markdown: https://www.themes.dev/caseroom/components/language-switcher.md
- [On this page](https://www.themes.dev/caseroom/components/toc/): A page's sections as links; the one you are reading is marked while you scroll. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/toc.json` · Astro: `https://www.themes.dev/caseroom/r/astro/toc.json` · HTML: https://www.themes.dev/caseroom/r/html/toc.html · Markdown: https://www.themes.dev/caseroom/components/toc.md
- [Link](https://www.themes.dev/caseroom/components/link/): Inline in text, standalone with an arrow, or external with an arrow out and a new-tab note for screen readers. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/link.json` · Astro: `https://www.themes.dev/caseroom/r/astro/link.json` · HTML: https://www.themes.dev/caseroom/r/html/link.html · Markdown: https://www.themes.dev/caseroom/components/link.md
- [Icons](https://www.themes.dev/caseroom/components/icon/): Twenty-four icons on a 16px grid with a 1.5px stroke, decorative unless labelled. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/icon.json` · Astro: `https://www.themes.dev/caseroom/r/astro/icon.json` · HTML: https://www.themes.dev/caseroom/r/html/icon.html · Markdown: https://www.themes.dev/caseroom/components/icon.md
- [Bar chart](https://www.themes.dev/caseroom/components/bar-chart/): Columns with their values on top and labels under them; the same data in a table for screen readers. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/bar-chart.json` · Astro: `https://www.themes.dev/caseroom/r/astro/bar-chart.json` · HTML: https://www.themes.dev/caseroom/r/html/bar-chart.html · Markdown: https://www.themes.dev/caseroom/components/bar-chart.md
- [Video player](https://www.themes.dev/caseroom/components/video-player/): A poster with one Play button; native controls and captions once it plays. Nothing plays by itself. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/video-player.json` · Astro: `https://www.themes.dev/caseroom/r/astro/video-player.json` · HTML: https://www.themes.dev/caseroom/r/html/video-player.html · Markdown: https://www.themes.dev/caseroom/components/video-player.md
- [Map](https://www.themes.dev/caseroom/components/map-embed/): A location whose map loads from OpenStreetMap only when asked; the address works as a link without it. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/map-embed.json` · Astro: `https://www.themes.dev/caseroom/r/astro/map-embed.json` · HTML: https://www.themes.dev/caseroom/r/html/map-embed.html · Markdown: https://www.themes.dev/caseroom/components/map-embed.md
- [Story card](https://www.themes.dev/caseroom/components/story-card/): Picture, kicker, the title as the one link, a line and the meta; standard, compact, wide and feature. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/story-card.json` · Astro: `https://www.themes.dev/caseroom/r/astro/story-card.json` · HTML: https://www.themes.dev/caseroom/r/html/story-card.html · Markdown: https://www.themes.dev/caseroom/components/story-card.md
- [Section header](https://www.themes.dev/caseroom/components/section-header/): The head of a page section: a kicker in words, the heading, a line or two and an optional action. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/section-header.json` · Astro: `https://www.themes.dev/caseroom/r/astro/section-header.json` · HTML: https://www.themes.dev/caseroom/r/html/section-header.html · Markdown: https://www.themes.dev/caseroom/components/section-header.md
- [Segmented control](https://www.themes.dev/caseroom/components/segmented/): Native radios drawn as one pill track, like a billing-period toggle. One Tab stop, arrows choose. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/segmented.json` · Astro: `https://www.themes.dev/caseroom/r/astro/segmented.json` · HTML: https://www.themes.dev/caseroom/r/html/segmented.html · Markdown: https://www.themes.dev/caseroom/components/segmented.md
- [Search results](https://www.themes.dev/caseroom/components/result-list/): An announced count, then ranked results with the address and the match marked in each snippet. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/result-list.json` · Astro: `https://www.themes.dev/caseroom/r/astro/result-list.json` · HTML: https://www.themes.dev/caseroom/r/html/result-list.html · Markdown: https://www.themes.dev/caseroom/components/result-list.md
- [Announcement bar](https://www.themes.dev/caseroom/components/announcement/): One line at the top of the site on an inverted ground, a read-more link and a close button. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/announcement.json` · Astro: `https://www.themes.dev/caseroom/r/astro/announcement.json` · HTML: https://www.themes.dev/caseroom/r/html/announcement.html · Markdown: https://www.themes.dev/caseroom/components/announcement.md

## Blocks

- [Hero](https://www.themes.dev/caseroom/blocks/hero/): The opening section: h1, one sentence, two actions and an install command; compact for an inner page. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/hero.json` · Astro: `https://www.themes.dev/caseroom/r/astro/hero.json` · HTML: https://www.themes.dev/caseroom/r/html/hero.html · Markdown: https://www.themes.dev/caseroom/blocks/hero.md
- [Pricing](https://www.themes.dev/caseroom/blocks/pricing/): Plans side by side; the featured plan inverts, an enterprise plan can run as a wide row under them. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/pricing.json` · Astro: `https://www.themes.dev/caseroom/r/astro/pricing.json` · HTML: https://www.themes.dev/caseroom/r/html/pricing.html · Markdown: https://www.themes.dev/caseroom/blocks/pricing.md
- [FAQ](https://www.themes.dev/caseroom/blocks/faq/): Questions as native details: keyboard, find-in-page and no JavaScript. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/faq.json` · Astro: `https://www.themes.dev/caseroom/r/astro/faq.json` · HTML: https://www.themes.dev/caseroom/r/html/faq.html · Markdown: https://www.themes.dev/caseroom/blocks/faq.md
- [Site header](https://www.themes.dev/caseroom/blocks/site-header/): Brand, links and actions, sticky; below 1024px they fold into a Menu panel. Inline or centred. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/site-header.json` · Astro: `https://www.themes.dev/caseroom/r/astro/site-header.json` · HTML: https://www.themes.dev/caseroom/r/html/site-header.html · Markdown: https://www.themes.dev/caseroom/blocks/site-header.md
- [Site footer](https://www.themes.dev/caseroom/blocks/site-footer/): Brand, link columns and a legal row; on the page or as an inverted band that closes it. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/site-footer.json` · Astro: `https://www.themes.dev/caseroom/r/astro/site-footer.json` · HTML: https://www.themes.dev/caseroom/r/html/site-footer.html · Markdown: https://www.themes.dev/caseroom/blocks/site-footer.md
- [Newsletter signup](https://www.themes.dev/caseroom/blocks/newsletter/): A heading, an email field with its button attached and a note on how often you send. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/newsletter.json` · Astro: `https://www.themes.dev/caseroom/r/astro/newsletter.json` · HTML: https://www.themes.dev/caseroom/r/html/newsletter.html · Markdown: https://www.themes.dev/caseroom/blocks/newsletter.md
- [Contact form](https://www.themes.dev/caseroom/blocks/contact-form/): Name, email, topic and message with visible labels and native validation. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/contact-form.json` · Astro: `https://www.themes.dev/caseroom/r/astro/contact-form.json` · HTML: https://www.themes.dev/caseroom/r/html/contact-form.html · Markdown: https://www.themes.dev/caseroom/blocks/contact-form.md
- [Logo strip](https://www.themes.dev/caseroom/blocks/logo-strip/): One line on who uses it, then the logos at one height and one colour, in rows that wrap evenly. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/logo-strip.json` · Astro: `https://www.themes.dev/caseroom/r/astro/logo-strip.json` · HTML: https://www.themes.dev/caseroom/r/html/logo-strip.html · Markdown: https://www.themes.dev/caseroom/blocks/logo-strip.md
- [Login form](https://www.themes.dev/caseroom/blocks/login-form/): Email and password with autocomplete hints, a show/hide toggle, keep me signed in, reset and sign-up links. The full auth flow is in Flightdeck. React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/login-form.json` · Astro: `https://www.themes.dev/caseroom/r/astro/login-form.json` · HTML: https://www.themes.dev/caseroom/r/html/login-form.html · Markdown: https://www.themes.dev/caseroom/blocks/login-form.md