Every Pelagic UI package

One package with every target: components for each framework, charts, 3D, icons, illustrations, the theme engine, motion and sound. Framework packages are optional peers, so you only pull in what you import.

Version

0.1.0

Download size

624 kB

Unpacked

2.8 MB

License

MIT

Peer dependencies

react · vue · @angular/core · svelte · astro · react-native · three · (all optional)

import 'pelagic/style.css';
import { Button, DataTable, swal } from 'pelagic/react';
import { SearchIcon } from 'pelagic/icons/react';
import { createTheme, applyCustomTheme } from 'pelagic/core/theme';

applyCustomTheme(createTheme({ primary: '#ff6a00' }));

Export paths

The full catalogue: forms, advanced inputs, DataTable, overlays, menus, media, charts, motion, Wizard, swal and toasts. Every widget follows its WAI-ARIA pattern and is tested with axe.

Version

0.1.0

Download size

182 kB

Unpacked

749 kB

License

MIT

Peer dependencies

react ^18 || ^19 · react-dom

import '@pelagic-ui/core/style.css';
import { Button, Input, toast, Toaster } from '@pelagic-ui/react';

export function App() {
  return (
    <>
      <Input label="Project name" defaultValue="pelagic-app" />
      <Button onClick={() => toast.success('Deployed')}>Deploy</Button>
      <Toaster />
    </>
  );
}

Export paths

Composition-API components with v-model on every input, typed props and slots for custom cells, empty states and footers.

Version

0.1.0

Download size

17 kB

Unpacked

93 kB

License

MIT

Peer dependencies

vue ^3.4

<script setup lang="ts">
import '@pelagic-ui/core/style.css';
import { ref } from 'vue';
import { Button, Input, Switch } from '@pelagic-ui/vue';
const name = ref('pelagic-app');
const previews = ref(true);
</script>

<template>
  <Input v-model="name" label="Project name" />
  <Switch v-model="previews" label="Preview deployments" />
  <Button>Deploy</Button>
</template>

Export paths

Standalone components and directives built on signals. Inputs implement ControlValueAccessor, so they work with reactive and template-driven forms.

Version

0.1.0

Download size

61 kB

Unpacked

359 kB

License

MIT

Peer dependencies

@angular/core 20–22 · @angular/common · @angular/forms

import { Component } from '@angular/core';
import { PELAGIC_UI } from '@pelagic-ui/angular';

@Component({
  selector: 'app-deploy',
  imports: [PELAGIC_UI],
  template: `
    <pl-input label="Project name" [(value)]="name" />
    <button plButton (click)="deploy()">Deploy</button>`,
})
export class DeployComponent {
  name = 'pelagic-app';
  deploy() {}
}

Export paths

Svelte 5 components written with runes. bind:value on every field, snippets for custom content, and actions for tooltips and focus traps.

Version

0.1.0

Download size

13 kB

Unpacked

42 kB

License

MIT

Peer dependencies

svelte ^5

<script lang="ts">
  import { Button, Input, Switch } from '@pelagic-ui/svelte';
  let name = $state('pelagic-app');
  let previews = $state(true);
</script>

<Input bind:value={name} label="Project name" />
<Switch bind:checked={previews} label="Preview deployments" />
<Button>Deploy</Button>

Export paths

Server-rendered components that ship no JavaScript unless they need it. Tabs, switches and dialogs hydrate with a few hundred bytes of script. This site is built with it.

Version

0.1.0

Download size

14 kB

Unpacked

41 kB

License

MIT

Peer dependencies

astro ^5

---
import '@pelagic-ui/core/style.css';
import ThemeScript from '@pelagic-ui/astro/components/ThemeScript';
import Button from '@pelagic-ui/astro/components/Button';
---
<html lang="en">
  <head><ThemeScript /></head>
  <body><Button>Deploy</Button></body>
</html>

Export paths

Native components with the same names and props as the web packages, driven by the same tokens. Screen-reader roles, 48dp targets and large-text support built in.

Version

0.1.0

Download size

13 kB

Unpacked

51 kB

License

MIT

Peer dependencies

react · react-native

import { PelagicProvider, Button, Input } from '@pelagic-ui/react-native';

export default function App() {
  return (
    <PelagicProvider mode="system" accent="violet">
      <Input label="Project name" defaultValue="pelagic-app" />
      <Button title="Deploy" onPress={deploy} />
    </PelagicProvider>
  );
}

Export paths

Widgets generated from the same token source as the web, so a Flutter app and a web app look the same. Semantics, 48×48 hit areas, reduced motion and RTL built in.

Version

0.1.0

Download size

—

Unpacked

194 kB

License

MIT

Peer dependencies

Flutter SDK ≥ 3.24 · Dart ≥ 3.5

import 'package:flutter/material.dart';
import 'package:pelagic_ui/pelagic_ui.dart';

void main() => runApp(const PelagicApp(title: 'Pelagic', home: Deploy()));

class Deploy extends StatelessWidget {
  const Deploy({super.key});
  @override
  Widget build(BuildContext context) => Column(children: [
        const PelagicInput(label: 'Project name'),
        PelagicButton(label: 'Deploy', onPressed: () {}),
      ]);
}

Export paths

Theme-aware three.js scenes: a globe, 3D charts, particles and a model viewer. They pause off-screen, render one still frame under reduced motion and fall back without WebGL.

Version

0.1.0

Download size

13 kB

Unpacked

46 kB

License

MIT

Peer dependencies

react · react-dom · three ≥ 0.160

import { Globe3D } from '@pelagic-ui/three';

<Globe3D
  label="Our offices"
  markers={[{ lat: 24.7, lng: 46.7, label: 'Riyadh' }]}
/>

Export paths

Original icons on a 24px grid in outline, duotone and solid. Tree-shakable named components for every framework, a web component and an SVG sprite. RTL-aware arrows.

Version

0.1.0

Download size

85 kB

Unpacked

594 kB

License

MIT

Peer dependencies

react · vue · svelte · @angular/core · astro · react-native-svg (optional)

import { SearchIcon, BellIcon } from '@pelagic-ui/icons/react';

<SearchIcon />
<BellIcon variant="duotone" size={20} title="Notifications" />

Export paths

24 original scenes — no data, no results, offline, 404, success and more — drawn with CSS variables so they recolor with every theme and brand color.

Version

0.1.0

Download size

27 kB

Unpacked

197 kB

License

MIT

Peer dependencies

react · vue · svelte · @angular/core · react-native-svg (optional)

import { EmptyState } from '@pelagic-ui/react';
import { NoResultsIllustration } from '@pelagic-ui/illustrations/react';

<EmptyState
  illustration={<NoResultsIllustration />}
  title="No results"
  description="Try a different search."
/>

Export paths

The foundation every package shares: design tokens, the CSS for all components, 21 themes, createTheme() for brand colors, accessibility display modes, the motion engine and the sound engine.

Version

0.1.0

Download size

202 kB

Unpacked

666 kB

License

MIT

Peer dependencies

none

import '@pelagic-ui/core/style.css';
import { applyTheme, createTheme, applyCustomTheme } from '@pelagic-ui/core/theme';
import { applyA11yPrefs } from '@pelagic-ui/core/a11y-prefs';

applyTheme({ mode: 'dark', accent: 'teal', shape: 'round' });
applyCustomTheme(createTheme({ primary: '#ff6a00' }));
applyA11yPrefs({ fontScale: 1.25, motion: 'reduce' });

Export paths

At a glance

Which package do you need? Pick by platform.

Sizes measured from the 0.1.0 build with npm pack; the Flutter size is the Dart source in lib/.