Wireframes | Component library for building wireframes and prototypes

Build wireframes faster and easier

Wireframes is an open source UI component library.
Fast, lightweight, and easy to extend.

Get started

Try Playground

Fast prototyping

Ready-to-use components for instant wireframes. No build tools or complex setup needed—just add and start designing.

Framework agnostic

Compatible with any JavaScript framework or plain HTML. Use it in React, Vue, Angular, or anywhere you want.

Open source

MIT licensed. Free forever. Community-driven, extensible, and always improving with your feedback.

Installation

Wireframes is a framework-agnostic Web Components library. Install it once and use its wf-* elements in plain HTML, React, Vue, Svelte, Next.js, and other projects.

Package

CDN

npm install wireframes

Import once in your application entry point to register the custom elements:

import 'wireframes';

<script type="module" src="https://cdn.jsdelivr.net/npm/wireframes/lib/index.js"></script>

Framework setup

Examples

NPM