Hand-drawn

Hand-drawn navbar

A hand-drawn header: a sketched camera instead of a logo, the name in a handwritten face, links with a stroke underline and a button in a drawn capsule. The bottom edge is a pencil line. On narrow screens links hide behind “menu”.

What you can change

brand, caption, links, actionLabel, actionHref, menuLabel
logo — your own image instead of the camera
accent and ink, rough and boil, tone, sticky, actionStyle — hatched or filled button

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

Use it with AI

1. Copy the link.
2. Write to your agent in your own words and drop the link into the sentence.
3. The agent opens the link and installs the component from the registry.

Theme

Name

Caption

Button

Sticky

Hand

Boil

Line

Text

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/sketch-019?lang=en&theme=dark

2Paste into the chat

3Get it in your project

Not sure where to paste it? Step-by-step guide

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

Loading…

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

Use it with AI

1. Copy the link.
2. Write to your agent in your own words and drop the link into the sentence.
3. The agent opens the link and installs the component from the registry.

Theme

Name

Caption

Button

Sticky

Hand

Boil

Line

Text

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/sketch-019?lang=en&theme=dark

2Paste into the chat

3Get it in your project

Not sure where to paste it? Step-by-step guide

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

Loading…

For developers

The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.

Technical notes

One file, zero dependencies, “use client”. The host is a <header> with position:sticky (sticky=false turns it off), paper background with transparency and blur. The logo is an SVG camera of five outlines (body rectPoints, lens and pupil circlePoints, finder, button) in three boil frames; the logo prop swaps it for an image. Links: a sketch line under each across its box, visible on hover and for aria-current. The button is a rectPoints capsule with fill. The narrow-screen menu is a <button aria-expanded> and a <ul hidden> toggled by state; from 48rem width (container query) links and the button show. The bottom line is a sketch across the host width past the edges. Neucha and Caveat via <link precedence>, palette --vibeui-sketch-019-* with light-dark.