Skip to main content

​
Introduction to Popui

Popui is a comprehensive Svelte component library built with Svelte 5 and Tailwind CSS. Originally created for Console UI and Invopop applications, it provides a complete set of production-ready UI components with a cohesive design system.

​
What is Popui?

Popui offers a rich collection of reusable UI components that follow modern design principles and accessibility best practices. The library is built on top of Svelte 5’s latest features, providing exceptional performance and developer experience.

Built for Modern Development

Popui leverages Svelte 5’s runes and reactivity system, providing a cutting-edge development experience with excellent TypeScript support.

​
Key Features

Svelte 5 Native

Built with Svelte 5’s latest features including runes, snippets, and improved reactivity

Tailwind Powered

Styled with Tailwind CSS 4+ with a complete design system and theme configuration

Comprehensive Components

Over 60+ components including forms, tables, navigation, feedback, and data visualization

TypeScript First

Full TypeScript support with comprehensive type definitions for all components

Accessible

Built with accessibility in mind, following WAI-ARIA guidelines

Themeable

Customizable design tokens and theme configuration to match your brand

​
Component Categories

Popui organizes components into logical categories:

​
Form Components

  • InputText - Text input with label, error states, and validation
  • InputTextarea - Multi-line text input
  • InputSelect - Dropdown select component
  • InputCheckbox - Checkbox with label support
  • InputRadio - Radio button groups
  • InputToggle - Toggle switch component
  • InputSearch - Search input with icon
  • DatePicker - Date selection with calendar

​
Buttons & Actions

  • BaseButton - Primary button with multiple variants (primary, outline, ghost, danger)
  • ButtonFile - File upload button
  • ButtonSearch - Search trigger button
  • ButtonUuidCopy - Copy UUID to clipboard

​
Data Display

  • DataTable - Feature-rich data table with sorting, filtering, and pagination
  • Table - Basic table components (Table, TableRow, TableCell, etc.)
  • DataListItem - List item component for data lists
  • CardRelation - Relational data card
  • MenuItem - Navigation menu item
  • MenuItemCollapsible - Collapsible menu item with children
  • Breadcrumbs - Breadcrumb navigation
  • Tabs - Tab navigation (Tabs, TabsList, TabsTrigger, TabsContent)

​
Feedback & Notifications

  • Notification - Toast notification component
  • Toaster - Toast notification container
  • AlertDialog - Modal dialog for confirmations
  • EmptyState - Empty state placeholder

​
Layout & Structure

  • BaseCard - Card container with header, content, and footer
  • CardCheckbox - Card with checkbox selection
  • DrawerContext - Context drawer with items
  • SeparatorHorizontal - Horizontal separator line

​
Status & Indicators

  • StatusLabel - Status badge component
  • TagStatus - Status tag with variants
  • TagProgress - Progress tag indicator
  • TagSearch - Search tag component
  • ProgressBar - Linear progress indicator
  • ProgressBarCircle - Circular progress indicator

​
Utilities

  • Tooltip - Tooltip with trigger and content
  • Skeleton - Loading skeleton components
  • ProfileAvatar - User avatar component
  • BaseFlag - Country flag component
  • UuidCopy - UUID display with copy functionality

​
Design System

Popui includes a complete Tailwind theme that you can import into your projects: 
@import "@invopop/popui/tailwind.theme.css";
This provides access to:
  • Carefully crafted color palette with semantic naming
  • Typography scale and font configuration
  • Spacing and sizing tokens
  • Border radius and shadow utilities
  • Responsive breakpoints
The theme is designed to work seamlessly with Tailwind CSS 4+ and can be customized to match your brand identity.

​
Interactive Examples

All components are documented in the Popui Storybook, which provides:
  • Live interactive examples
  • Prop documentation
  • Code snippets
  • Visual testing for all component states

​
Next Steps

Installation

Get started by installing Popui in your project

Quick Start

Build your first component in minutes

​
Open Source

Popui is open source and available on GitHub. Contributions are welcome!
The Go library has been moved to a separate repository at github.com/invopop/popui.go

Build docs developers (and LLMs) love

Get started for freeTalk to us