wireframe-ui - Wireframe Components for Rapid Prototyping

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/accordion.json

Alert

Displays a callout for user attention with optional icon and variant styles.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/alert.json

Avatar

An image element with a fallback for representing the user.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/avatar.json

Badge

Displays a badge or a component that looks like a badge with multiple variants.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/badge.json

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/breadcrumb.json

Button

Displays a button or a component that looks like a button with multiple variants and sizes.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/button.json

Button Group

A button group component with wireframe helper for text labels.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/button-group.json

Card

A container for displaying content with header, footer, and action sections.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/card.json

Carousel

A carousel component with wireframe helper for slide content.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/carousel.json

Chart

Chart components with wireframe placeholder helper.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/chart.json

Checkbox

A control that allows the user to toggle between checked and not checked.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/checkbox.json

Collapsible

An interactive component which expands/collapses a panel.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/collapsible.json

Context Menu

A context menu component with wireframe helpers for menu items.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/context-menu.json

Dialog

A modal dialog that interrupts the user with important content and expects a response.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/dialog.json

Drawer

A panel that slides out from the edge of the screen with support for multiple directions.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/drawer.json

Empty State

An empty state component with wireframe helpers.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/empty.json

Heading

A composition component that renders appropriately sized Text based on heading level (1-6).

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/heading.json

Hover Card

For sighted users to preview content available behind a link.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/hover-card.json

Input

A text input field with support for various types and validation states.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/input.json

Input Group

An input group component for combining inputs with addons.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/input-group.json

Item

A flexible item component for lists with wireframe helpers.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/item.json

Kbd

Displays keyboard shortcuts or keys with proper styling.

⌘⇧⌥⌃⌘+K

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/kbd.json

Label

Renders an accessible label associated with form controls.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/label.json

ListGroup

A composition component that renders list items with Text placeholders for wireframe prototyping.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/list-group.json

Media

A container for displaying images, videos, and audio with loading states and fallback placeholders.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/media.json

Menubar

A visually persistent menu common in desktop applications with nested menus and items.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/menubar.json

Pagination

Pagination with page navigation, next and previous links.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/pagination.json

Paragraph

A composition component that renders multiple Text lines to simulate paragraph content.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/paragraph.json

Section

A composition component with preset variants for common layout patterns (hero, content-two-column, feature-grid).

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/section.json

Select

Displays a list of options for the user to pick from with keyboard navigation support.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/select.json

Separator

Visually or semantically separates content with horizontal or vertical orientation.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/separator.json

Sheet

A slide-out panel component with wireframe helpers.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/sheet.json

Sidebar

A composable sidebar component with wireframe helpers for navigation.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/sidebar.json

Slider

An input where the user selects a value from within a given range.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/slider.json

Sonner

An opinionated toast component for React with beautiful animations and icons.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/sonner.json

Stack

A layout primitive for arranging wireframe elements with configurable spacing and direction.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/stack.json

Switch

A control that allows the user to toggle between checked and unchecked states.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/switch.json

Table

A data table component with wireframe helpers for headers and cells.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/table.json

Tabs

A set of layered sections of content with tab triggers for switching between them.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/tabs.json

Text

A wireframe text placeholder with animation and emphasis variants for rapid prototyping.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/text.json

Textarea

A multi-line text input field with auto-resizing support.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/textarea.json

Toggle

A two-state button that can be either on or off with multiple variants.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/toggle.json

Tooltip

A popup that displays information related to an element when focused or hovered.

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/tooltip.json