Install Pelagic UI

npm i @pelagic-ui/react @pelagic-ui/core

// main.tsx
import '@pelagic-ui/core/style.css';

npm i @pelagic-ui/vue @pelagic-ui/core

// main.ts
import '@pelagic-ui/core/style.css';

npm i @pelagic-ui/svelte @pelagic-ui/core

// +layout.svelte
import '@pelagic-ui/core/style.css';

npm i @pelagic-ui/astro @pelagic-ui/core

---
// src/layouts/Layout.astro
import '@pelagic-ui/core/style.css';
import ThemeScript from '@pelagic-ui/astro/components/ThemeScript';
---
<head><ThemeScript /></head>

npm i @pelagic-ui/react-native @pelagic-ui/core

// App.tsx
import { PelagicProvider } from '@pelagic-ui/react-native';
export default () => <PelagicProvider mode="system" accent="teal">{/* app */}</PelagicProvider>;

npm i @pelagic-ui/angular @pelagic-ui/core

/* src/styles.css */
@import '@pelagic-ui/core/style.css';

<Button>Save</Button>
<Button variant="outline">Preview</Button>
<Button variant="danger" loading>Deleting</Button>

<Button>Save</Button>
<Button variant="outline">Preview</Button>
<Button variant="danger" loading>Deleting</Button>

<Button>Save</Button>
<Button variant="outline">Preview</Button>
<Button variant="danger" loading>Deleting</Button>

---
import Button from '@pelagic-ui/astro/components/Button';
---
<Button>Save</Button>
<Button variant="outline">Preview</Button>

<Button title="Save" />
<Button title="Preview" variant="outline" />
<Button title="Deleting" variant="danger" loading />

import { PlButton } from '@pelagic-ui/angular';

@Component({
  imports: [PlButton],
  template: `
    <button plButton>Save</button>
    <button plButton variant="outline">Preview</button>
    <button plButton variant="danger" [loading]="true">Deleting</button>`,
})
export class Actions {}

import { applyTheme, saveTheme } from '@pelagic-ui/react';
applyTheme({ mode: 'dark', accent: 'indigo', shape: 'round' });

import { applyTheme } from '@pelagic-ui/vue';
applyTheme({ mode: 'hc' }); // high contrast

import { 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>