Introduction

What it is

107 free components: 67 for the agent itself, like status pills, reasoning trails, tool calls, permission gates, plan reviews and run summaries, and 40 app basics around it.

Every component plays as a demo on the homepage, and has a page of its own with its install command, React props, code and questions.

Two styles, light and dark

• Soft

  Quiet, rounded surfaces with a blue accent. designme.dev opens in Soft.

• Blueprint

  The same components drawn as a technical sheet, with square corners, hairline edges and a lime accent.

Each style has a light and a dark theme. Switch them in the header of any page here. In your own project, two attributes on <html> pick them. See Theming.

What is in it

HTML or React

Every component comes in two versions. One is HTML, CSS and JavaScript on a small shared core that holds the tokens, icons and helpers. The other is a typed React component for React 19, with no dependencies beyond React, that works in Next.js, Vite and Astro.

Either way, the CLI copies the source into your project, so it is yours to change. See Installation.

Free and MIT licensed

Use the components in personal and commercial work. The code is MIT licensed, and built by DesignMe.

Avatars, icons, flags, brand logos and fonts keep their own licences. They are listed under Credits in the designme package on npm.

Next steps