Siteplane UI

Application guidelines

Compose public parts, keep state explicit, and verify the resulting workflow.

Markdown

Read before composing

  1. Identify the application behavior: action, field, selection, navigation, collection, or overlay.
  2. Read the matching guide and component API, including defaults and composition rules.
  3. Install public source from the configured registry.
  4. Run a complete example before adapting it.

Keep responsibilities clear

Let kit components own controls and their built-in interaction behavior. Domain data, filtering, sorting, validation, persistence, routing and async state belong in your application code, along with small local handlers and native layout markup. Where a kit control exists, use it instead of a private helper that reimplements it. That includes small actions: copy a value with Copy Button, and use an icon library's icons only as static glyphs inside kit parts, such as a menu item, never as a control with state of your own.

Use the exact callbacks and value types from the component page. Combobox keeps its query in inputValue and its selection in value. A Table selection is a Set of keys or "all", so handle both. Calendar and the date pickers take native Date values as local calendar days, without a time of day; persist them deliberately. Respect the component’s form and reset notes, and do not add props that exist only in a different library.

Preserve useful defaults

Start with default size, density, radius, and styling. Add only props or classes that the application needs. Do not repair a component’s appearance through hidden global CSS or a docs-only wrapper. Include required providers and setup in the application boundary so a copied file remains explainable.

Finish the workflow

Wire visible actions to real local or service behavior. Expose success and failure, disable duplicate pending actions, preserve edited input on error, and provide empty states. Use a specific confirmation for consequential changes. Do not create dead buttons merely to fill a screenshot.

Verify and report

Check the changed behavior with the smallest meaningful automated check, then inspect substantial layout work in the browser while building it. Exercise keyboard navigation, relevant mobile widths, both themes, and overlays. Verify standalone installation if the output is intended to be copied into another project.

Report what runs locally, what still requires a service, and what was actually checked.