# Snurble components

Browse every documented `@matt-riley/ui-astro` component by category.

## Coverage

The component reference covers:

- Layout — Own the document shell and head slot. The sturdy foundation upon which all your pages are built.
- PageShell — Provide the shared page-width and vertical rhythm wrapper. The invisible corset that keeps your layout looking trim and proper.
- Hero — Render the page-level introduction block. A bold, unapologetic welcome mat for your page.
- Section — Create titled content sections with a stable heading contract. The building blocks of a well-structured document.
- Panel — Provide the shared flat, bordered, elevated, or glass surface wrapper. A nice little box to put your things in.
- Card — A flexible content card with Snurble surface variants, padding scale, and optional linked or interactive affordance.
- DataTable — Render shared table styling for structured row-and-column data. Because sometimes you just need a really good looking spreadsheet.
- MetaList — Display compact metadata rows. A wonderfully neat way to present 'Key: Value' information.
- CodeSnippet — Render inline or block code examples with beautiful syntax highlighting. Perfect for showing off your elegant, bug-free (hopefully) code.
- Stack — Apply consistent vertical spacing. The bouncer that keeps your elements at exactly the right distance from each other.
- Divider — Render a tokenized horizontal or vertical separator with optional label support. A tidy line that knows when to stay quiet for assistive tech.
- VisuallyHidden — Hide content visually while keeping it available to screen readers. Perfect for icon-only controls that still need a real name.
- BentoGrid — A responsive CSS Grid container for modular bento-box layouts. Perfect for modern, information-dense dashboards and portfolios.
- BentoItem — A layout wrapper for items within a BentoGrid. Controls column and row spanning.
- FontAssets — Inject the shared font-face declarations. The invisible magic that makes our typography look so darn good.
- JsonLd — Publish structured data in the document head. Food for search engines and web crawlers.
- SkipLink — Provide a hidden-until-focus anchor. The secret teleportation pad for power users.
- SeoMeta — Emit Open Graph and Twitter metadata. Making sure your links look pretty when shared on social media.
- ServiceWorker — Register a PWA service worker. The invisible magic that makes your web app work even when the wifi dies.
- Header — A generic app header with brand, primary navigation, optional actions, and sticky behavior.
- Footer — A responsive footer shell with brand, navigation links, social links, and copyright slots.
- Sidebar — A nested side-navigation surface with active-link styling and optional small-screen collapse behavior.
- ProfileHero — Render the shared profile banner pattern. The ultimate 'Look at me!' component for personal portfolios.
- SocialLinks — Render the package-owned social link list. A neat row of icons to prove you exist on other parts of the internet.
- DecoratedHeading — Display the shared decorative heading treatment for spotlight content and branded sections. When regular text just isn't fancy enough.
- ProjectCard — Render a single project summary card. The perfect display case for your digital trophies.
- ProjectGrid — Lay out project cards in a responsive grid. Because standard lists are boring.
- ExperienceCard — Render a single experience or role entry. The perfect way to humblebrag about your past jobs.
- ExperienceList — Group multiple experience entries into a stacked timeline. Your career history, elegantly formatted.
- SkillIcon — Render single skill or technology icon. Cute little badges to show off the languages you theoretically know.
- SkillIconList — Arrange multiple skill icons. A concentrated blast of your technical prowess.
- AgentDiscoveryHint — Embed hidden machine-readable discovery hints in the page without changing visible layout content. It's an invisibility cloak for your metadata.
- Button — Render the primary shared action control for the highest-priority calls to action. The absolute workhorse of any UI.
- IconButton — Render a compact icon-only action. Perfect for when you want a button, but you're too lazy to write words.
- LinkButton — Render navigation styled like a button. For those times when an anchor tag just doesn't carry enough visual weight.
- Badge — Display compact status or taxonomy labels. It's like putting a colorful little sticker on your data to make it feel special.
- Avatar — Render a profile image or initials fallback with consistent sizing, shape, and optional status treatment.
- Alert — Render a structured status message for info, success, warning, or danger states. Basically, it's the UI equivalent of tapping the user on the shoulder very persistently.
- Callout — Highlight supporting guidance or caveats without the stronger semantics of a stateful alert. It's the 'by the way' of UI components.
- EmptyState — Render the shared no-results state. The friendly ghost town of your application.
- Skeleton — Render a loading placeholder surface or text-line group. The ghostly apparition of content yet to come, now with better manners for assistive tech.
- Spinner — A compact circular loading indicator with decorative or announced accessibility modes.
- Progress — A tokenized progress indicator with determinate and indeterminate states plus optional visible value text.
- LoadingButton — A Button-style action with an inline spinner, disabled loading state, and accessible loading label.
- ThemeToggle — A pill-shaped theme switcher with animated icons. Give your users the power to choose their own light (or lack thereof).
- Sparkle — A tiny, animated SVG star. A sprinkle of magic for your micro-interactions.
- Toast — A non-blocking notification overlay. The polite whisper that tells you something just happened.
- Breadcrumbs — Render hierarchical navigation links for nested docs and application sections. Hansel and Gretel would have loved this component.
- Tabs — Render a named-panel disclosure pattern. It's like having multiple pages without actually leaving the page.
- Accordion — A stack of expandable sections perfect for progressive disclosure. Think of it as a set of magical drawers that organize your content neatly without taking up too much precious screen space.
- Pagination — Render previous/next and page-link navigation. Because sometimes your collection of cute cat photos is just too big for one page.
- TableOfContents — Render a page-local heading index. The roadmap for long-form docs.
- SegmentedControl — A pill-shaped selection control. Like a Radio Group, but with better posture and a satisfying slide animation.
- Field — Provide the wrapper contract for labels, hints, and errors. Because every input deserves good context.
- Input — Render the shared single-line text input surface. The bread and butter of data collection.
- Textarea — Render the shared multiline text-entry control. The blank canvas for user feedback and epic novels.
- Checkbox — Render the shared boolean checkbox control. The classic, undeniable way to say 'yes, please' or 'absolutely not'.
- RadioGroup — Render a grouped single-choice input set. The classic multiple-choice exam format, now in UI form.
- Select — Render the shared select control wrapper. The polite way of asking a user to pick one thing from a long list.
- Switch — Render the shared immediate-toggle switch control. The digital equivalent of flipping a light switch.
- FormHint — Render supporting field guidance. The helpful little whisper that prevents form validation errors.
- FormError — Render validation feedback. The digital equivalent of red pen on a spelling test.
- InputGroup — A field-control wrapper that visually merges prefix, input, and suffix content into one tokenized control.
- SearchInput — A rounded search field with icon affordance, optional clear button, and accessible label.
- Combobox — A filterable single-select form control with listbox semantics, keyboard selection, and form submission support.
- DialogActions — A small action-row helper for modal and drawer footers with responsive stacking.
- DialogFooter — A footer region helper for dialog content with border separation and alignment controls.
- Dialog — Render the shared modal dialog overlay pattern. Takes over the screen to command your user's undivided attention.
- Drawer — Render a slide-in side panel for contextual controls. A smooth operator that enters stage left (or right, or top, or bottom).
- Popover — Render a lightweight anchored overlay. Like a tooltip that went to the gym and got buff.
- DropdownMenu — Render an action menu for compact secondary actions. A neat little list of things you can do, hidden behind a button.
- MenuButton — A complete menu trigger with accessible menu attributes, roving keyboard navigation, and custom select events.
- CommandMenu — A dialog-backed command palette with grouped commands, local filtering, keyboard movement, and custom select events.
- Tooltip — Render a small hover or focus tooltip. A polite little whisper of extra information.
- StatCard — Render a headline metric with optional trend. Because big numbers look cool.
- DescriptionList — Render structured term-definition pairs for compact reference data. Perfect for displaying metadata like it's a sleek dossier.
- FilterBar — Render the shared search-and-filter container. The control center for finding exactly what you need.
- SortIndicator — Render sort direction affordance. A tiny little arrow doing a very important job.