SvelteKit Package
core-ui-blocks
Composite UI blocks — NavRail, CommandPalette, ChatWidget, FileTree, Editors
SvelteKit Ready UI
Block Components svelte
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<script>
import { NavRail, CommandPalette, StatGrid } from '@sbx/core-ui/components/blocks';
const navItems = [
{ icon: 'home', label: 'Dashboard', href: '/' },
{ icon: 'code', label: 'Development', href: '/dev' },
{ icon: 'server', label: 'Infrastructure', href: '/infra' },
];
const stats = [
{ label: 'Packages', value: 26, trend: '+3' },
{ label: 'Components', value: 120, trend: '+12' },
];
</script>
<NavRail items={navItems} active="/" />
<StatGrid {stats} />About
Mid-level Svelte 5 components that compose primitives into functional UI blocks. Includes navigation (NavRail, Dock), content editing (ActivityEditor, ArticleEditor), data display (StatGrid, FileTree), and interactive panels (CommandPalette, ChatWidget). Each block has a co-located .presenter.ts fixture file for storybook-style rendering.
Public API
| Name | Kind | Signature |
|---|---|---|
| NavRail | type | NavRail.svelte — items, active, collapsed, onnavigate |
| CommandPalette | type | CommandPalette.svelte — commands, open, onselect |
| ChatWidget | type | ChatWidget.svelte — messages, onSend |
| ChatInput | type | ChatInput.svelte — placeholder, onsubmit |
| ChatMessage | type | ChatMessage.svelte — message, role, timestamp |
| FileTree | type | FileTree.svelte — nodes, selected, onselect |
| StatGrid | type | StatGrid.svelte — stats: {label, value, trend}[] |
| Dock | type | Dock.svelte — items, position |
| ActivityEditor | type | ActivityEditor.svelte — activity, onsave |
| ComponentCard | type | ComponentCard.svelte — component, onclick |
| GlobalSearch | type | GlobalSearch.svelte — scope, onresult |
| DictBadge | type | DictBadge.svelte — entry, variant |
| HistoryPanel | type | HistoryPanel.svelte — entries, onrevert |
| ProfileIdentity | type | ProfileIdentity.svelte — member, size |
| Tabs | type | Tabs.svelte — tabs, active, onchange |
Dependencies
Related Packages
core-ui-primitives SvelteKit Ready
Base UI primitives — Button, Input, Modal, Badge, Avatar, Tooltip, Select
svelte-5componentsprimitivesform-inputsdesign-system
13 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/blocks
svelte-5componentsnavigationeditorsdata-displaypresenter-driven