Styling

Start with component props

Use the component’s documented variant, size, density, orientation, or profile before adding classes. Profiles describe specific compositions; do not apply a rare profile merely to approximate unrelated styling.

import { Button } from "@/siteplane/components/button";

<Button variant="outline" className="w-full sm:w-auto">
  Save changes
</Button>;

Layout belongs to the application

Use native sections, grids, and flex containers around kit parts. Give scrollable regions min-width/min-height constraints as needed. A component preview’s outer layout is included in its source so it can reproduce outside the docs.

Keep layout styles separate from business state. Do not rebuild a button, input, dialog, or table that the kit already provides.

Element composition

Many parts support Base UI render, allowing a router link or another compatible element without adding nested interactive elements. Follow that part’s API; some wrappers intentionally expose a narrower interface.

import { Button } from "@/siteplane/components/button";

<Button render={<a href="/projects" />} variant="outline">
  View projects
</Button>;

Keep the element’s semantics correct, pass necessary href/ARIA attributes, and forward refs/events when supplying your own component. Do not wrap a button inside another button.

Edit installed source

Installed TSX and CSS are part of your application. Make targeted edits when props and classes do not cover a real need. Preserve the Base UI or React Aria behavior, data attributes, focus states, and motion preferences. Review source updates before overwriting local customizations.

Avoid selectors tied to undocumented internal DOM depth. Use the public part, its className, or documented data-slot attributes after checking the installed source. The source viewer is useful for inspection; it does not replace the component’s installation and API reference.