Spartan UI Showcase

Discover the most important building blocks for your Angular applications and link to the official documentation.

Custom Feature Implementations

Real-world examples of combining Spartan/ui components into complex feature dashboards.

IoT Cockpit

Monitoring and control for connected device fleets.

Home Automation

Centralized smart home management dashboard.

Resources Management

Personnel, workspace, and AI infrastructure oversight.

Task List

Management of research and development tasks.

Fundamental Components

Button

Helm

Essential for user interactions with various styles and sizes.

Badge

Helm

Visual indicators for status, count, or categories.

StatusNewLabel

Used in:

IoT Cockpit

Card

Helm

A versatile container for grouping related content.

Input

Helm

The primary way to capture user text input.

Used in:

Task List

Label

Helm

Accessible labels for form controls.

Separator

Helm

Visual line for separating sections of content.

Used in:

IoT Cockpit

Complex & Interactive

Accordion

Brain + Helm

Collapsible sections to manage vertical space.

Content goes here.

Tabs

Brain + Helm

Organize content into different views.

Table

Helm

Structured display of data in rows and columns.

ItemVal
A1

Used in:

Task List

Scroll Area

Brain + Helm

Custom scrollbars for consistent cross-browser styling.

Long content that needs scrolling... 1 2 3 4 5 6 7 8 9 10

Used in:

IoT Cockpit

Progress

Brain + Helm

Visual indicator for task completion or values.

60% Complete

Switch

Brain + Helm

A toggle control for binary state management.

Used in:

IoT Cockpit

Build your own library

Spartan/ui provides the perfect foundation. Use the components as primitives and style them to match your brand.