SWAT UI Showcase

This page demonstrates the various UI components and utilities available in the SWAT framework.

Theme Toggle: Click the "Toggle Theme" button in the top-right to switch between light and dark modes. Your preference is automatically saved using SWAT's StorageAdapter and will persist between page visits.

Typography & Status Utilities

SWAT provides utility classes for status-based styling. Apply .danger, .warn, .info, or .success to any element for consistent color theming that adapts to light/dark modes.

Danger Heading 1

Warn Heading 1

Info Heading 1

Success Heading 1

Normal Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph of text. It can contain inline code snippets.

This is muted text, for less important information.

Danger Section

Status utility classes can be applied to containers for themed backgrounds. This card uses class="card danger".

This is muted text, for less important information.

Warning Section

Combine status classes with other components: class="btn warn" creates warning-themed buttons.

This is muted text, for less important information.

Info Section

Status classes work with any element - headings, paragraphs, or custom components.

This is muted text, for less important information.

Success Section

All status colors automatically adapt when switching between light and dark themes.

This is muted text, for less important information.

Form Elements

SWAT provides styled form components that automatically adapt to themes. Combine button classes with status utilities for themed actions.

Wide Form Group

CSS Utilities

SWAT includes comprehensive utility classes for rapid UI development. These classes follow consistent naming patterns and work with the theme system.

Spacing

Use margin and padding utilities (.m-1 through .m-5, .p-1 through .p-5) for consistent spacing. Directional variants like .mt-3 (margin-top) are also available.

.p-2 .border .m-1
.p-3 .m-2 .text-center
.p-4 .m-3

Display & Layout

Control layout with display utilities (.d-flex, .d-block) and flexbox helpers (.justify-content-center, .align-items-center, .flex-column).

Flex item 1
Flex item 2
Flex item 3

This text is centered using .text-center

Column item 1
Column item 2

Text Styling

Style text with alignment (.text-center, .text-right), transformation (.text-uppercase, .text-lowercase), and weight utilities (.font-weight-bold).

This text is uppercase and bold

THIS TEXT IS LOWERCASE

this text is capitalized

Sizing

Set element dimensions with width and height utilities (.w-25, .w-50, .h-100).

25% width
50% width
25% width

Borders

Add borders with .border and directional variants (.border-top, .border-bottom). Control border radius with .border-radius-sm, .border-radius, .border-radius-lg.

Normal border
Top border only
Large border radius

Position & Visibility

Control element positioning (.position-relative, .position-absolute) and visibility (.invisible hides but keeps space, .sr-only for screen readers).

Relative positioned container
Absolutely positioned
Visible text More visible text

Charts

SWAT provides canvas-based charting components. Import LineChart, BarChart, and PieChart from ./lib/canvas-charts.js and initialize with container elements and data.

Line Chart

Bar Chart

Pie Chart

Table Component

SWAT includes a sortable table component. Import createTable from ./lib/table-component.js and pass column definitions and row data to generate interactive tables. Tables automatically take full width with proper spacing and borders.