Caderno UI

UI components with the feel of pen on white paper. For HTML, React, Astro, Vue, and Svelte.

Get started

Explore components

Try the demo

Review the search results.
Bring questions to the meeting.

How it works

Use standard web components, with optional React and Astro adapters.

Compose text, icons, and actions through slots. Keep your application logic separate.

Change colors, fonts, and spacing with CSS variables.

See the components together in a small app for projects and notes.

Open demo

Save your notes before leaving this page.

Web components. Import only the ones you use.

Colors, fonts, and spacing. White by default; dark mode is optional.

Hand-drawn SVG icons.

React components with typed properties and events.

Astro components with server-rendered fallback content.