SvelteKit Package

core-ui-primitives

Base UI primitives — Button, Input, Modal, Badge, Avatar, Tooltip, Select

SvelteKit Ready UI

Primitive Components svelte

<script>
  import { Button, Input, Badge, Modal } from '@sbx/core-ui/components/primitives';
  let open = $state(false);
</script>

<Button variant="primary" onclick={() => open = true}>Open Modal</Button>
<Badge color="green">Active</Badge>
<Input placeholder="Search..." oninput={handleSearch} />

<Modal {open} title="Confirm" onclose={() => open = false}>
  <p>Are you sure?</p>
  <Button variant="danger" onclick={confirm}>Delete</Button>
</Modal>

About

Foundation-level Svelte 5 components used across all SBX applications. Includes form inputs, interactive elements, and display primitives. All components use $props() rune pattern, CSS custom property theming, and presenter-driven fixtures.

Public API

Name	Kind	Signature
Button	type	Button.svelte — variant, size, disabled, onclick
Input	type	Input.svelte — value, placeholder, type, oninput
Modal	type	Modal.svelte — open, title, onclose
Badge	type	Badge.svelte — color, size, label
Avatar	type	Avatar.svelte — src, alt, size
Icon	type	Icon.svelte — name, size, color
IconButton	type	IconButton.svelte — icon, label, onclick
Select	type	Select.svelte — options, value, onchange
Tooltip	type	Tooltip.svelte — content, position
MoneyInput	type	MoneyInput.svelte — value, currency, locale
MoneyDisplay	type	MoneyDisplay.svelte — amount, currency
SocialIcon	type	SocialIcon.svelte — platform, url
InitialsAvatar	type	InitialsAvatar.svelte — name, size

Dependencies

Imported By (2)

core-ui-blocks SvelteKit Ready

Composite UI blocks — NavRail, CommandPalette, ChatWidget, FileTree, Editors

svelte-5componentsnavigationeditorsdata-displaypresenter-driven

15 exports 2 deps

core-ui-sections SvelteKit Ready

Page sections & layouts — AdminTemplate, ContentSidebar, EntityDetail, Canvas

svelte-5layoutsidebarentity-vieweradmin-templatecanvas

16 exports 2 deps

Source

@sbx/core-ui/components/primitives

svelte-5componentsprimitivesform-inputsdesign-system