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”.
React + Tailwind, shadcn-compatible: press “Copy for AI” and your Cursor or Claude Code agent installs it with the shadcn CLI.
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
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.
put this on the home page as the hero:
https://vibeui.club/c/sketch-019?lang=en&theme=dark
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…
How to use
<Sketch019
brand="Anna Sokolova"
caption="photographer · Lisbon"
links={[
{ label: "Work", href: "#works", current: true },
{ label: "About", href: "#about" },
]}
actionLabel="Book a shoot"
actionHref="#book"
/>A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.
Settings
- Theme
tone· default: auto- Name
brand· default: Anna Sokolova- Caption
caption· default: photographer · Lisbon- Button
actionStyle· default: hatch- Sticky
sticky· default: on- Hand
rough· default: loose- Boil
boil· default: soft- Line
accent· default: theme colour- Text
ink· default: theme colour
Used in scenarios
- Photographer portfolioHeader
More in Hand-drawn
FAQ
- How do I add Hand-drawn navbar with Cursor or Claude Code?
- Press “Copy for AI” on this page and paste it into your agent's chat. The instruction contains the shadcn CLI install command, the dependencies and what to keep, so the agent installs this exact component instead of recreating a lookalike.
- What does Hand-drawn navbar depend on?
- No npm packages beyond React and Tailwind CSS.
- What can I change in Hand-drawn navbar?
- Adapt: 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. Keep as installed: the sketched camera in three boil frames — the default logo; supply an image via logo instead of replacing the SVG; the stroke under links on hover and for the current one — instead of a plain underline; the pencil bottom line past the edges and the sticky behaviour.
- Is Hand-drawn navbar free?
- The preview is open to everyone; the source is available with a PRO subscription.
For developers
npx shadcn@latest add https://vibeui.club/r/pro/sketch-019.jsonThis command needs a signed link: sign in and open “Component source” below — it issues a working link valid for 30 minutes. All install options
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.
Tags
- sketch
- hand-drawn
- handwritten
- doodle
- rough
- boil
- navbar
- header
- navigation
- camera
- logo
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…