PigUI
A Svelte 5 component library themed entirely by Tailwind CSS
V4 semantic tokens. Override the tokens in one @theme block to reskin every
component — light and dark in one go.
Badge
import { Badge } from 'pigui'Compact labels that share the variant and status palettes.
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.
Card
import { Card } from 'pigui'Wraps arbitrary content in a themed surface with a border and rounded corners.
Cards wrap arbitrary content in a themed surface with a border and rounded corners.
Checkbox
import { Checkbox } from 'pigui'A checkbox that allows user to toggle an option.
Alert
import { Alert } from 'pigui'Inline status messages, optionally dismissible via onClose.
Tooltip
import { Tooltip } from 'pigui'Hover or focus a target to reveal a positioned tooltip.
Tabbar
import { Tabbar } from 'pigui'A segmented tab control that binds to the selected value.
Pagination
import { Pagination } from 'pigui'Page controls with a customizable label.
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.
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.
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.
DateSelector
import { DateSelector } from 'pigui'An inline calendar for choosing a date.
TimeSelector
import { TimeSelector } from 'pigui'An inline stepped time list.
DatePicker
import { DatePicker } from 'pigui'A text field with a calendar popover.
TimePicker
import { TimePicker } from 'pigui'A time field with a stepped dropdown.
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 data table with optional filtering, foldable columns, editing, and a summary row.
| Ada Lovelace | Engineer | 36.00 |
| Grace Hopper | Admiral | 85.00 |
| Alan Turing | Mathematician | 41.00 |
| Margaret Hamilton | Engineer | 88.00 |
| Katherine Johnson | Mathematician | 101.00 |
| Edsger Dijkstra | Professor | 72.00 |
| Ada Lovelace | Engineer | 36.00 | |
| Grace Hopper | Admiral | 85.00 | |
| Alan Turing | Mathematician | 41.00 | |
| Margaret Hamilton | Engineer | 88.00 | |
| Katherine Johnson | Mathematician | 101.00 | |
| Edsger Dijkstra | Professor | 72.00 |
| Ada Lovelace | Engineer | 36.00 | |
| Grace Hopper | Admiral | 85.00 | |
| Alan Turing | Mathematician | 41.00 | |
| Margaret Hamilton | Engineer | 88.00 | |
| Katherine Johnson | Mathematician | 101.00 | |
| Edsger Dijkstra | Professor | 72.00 |
| Total | 423.00 |
| Ada Lovelace | Engineer | 36.00 | ||
| Grace Hopper | Admiral | 85.00 | ||
| Alan Turing | Mathematician | 41.00 | ||
| Margaret Hamilton | Engineer | 88.00 | ||
| Katherine Johnson | Mathematician | 101.00 | ||
| Edsger Dijkstra | Professor | 72.00 | ||
| Selected: 0 | 0.00 |