Components

The Luaris framework includes a growing library of reusable UI components built with Vue 3 and TypeScript. These components are designed to work seamlessly with the design system and provide a consistent user experience across applications.

WARNING

Unfortunately, Vitepress adds a lot of overhead styles to the page which can interfere with the appearance of the components, so if you notice classes being added to elements, this may be purely for documentation purposes and avoiding conflicting styles.

• Legend
• Component List

Legend

• ❌ = Not started
• 🚧 = In progress
• ✅ = Completed

Component List

The below table describes the current status of each planned component in the library, with links to their documentation pages where available. This list is not exhaustive and will continue to grow as new components are added.

Status	Component	Description
✅	Accordion	A component for displaying collapsible content sections, allowing users to expand and collapse information as needed.
✅	Alert	A component for displaying important messages or notifications to users, with support for different types (success, error, warning, info) and optional dismiss functionality.
❌	App	The root layout component for the application, providing a consistent structure and context for all pages and components, including built-in support for accessibility features, toasts, and global state management.
✅	Avatar	A component for displaying circular user profile images with initials and icon fallbacks.
✅	Badge	A small badge component for displaying counts, statuses, or labels.
❌	Breadcrumbs	A navigation component that displays the user's current location within the app's hierarchy and allows them to easily navigate back to previous levels.
✅	Button	A versatile and customizable button component for various actions in your application.
❌	Calendar	An interactive calendar component that supports multiple views (month, year, decade) and range selection, with optional support for calendar events.
✅	Card	A card component for displaying content in a structured and visually appealing way.
🚧	Carousel	A component for displaying paged image sequences with token-based controls, dots, and lightweight virtualization.
❌	Checkbox	A component for selecting one or more options from a set, with support for indeterminate state and custom styling.
❌	Color Picker	A component that allows users to select a colour from a palette or input a custom colour value, with support for different formats (hex, rgba, hsl).
❌	Combobox	A component that combines a dropdown list with an input field, allowing users to select from predefined options or enter their own value, with support for autocomplete and keyboard navigation.
❌	Command Palette	A floating command palette that can be triggered with a hotkey, supports fuzzy search, and provides an interface for executing commands or navigating the app.
❌	Context Menu	A right-click context menu that can be attached to any element, supports nested submenus, and is fully keyboard accessible.
❌	Data Table	A component for displaying tabular data with support for sorting, filtering, pagination, and customizable columns.
❌	Date Picker	A component that allows users to select a date from a calendar interface, with support for different date formats and optional time selection.
❌	Date Range Picker	An extension of the date picker that allows users to select a range of dates, with support for predefined ranges (e.g. last 7 days, this month) and custom range selection.
✅	Details	A component for displaying additional information in a collapsible section, similar to the HTML <details> element, with support for custom styling and content.
❌	Dialog	A modal dialog component that can be used for confirmations, forms, or any content that needs to be displayed in a layer above the main app content, including modal support.
❌	Divider	A simple component for visually separating content sections with a horizontal line.
❌	Drawer	A sliding panel component that can be used for navigation, filters, or additional content, with support for different placements (left, right, top, bottom) and responsive behavior.
❌	Dynamic Island	An experimental component to mimic the iPhone's dynamic island floating container, which can be used for toasts or transient notifications that appear above the main app content.
❌	File Input	A component for uploading files, with support for drag-and-drop, multiple file selection, and customizable styling.
✅	Flex	A flexible container component for creating responsive layouts.
❌	Form	A component for building forms with built-in validation, error handling, and support for various input types.
❌	Form Field	A component for wrapping individual form controls, providing consistent styling, labels, and error messages.
❌	Grid	A component for creating grid-based layouts, with support for responsive columns, gaps, and alignment.
❌	Hover Card	A card that appears when hovering over an element, used for previews or additional info, supports rich content and is fully keyboard accessible.
✅	Icon	A component for displaying icons from the Font Awesome library (incl. pro).
❌	Icon Picker	A component that allows users to select an icon from the Font Awesome library, with support for search and categorization.
❌	Image	A component for displaying images with support for lazy loading, placeholders, and error handling.
❌	Input	A component for text input, with support for different types (text, password, email), validation, and customizable styling.
❌	Label	A component for displaying labels or tags, with support for different sizes, colors, and optional icons.
❌	List	A component for displaying lists of items, with support for different list types (ordered, unordered), nested lists, and customizable styling.
❌	Markdown	A component that can render markdown content, with support for GitHub-flavored markdown features like tables, task lists, and syntax-highlighted code blocks, and built-in editor.
❌	Menu	A component for displaying a menu of options, with support for nested submenus, icons, and keyboard navigation.
❌	Media	A component for displaying media content such as videos or audio players, with support for different sources and customizable controls.
❌	Mentions Input	An expansion of the Combobox, an input that provides autocomplete suggestions for user mentions, supports @-style mentions and is fully keyboard accessible.
❌	Navigation	A component for building navigation bars or menus, with support for different layouts (horizontal, vertical), dropdowns, and responsive behavior.
❌	Number Input	A component for numeric input, with support for increment/decrement buttons, validation, and customizable styling.
✅	Page	Flexible page component for building structured layouts with header, content, and footer sections and more.
❌	Pagination	A component for displaying pagination controls, with support for different styles (simple, numbered), and customizable behavior.
❌	Popover	A component for displaying a popover layer of content when an element is clicked or hovered, with support for different placements and customizable content.
❌	Progress	A component for displaying progress bars or spinners, with support for different styles (linear, circular), and customizable colors and sizes.
❌	Radio	A component for selecting one option from a set, with support for custom styling and keyboard navigation.
❌	Rating	A component for displaying and selecting ratings, with support for different styles (stars, hearts), and customizable sizes and colors.
❌	Segmented Input	A component that renders multiple input fields based on a provided format, such as XX-XX-XX or XXX-XXX, allowing for structured input like credit card numbers or phone numbers.
❌	Select	A component for selecting one or more options from a dropdown list, with support for search, multiple selection, and customizable styling.
❌	Skeleton	A component for displaying placeholder content while data is loading, with support for different shapes (text, circle, rectangle) and customizable animation.
❌	Slider	A component for selecting a value from a range, with support for single or multiple handles, and customizable styling.
❌	Sortable	A component for creating sortable lists or grids, with support for drag-and-drop functionality and customizable behavior.
❌	Stat	A component for displaying key statistics or metrics, with support for different styles (number, percentage), and customizable colors and sizes.
❌	Stepper	A component for displaying a sequence of steps in a process, with support for different styles (horizontal, vertical), and customizable behavior.
✅	Switch	A switch component for toggling between two states, such as on/off or enabled/disabled.
❌	Table	A component for displaying tabular data with support for sorting, filtering, pagination, and customizable columns.
❌	Tabs	A component for displaying tabbed content, allowing users to switch between different views or sections within the same page.
✅	Tag	A tag component for displaying labels, categories, or keywords.
❌	Textarea	A component for multi-line text input, with support for validation, auto-resizing, and customizable styling.
❌	Time Picker	A component that allows users to select a time from a clock interface, with support for different time formats and optional date selection.
❌	Time Range Picker	An extension of the time picker that allows users to select a range of time, with support for predefined ranges (e.g. last hour, this afternoon) and custom range selection.
❌	Timeline	A component for displaying a chronological sequence of events or activities, with support for different styles (vertical, horizontal), and customizable content.
❌	Toast	A component for displaying transient notifications or messages to users, with support for different types (success, error, warning, info) and customizable behavior.
❌	Tooltip	A component for displaying a small tooltip of information when hovering over an element, with support for different placements and customizable content.
❌	Tree	A component for displaying hierarchical data in a tree structure, with support for expanding/collapsing nodes, and customizable styling.
❌	Virtual List	A component for efficiently rendering large lists of data by only rendering the visible items, with support for variable item heights and customizable behavior.