Glance UI Core Components

A collection of essential UI components for Glance applications. This package provides a set of reusable components built with Svelte and styled with Tailwind CSS. The components follow Glance's design system.

Installation

npm install @glance-networks/ui-core-components

Usage

Basic Usage

<script>
  import { Button, Alert, TextInput } from '@glance-networks/ui-core-components';
</script>

<Button variant="primary">Button label</Button>
<Alert type="info">This is an alert</Alert>
<TextInput placeholder="Enter text..." />

Theme Configuration

To use the components, you need to set up the Glance UI theme in your Tailwind configuration. The package provides a preset that includes all necessary design tokens and styles:

// tailwind.config.js
import { Config } from '@glance-networks/ui-core-components/theme.js';

export default {
  presets: [Config],
  content: [
    "./node_modules/@glance-networks/ui-core-components/**/*.{html,js,svelte,ts}",
    // your app content configuration
  ],
  // Your custom theme configuration
  theme: {
    extend: {
      // Your custom extensions
    }
  }
};

This configuration will:

• Import Glance UI design tokens
• Set up the required color palette
• Configure typography styles
• Set up spacing and sizing scales
• Configure component-specific styles

Available Components

Alert

Displays important messages and notifications with different types (info, success, warning, error).

<Alert type="info" title="Information">
  This is an informational message
</Alert>

Button

Various button styles and variants for different use cases.

<Button
  variant="primary" // 'primary' | 'secondary' | 'tertiary' | 'clear' | 'error' | 'warning'
  size="medium"     // 'x-small' | 'small' | 'medium' | 'large'
  disabled={false}
  outline={false}
>
  Click me
</Button>

ComboTextField

Combined text input with dropdown functionality for enhanced user input.

<ComboTextField
  label="Select or type"
  options={['Option 1', 'Option 2']}
  placeholder="Choose or type..."
/>

GlanceLoader

Loading spinner with Glance branding for loading states.

<GlanceLoader size="12" />

Icon

Icon component with support for various icon sets.

<Icon name="placeholder" size="6" />

Label

Form label component for form inputs.

<Label for="input-id">Input Label</Label>

TextInput

Text input field with various states and validation.

<TextInput
  label="Username"
  placeholder="Enter username"
  disabled={false}
  error="Invalid input"
  required={true}
/>

Tooltip

Tooltip component for additional information.

<Tooltip text="Additional information">
  <span>Hover me</span>
</Tooltip>

Typography

Text components with consistent styling.

<Typography variant="h1">Heading 1</Typography>
<Typography variant="body20" weight="medium">Body text</Typography>

Dependencies

• Svelte ^4.2.12
• Tailwind CSS ^3.4.3
• @floating-ui/dom 1.6.3
• @iconify/svelte 4.2.0
• tailwind-merge ^2.3.0

License

See License file and https://ww2.glance.net/terms/ for Glance terms of service.