Components
143 accessible components in 11 categories. Each page has live demos, a props summary, keyboard support and code you can copy. Change the theme from the header — every demo follows.
Form components
9 components
Advanced form inputs
20 components
Data components
11 components
Panels & layout
10 components
Overlays & utilities
13 components
Menus & navigation
10 components
Media & display
11 components
Feedback: alerts, toasts & loaders
16 components
Charts
15 components
3D & effects
15 components
Motion & flows
13 components
Theming in code
Every component reads the same design tokens. Switch mode, accent and shape at runtime or scope a theme to one section.
import { applyTheme, saveTheme } from '@pelagic-ui/react';
applyTheme({ mode: 'dark', accent: 'indigo', shape: 'round' });import { applyTheme } from '@pelagic-ui/vue';
applyTheme({ mode: 'hc' }); // high contrastimport { applyTheme } from '@pelagic-ui/svelte';
applyTheme({ mode: 'system', accent: 'rose' });<html data-theme="dark" data-accent="emerald" data-shape="sharp">
<!-- or scope a section: <section data-theme="dark"> --><PelagicProvider mode="system" accent="indigo">
<App />
</PelagicProvider>