Skip to main content

​
Beautiful UI Components for Svelte

70+ production-ready Svelte 5 components with built-in Tailwind CSS theming and comprehensive TypeScript support

​
Get Started

Installation

Install Popui in your Svelte project

Quickstart

Build your first UI with Popui components

​
Component Categories

Explore our comprehensive collection of UI components organized by functionality.

Form Components

Inputs, selects, checkboxes, toggles, and date pickers

Buttons

Buttons with multiple variants and built-in actions

Data Display

Tables, lists, avatars, and data visualization

Navigation

Breadcrumbs, menus, tabs, and search components

Feedback & Status

Alerts, notifications, progress bars, and status indicators

Layout

Cards, drawers, and structural components

​
Key Features

Built with Svelte 5

Leverage the latest Svelte features including runes and snippets

Tailwind CSS Theme

Customizable design system with built-in theme configuration

TypeScript First

Fully typed components with comprehensive prop interfaces

Accessible

WCAG compliant components built with accessibility in mind

Advanced Features

Drag-and-drop, data tables with sorting, and complex interactions

Storybook Ready

Explore all components in an interactive Storybook environment

​
Quick Example

Here’s how easy it is to use Popui components in your Svelte application: 
<script>
  import { InputText, BaseButton } from '@invopop/popui'
  
  let name = ''
  
  function handleSubmit() {
    console.log('Hello,', name)
  }
</script>

<form>
  <InputText
    label="Name"
    placeholder="Enter your name"
    bind:value={name}
  />
  
  <BaseButton
    variant="primary"
    onclick={handleSubmit}
  >
    Submit
  </BaseButton>
</form>

​
Theming & Customization

Tailwind Theme Configuration

Learn how to customize the Popui design system to match your brand

​
API Reference

Types & Interfaces

Explore the complete TypeScript API documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us