Snurble components

Foundations

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.

Shell

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.

Projects

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.

Experience

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.

Actions and status

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.

SegmentedControl

A pill-shaped selection control. Like a Radio Group, but with better posture and a satisfying slide animation.

Forms

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.

Overlays and menus

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.