Skip to content

aguiarsc/wireframe-ui

Repository files navigation

wireframe-ui

Wireframe in code. Ship with confidence.

Skip Figma. Build mockups directly in your IDE with copy-paste wireframe components. You're a developer, not a designer—prototype in the same place you build. Wireframe-first components with no real text, just clean placeholders for rapid layout iteration.

Why Wireframe UI?

  • Wireframe-First: Every component is designed for prototyping, not production UI
  • No Text Required: All components use placeholder elements—no lorem ipsum needed
  • Composition Primitives: Build complex layouts from simple, reusable patterns
  • Developer-Friendly: Copy-paste components that work in your existing React + Tailwind setup
  • Open Source: MIT licensed, built on shadcn/ui and Radix UI primitives and styled with beautiful icons from pqoqubbw.dev

Installation

npx shadcn@latest add https://wireframe-ui.vercel.app/r/text

Browse all components at wireframe-ui.vercel.app

Features

  • Wireframe-first primitives with placeholder content
  • Composition components for common layout patterns
  • Built on Radix UI and Tailwind CSS
  • Compatible with shadcn/ui projects
  • MIT licensed

Component Categories

Primitives: Text, Heading, Paragraph, ListGroup, Media, Stack, Section

Layout: Card, Table, Tabs, Accordion, Collapsible, Separator, Empty State

Forms: Input, Textarea, Select, Checkbox, Switch, Slider, Label, Form, Field

Navigation: Breadcrumb, Pagination, Menubar, Sidebar

Overlays: Dialog, Drawer, Sheet, Tooltip, Hover Card, Context Menu

Display: Avatar, Badge, Alert, Chart, Carousel, Item, Button Group

Actions: Button, Toggle

All components include wireframe helper variants for rapid prototyping.

License

MIT