Kitchen Sink v0.0.12
Overview
Documentation
InstallationAgent Guide
Actions
Buttons
Form Controls
InputsSelectSliderSwitchAddress Select
Overlays
Dialogs
Content
Product CardsSectionsImages (unpic)
Assets
IconsFlags

Kitchen Sink

Every component in @mediayard/agoratopia-ui, rendered in its important variants and states.

Documentation

  • Installation Install the package with npm, pnpm, yarn, bun, or deno, set up styles, and learn the entry points.
  • Agent Guide Component selection map, implementation checklist, and copy-ready LLM prompt.

Actions

  • Buttons Button variants, disabled states, anchor mode, and social login buttons.

Form Controls

  • Inputs Text, email, password, phone, and checkbox inputs with validation states.
  • Select Modal select with search, keyboard navigation, and custom option rendering.
  • Slider Draggable range slider with keyboard support and an optional value bubble.
  • Switch Accessible on/off toggle with an optional label and remote-form binding.
  • Address Select Saved-address picker with a slide-in new/edit address form and save toggle.

Overlays

  • Dialogs Slide-in dialog panel with title or go-back navigation, sticky footer, and nesting.

Content

  • Product Cards Product card types, stock states, and the loading skeleton.
  • Sections Hero, media, and landing sections with image and video media.
  • Images (unpic) How to use @unpic/svelte with the Cloudflare CDN: layouts, operations, art direction, and loading strategies.

Assets

  • Icons Icon and logo components with copyable import snippets.
  • Flags All 56 country flag components with search and copyable snippets.