wireframe-ui - Wireframe Components for Rapid Prototyping

Installation

Install components via CLI, just like shadcn/ui

Prerequisites

wireframe-ui is built on top of shadcn/ui. Make sure you have a Next.js project with shadcn/ui configured.

1. Initialize shadcn/ui (if not already done)

npx shadcn@latest init

2. Add wireframe components

npx shadcn@latest add https://wireframe-ui.com/r/text.json

Replace "text" with any component name from the registry

Install Multiple Components

npx shadcn@latest add https://wireframe-ui.com/r/text.json https://wireframe-ui.com/r/button.json https://wireframe-ui.com/r/card.json

Install Blocks

Pre-built complex layouts like login forms, dashboards, and pricing pages

npx shadcn@latest add https://wireframe-ui.com/r/blocks/login-form.json

Start prototyping in minutes

Basic Usage

1. Import wireframe components

import { Text } from '@/components/ui/text'
import { Card, CardHeader, CardTitle } from '@/components/ui/card'

2. Use in your components

<Card>
  <CardHeader>
    <CardTitle>
      <Text width="md" />
    </CardTitle>
  </CardHeader>
</Card>

3. Migrate to production

<Card>
  <CardHeader>
    <CardTitle>
      {title}
    </CardTitle>
  </CardHeader>
</Card>

Component Library

Browse all 40+ wireframe components with live examples

Blocks

Pre-built complex layouts ready to install

Migration Guide

Learn how to convert wireframes to production code

Comparison

Technical comparison with shadcn/ui Skeleton

Optimized documentation for AI assistants and LLMs

llms.txt

Machine-readable documentation following the llms.txt standard for better AI integration

Comprehensive AI-friendly documentation that helps LLMs understand and work with wireframe-ui components more effectively.

Registry Structure

wireframe-ui follows the shadcn/ui registry format

All components are available at:

https://wireframe-ui.com/r/[component-name].json

TypeScript Support

Full TypeScript support with type definitions

All components are written in TypeScript and include complete type definitions for better developer experience.

Styling

Built with Tailwind CSS and CSS variables

Components use the same theming system as shadcn/ui, making them fully customizable through CSS variables.