Prototype-to-production UI library for Vue.

Artfully inspired.

Penciller leverages illustration principles to create prototypes that look like wireframes but are fully functional and production-ready.

Easy Markup

The markup for components follow a simple, predictable pattern that also retains native HTML attributes.

Convention Over Configuration

An opinionated workflow keeps your decisions to a minimum. Strong, clear rules make for easy implementation.

Minimal Code

With Penciller, you won't find a plethora of configuration options. Instead, you'll find a simple codebase that focuses on the basics, leaving room for you to build upon.

- select -
Option One
Option Two
Option Three
Option Four
0 64

Effortless Styling

Stylesheets have been painstakenly optimized so that they stay out of the way when you implement your design language.

For example, color variables use a minimal palette, based on pencil lead weights.

  • 4B
  • 2B
  • B
  • HB
  • H
  • 2H
  • 4H
  • Hazard
  • Go
  • Active


Use Penciller out-of-the-box or fork the source code and modify to suit your needs. Penciller's codebase follows best practices and is ready for production.

In the know.

Keep you notified of any Penciller updates?