Styles and UI Kits
Pencil includes a growing library of pre-built design kits so you can start designing with real, production-quality components from the very first click. Instead of rebuilding common UI patterns from scratch, pick a kit that matches your project's visual language and begin assembling screens immediately.
Available Design Kits
Shadcn UI
A hugely popular collection of beautifully designed React components built on Radix UI and Tailwind CSS. Pencil ships with full Shadcn UI support, giving you access to buttons, dialogs, form controls, data tables, and dozens more production-ready primitives.
Halo
A modern design system focused on clean aesthetics and fluid interactions. Halo provides a curated set of layout patterns, typography presets, and animated components that work seamlessly inside Pencil’s canvas.
Lunaris
A comprehensive design system built for consistency at scale. Lunaris includes a full token library, responsive grid helpers, and a rich component catalog ranging from navigation bars to complex dashboard widgets.
Nitro
A performance-oriented design system that emphasises speed and minimal footprint. Nitro’s components are lightweight by default, making them ideal for landing pages, marketing sites, and any project where load time is critical.
Ready-to-Use Components
Each kit provides a comprehensive set of components for common UI patterns you encounter every day—buttons, inputs, modals, cards, navigation menus, data tables, and more. Components are fully customisable inside Pencil's visual editor: adjust colors, spacing, typography, and responsive behaviour without writing a single line of code.
Because every kit is built on standard React and Tailwind CSS, the code Pencil exports is clean, idiomatic, and easy to extend in your own codebase after export.
Video Tutorial
Watch the walkthrough below to see how to browse, add, and customise design kit components inside Pencil.
Video tutorial will be embedded here
Last updated: February 22, 2026