Astro

Add components

1. 1

   Add them with the CLI

   TerminalCopy

   npx designme add tool-call buttons --astro

   They land in src/components/designme, or components/designme when there is no src folder. The shared core, core/designme.css and core/core.js, is added once. Without --astro, the CLI says so when it finds an astro.config file in the folder you run it from.

   • src/components/designme/
     • core/
       • designme.css
       • core.js
     • tool-call/
       • ToolCall.astro
       • tool-call.css
       • tool-call.js
     • buttons/
       • Buttons.astro
       • buttons.css
       • buttons.js

2. 2

   Use them in a page

   AstroCopy

   ---
   import ToolCall from '../components/designme/tool-call/ToolCall.astro';
   import Buttons from '../components/designme/buttons/Buttons.astro';
   ---
   <ToolCall />
   <Buttons data-style="soft" class="my-buttons" />

   The CLI prints the import line for each component. It uses your @/ alias when your tsconfig.json has one, and a path from src/pages when it doesn't.

The shadcn CLI can add them too, from https://designme.dev/r/shadcn/astro/<name>.json. See Installation.

How they work

• Markup

  Each .astro file holds the component's markup exactly as the HTML version has it, inside <Fragment is:raw>, so Astro leaves it as it is. Its root element is the same <div data-c> the HTML version uses.

• Styles

  The component imports core/designme.css and its own .css in its frontmatter. Astro bundles each stylesheet once per page.

• Script

  Its <script> imports its .js, which is the HTML version's script with one line added: it imports the helpers it uses from core/core.js, the shared core as an ES module. Astro bundles each script once per page, however many times the component appears.

• Mounting

  The core starts each component when it scrolls into view and plays its demo, as on designme.dev. A click, a key or typing inside it stops the demo for good. With Astro's client router (<ClientRouter />), the core also starts the components on each page it brings in, and stops the ones it takes away.

A component made of others, like the Agent harness, imports them and places them hidden on the page, where its script finds their markup. The CLI adds them with it.

Props

Each component has a typed Props interface: every attribute of a <div> (Astro's HTMLAttributes<'div'>), plus data-style. They all go on the component's root element.

data-style only takes "soft": Blueprint is what the components draw without it. A component can be Soft on a Blueprint page, but not the other way round. See Theming.

Your own data

The Astro components play the demos from designme.dev. To show your own data, change the component's .js (and its markup in the .astro file), as you would with the HTML version.

To drive a component from your own state with props, use the React version as an island: npx astro add react, then npx designme add <name> --react, and hydrate it with a directive such as client:visible.

Style, theme and fonts

• data-style="soft" on <html> makes every component Soft; on one component, just that one.
• data-theme="dark" or data-theme="light" on <html> fixes the theme. Without it, the components follow the device.
• Load Inter and JetBrains Mono for the full look. Without them, the components fall back to the system font.
• The components use plain class names, as the HTML version does, and CSS variables that start with --dm-, so they never meet your page's own. For a shadcn/ui or Tailwind v4 theme, add the theme bridge: npx designme add --astro --theme-bridge. See Installation.