@0code/ui

@0code/ui

Official UI component library for UpCode by 0Code.

Svelte 5 components for building beautiful, accessible interfaces.

Installation

npm install @0code/ui
# or
pnpm add @0code/ui
# or
yarn add @0code/ui

Usage

import { Button, Modal, Icon, LoadingSpinner } from '@0code/ui';
import '@0code/ui/theme/default.css';

Example

<script lang="ts">
  import { Button, Modal, modalManager } from '@0code/ui';
  import { mdiCheck } from '@mdi/js';
  
  function showModal() {
    modalManager.show(Modal, {
      title: 'Hello UpCode!',
      onConfirm: () => console.log('Confirmed')
    });
  }
</script>

<Button color="primary" leadingIcon={mdiCheck} onclick={showModal}>
  Open Modal
</Button>

Available Components

Layout

• AppShell, AppShellHeader, AppShellSidebar
• Container, Stack, HStack, VStack
• Scrollable

Forms

• Input, PasswordInput, Textarea
• Select, MultiSelect
• Checkbox, Switch
• Label, Field, HelperText

Buttons & Navigation

• Button, IconButton, CloseButton
• Link, NavbarItem, NavbarGroup

Feedback

• Alert, LoadingSpinner
• Modal, ModalHeader, ModalBody, ModalFooter
• ConfirmModal

Display

• Avatar, Card, CardHeader, CardBody, CardFooter
• Icon, Logo
• Text, Heading, Code, CodeBlock
• Kbd, Badge, SupporterBadge
• FormatBytes

Utilities

• ThemeSwitcher, CommandPalette
• SiteMetadata, SiteFooter

Services

• modalManager - Global modal management
• commandPaletteManager - Command palette system
• themeStore - Theme switching (light/dark)
• translationStore - i18n support

Theming

Import the default theme:

import '@0code/ui/theme/default.css';

Or customize with Tailwind CSS (requires Tailwind v4.1+):

// tailwind.config.js
export default {
  content: [
    './src/**/*.{html,js,svelte,ts}',
    './node_modules/@0code/ui/**/*.{svelte,js}'
  ]
};

TypeScript Support

Fully typed with TypeScript declarations included.

import type { ButtonProps, ModalProps } from '@0code/ui';

Peer Dependencies

• svelte: ^5.0.0

Features

• 🎨 Tailwind CSS - Utility-first styling
• 🌙 Dark mode - Built-in theme switching
• ♿ Accessible - ARIA-compliant components
• 📦 Tree-shakeable - Import only what you need
• 🔒 Type-safe - Full TypeScript support
• 🚀 Svelte 5 - Built with latest Svelte features

Documentation

For full documentation and examples, visit: https://upcode.0code.uk/docs

License

AGPL-3.0 © 0Code