🔗 Quick Access
🧪 Components Demo
📅 ARS Calendar
Interactive calendar component for date selection and event management. Fully customizable with CSS styling.
ARS Calendar Demo →🎨 ARS Color Select
Customizable color picker component with predefined color palette. Features overlay interface and custom events.
ARS Color Select Demo →💬 ARS Dialog
Modal dialog component for user interactions. Supports custom content and styling with backdrop management.
ARS Dialog Demo →📄 ARS Page Router
Component-based router for web apps. Use with ars-page-controller for navigation. Supports remote-call mixin for decoupled navigation.
ARS Page Router Demo →🔄 ARS Data Roller
Animated data display component that cycles through arrays of information with smooth 3D rotation animations. Perfect for status updates, statistics, and dynamic content.
ARS Data Roller Demo →Form Primitives
Button and toggle controls. Buttons support variant, size, disabled, and loading states. Toggle provides boolean switch with keyboard support.
Form Primitives Demo →ARS Date Picker
Inline date selector with styled OK / Cancel buttons. Emits select and cancel events for declarative host integration.
ARS Date Picker Demo →ARS Input
Text input with label, validation feedback, clearable state, and prefix/suffix slots. Supports text, email, password, number, search, url, tel types.
ARS Input Demo →ARS Toast
Notification toast with severity levels, auto-dismiss, stacking, and programmatic API. Supports 6 positions and custom mount targets.
ARS Toast Demo →ARS Tabs
Tabbed navigation with 4 placement options, disabled tabs, keyboard navigation, and dynamic panel management.
ARS Tabs Demo →ARS Select
Dropdown select with search filtering, multiple selection, option groups, and keyboard navigation.
ARS Select Demo →ARS Table
Data table with sortable columns, row selection, virtual scrolling for large datasets, and custom cell rendering.
ARS Table Demo →ARS Info Tile
Structured information display tile for dashboards. Renders title, subtitle, accent header, and key-value properties.
ARS Info Tile Demo →ARS Chat Panel
Self-contained chat interface with message bubbles, text input, send button, typing indicator, and clear action. Supports user/assistant/system roles.
ARS Chat Panel Demo →ARS Toolbar
Application header bar with brand area, navigation pills, and status indicator. Responsive layout with active-item tracking.
ARS Toolbar Demo →ARS Property Editor
Dynamic key/value property editor with add/remove rows. Useful for metadata, config panels, and graph node property sheets.
ARS Property Editor Demo →ARS Badge
Compact status indicators for labels, counts, and states. Supports variants, sizes, pill shape, and status dots.
ARS Badge Demo →ARS Avatar
Circular and rounded image avatars with fallback initials. Supports multiple sizes, shapes, and image error handling.
ARS Avatar Demo →ARS FAB
Floating Action Button for primary actions. Supports variants, sizes, extended labels, and fixed positioning.
ARS FAB Demo →ARS Card
Versatile content container with header, media, body, actions, and footer slots. Supports interactive hover states.
ARS Card Demo →ARS Bottom Nav
Mobile-optimized bottom tab navigation bar with icon and label slots. Manages active state across child items.
ARS Bottom Nav Demo →ARS Image Upload
Drag-and-drop image uploader with preview thumbnails. Supports multiple files, size limits, and remove actions.
ARS Image Upload Demo →ARS Line Chart
Canvas-based line chart with multiple datasets, tooltips, and responsive sizing.
ARS Line Chart Demo →ARS Candlestick Chart
Financial candlestick chart with OHLC data rendering and responsive layout.
ARS Candlestick Demo →ARS Minimap
Compact canvas-based minimap for spatial overviews. Renders colored points for entity positions, heatmaps, or any 2D data.
ARS Minimap Demo →ARS Leaderboard
Sorted score table with auto-sorting, max entry limits, and optional row highlighting. Perfect for rankings and high-score displays.
ARS Leaderboard Demo →ARS Button
Styled, accessible button with 4 variants, 3 sizes, loading spinner, disabled state, and prefix/suffix icon slots.
ARS Button Demo →ARS Toggle
Switch/toggle control for boolean state with label positioning, disabled state, and keyboard support.
ARS Toggle Demo →ARS Panel
Surface container with padding presets and optional elevation shadow. Used as the default container for UI panels.
ARS Panel Demo →ARS Group
Flex layout container with direction and gap support. Used for row/column composition of child elements.
ARS Group Demo →ARS List
List container with optional item selection. Fires select events when items are clicked in selectable mode.
ARS List Demo →ARS Markdown
Self-contained Markdown renderer with built-in parser. Supports headings, code, links, lists, and inline formatting.
ARS Markdown Demo →ARS Relational Node
Structured information display for graph nodes. Re-exports ars-info-tile for backwards compatibility.
ARS Relational Node Demo →ARS Typed Property Editor
Type-aware property editor that renders the correct input widget (email, date, number, etc.) per property.
ARS Typed Prop Editor Demo →🔧 Mixins Demo
🎯 Pressed Effect
Add touch and mouse press animations to any element. Creates beautiful radial gradient effects for interactive feedback.
Pressed Effect Demo →🌍 Localized
Internationalization support for web components. Automatically translates content based on language settings using arslib integration.
Localized Demo →📡 Remote Call
Inter-component communication system. Allows components to call methods on other components through custom events without direct references.
Remote Call Demo →👆 Swipeable
Touch gesture support for web components. Detects swipe directions (up, down, left, right) and calls corresponding callback methods.
Swipeable Demo →🖱️ Draggable
Drag gesture support for web components. Detects drag start, move, and end events with customizable thresholds. Works seamlessly with other mixins using PointerCoordinator.
Draggable Demo →👁️ Show If Property
Conditional visibility based on property values. Shows or hides elements when specified properties change, perfect for dynamic interfaces.
Show If Property Demo →🔄 Roll Mixin
360° rotation animation on hover with configurable duration. Adds playful interactions to buttons, cards, or any element with automatic hover detection and programmatic control.
Roll Mixin Demo →🚀 Getting Started
📦 Installation
Install the package via npm:
📝 Usage Example
Import and use components in your project:
// In your HTML:
<ars-calendar localized_today="Today"></ars-calendar>
🔧 Development Server
To run this demo suite locally:
npm run dev
Use npm start when you want to serve the static demo build on port 8080 instead.
✨ Features
🎯 Pure JavaScript
No framework dependencies. Works with any modern web project, from vanilla JS to React, Vue, or Angular.
🎨 CSS-Friendly
Components are styling-agnostic. Use your own CSS classes and frameworks without conflicts.
⚡ ES Modules
Modern module system with proper imports/exports. Tree-shakeable and optimized for bundlers.
📱 Touch Support
Full mobile and desktop interaction support with touch events and responsive design considerations.