@aryagg/ui-kit

Svelte 5 component library for aryagg projects. Built with Tailwind v4 and @aryagg/theme.

Installation

npm install @aryagg/ui-kit

Peer dependency:

npm install svelte@^5

Usage

Import components directly from the package:

<script>
  import { Button, Input, Modal, Table } from '@aryagg/ui-kit';
</script>

<Button variant="primary" onclick={() => console.log('clicked')}>
  Save
</Button>

<Input label="Email" type="email" bind:value={email} />

Components

Button

<Button variant="primary">Submit</Button>
<Button variant="danger" disabled>Delete</Button>
<Button variant="ghost" size="sm">Cancel</Button>

Input

<Input
  label="Full Name"
  placeholder="Enter your name"
  bind:value={name}
  error="Name is required"
/>

Modal

<script>
  let open = $state(false);
</script>

<Button onclick={() => open = true}>Open</Button>

<Modal bind:open title="Confirm Action">
  <p>Are you sure?</p>
  <Button onclick={() => open = false}>Close</Button>
</Modal>

Table

<script>
  import type { TableColumn } from '@aryagg/types';

  const columns: TableColumn[] = [
    { key: 'name',  label: 'Name',   sortable: true },
    { key: 'email', label: 'Email' },
  ];

  const rows = [
    { name: 'Alice', email: '[email protected]' },
    { name: 'Bob',   email: '[email protected]' },
  ];
</script>

<Table {columns} {rows} />

Toast / Snackbar

<script>
  import { showToast } from '@aryagg/ui-kit';
  import { ESnackType } from '@aryagg/types';
</script>

<Button onclick={() => showToast({ message: 'Saved!', type: ESnackType.SUCCESS })}>
  Save
</Button>

Styling

The ui-kit relies on @aryagg/theme. Import it once in your app's entry CSS:

@import "@aryagg/theme";

Developing

npm run dev

Everything inside src/lib is part of the library. src/routes is the showcase/preview app.

Building

npm run build

Source

github.com/iron-throne/skeleton-packages/tree/main/packages/ui-kit