@promptlyapp/components

Svelte 5 UI kit for Promptly mini-apps: AppShell, Scaffold, NavStack, Header, BottomTabs, Card, ListRow, LeaderboardRow, Avatar, Button, IconButton, Input, Textarea, Select, Toggle, Checkbox, SegmentedControl, Badge, Chip, ProgressBar, StatTile, SectionHeader, Divider, EmptyState, Spinner, Skeleton, Modal, Sheet, Toast, GameCanvas.

Every component styles itself exclusively with the --promptly-* design tokens the Promptly host injects, so light and dark theming is automatic and apps look native to the host. Touch targets are 44px or larger throughout.

npm install @promptlyapp/components

Not on the public npm registry yet. The first release has not been published, so that command answers E404 Not Found today. Until it lands, build a tarball from a checkout: Install in the repository README has the four commands, and everything below is identical either way.

This package ships Svelte components, so it requires a Svelte-aware build. Its exports are .svelte files: Vite with @sveltejs/vite-plugin-svelte, SvelteKit, or any bundler running the Svelte compiler. Importing it from plain Node, with no Svelte plugin in the pipeline, fails with ERR_UNKNOWN_FILE_EXTENSION on a .svelte file. That is expected, not a bug. Its companion, @promptlyapp/sdk, is plain TypeScript and does load under plain Node.

svelte is a peer dependency (^5.0.0): install it alongside.

Usage

<script lang="ts">
  import { AppShell, Header, Card, Button, Toast, toast } from "@promptlyapp/components";
</script>

<AppShell>
  {#snippet header()}<Header title="Weekly scores" />{/snippet}
  <Card>Anything.</Card>
  <Button block onclick={() => toast("Saved", { kind: "success" })}>Save</Button>
</AppShell>
<Toast />

AppShell and Scaffold are one viewport tall with their chrome pinned to the screen edges, so the page itself never scrolls: scroll the <main> element, not window.

Development, the component catalogue and the design-token contract are documented in the repository README.

Licence

MIT.