PigUI — Svelte 5 component library

Button

import { Button } from 'pigui'

Four variants across three sizes, with optional icons and a round icon-only mode.

Variants

Sizes

Icons & states

Badge

import { Badge } from 'pigui'

Compact labels that share the variant and status palettes.

Variants & statuses

primarysecondarytertiarylinkdangersuccesswarninginfo

Sizes

smmdlg

Loader

import { Loader } from 'pigui'

A minimal spinner for pending states.

Progress

import { Progress } from 'pigui'

A determinate progress bar in every status color and size.

Input

import { Input } from 'pigui'

Text, number (with decimals and separators), and password fields.

Select

import { Select } from 'pigui'

A native select styled with the token palette. Value: md.

Card

import { Card } from 'pigui'

Wraps arbitrary content in a themed surface with a border and rounded corners.

Card title

Cards wrap arbitrary content in a themed surface with a border and rounded corners.

ButtonGroup

import { ButtonGroup } from 'pigui'

Segments a set of related buttons into a single bordered control.

CopyButton

import { CopyButton } from 'pigui'

A button that runs a copy action and flips to a checkmark for feedback.

Alert

import { Alert } from 'pigui'

Inline status messages, optionally dismissible via onClose.

Heads up

This is an informational message.

Saved

Your changes have been saved.

Careful

This action may have side effects.

Error

Something went wrong — this alert can be dismissed.

Tooltip

import { Tooltip } from 'pigui'

Hover or focus a target to reveal a positioned tooltip.

Tabbar

import { Tabbar } from 'pigui'

A segmented tab control. Bound value: home.

Breadcrumbs

import { Breadcrumbs } from 'pigui'

A trail of links with a configurable separator.

Pagination

import { Pagination } from 'pigui'

Page controls with a customizable label. Current page: 3.

Page: 3 / 10

Modal

import { Modal } from 'pigui'

A general-purpose overlay with a built-in close button and backdrop dismiss.

Dialog

import { Dialog } from 'pigui'

A focused confirm/cancel prompt for destructive actions.

Popover

import { Popover } from 'pigui'

Arbitrary content anchored to a trigger, dismissed on outside click or Escape.

Popover

Click outside or press Escape to dismiss.

Dropdown

import { Dropdown } from 'pigui'

A menu of actions anchored to a trigger, with disabled items and placement control.

Floating

import { Floating } from 'pigui'

The positioning primitive behind Dropdown/Popover — anchor any content with the native popover API.

Anchored to the button with the native popover API.

Navbar

import { Navbar } from 'pigui'

A responsive top bar with brand, nav, and actions snippets — it powers the header of this page.

PigUI

Toast

import { showToast, ToastContainer } from 'pigui'

Fire transient notifications from anywhere with showToast(). Render one ToastContainer at the app root.

SearchSelect

import { SearchSelect } from 'pigui'

A filterable combobox. Value: —.

DateSelector

import { DateSelector } from 'pigui'

An inline calendar for choosing a date. Value: 2026-07-15.

January 1970

Mon

Tue

Wed

Thu

Fri

Sat

Sun

TimeSelector

import { TimeSelector } from 'pigui'

An inline stepped time list. Value: 14:30.

DatePicker

import { DatePicker } from 'pigui'

A text field with a calendar popover. Value: 2026-07-15.

January 1970

Mon

Tue

Wed

Thu

Fri

Sat

Sun

TimePicker

import { TimePicker } from 'pigui'

A time field with a stepped dropdown. Value: 14:30.

Accordion

import { Accordion } from 'pigui'

Collapsible sections, optionally exclusive so only one stays open.

What is PigUI?

A Svelte 5 component library themed entirely by Tailwind CSS semantic tokens.

How is it themed?

Every color comes from a semantic token defined in theme.css.

Does it support dark mode?

Yes — tokens use light-dark(), so the color-scheme property switches the palette.

Table

import { Table } from 'pigui'

A sortable, editable data table with an optional summary row. Edit a cell or delete a row below.








Total		423.00

6 rows

Per Page