Skip to content

Components ​

This page provides an overview of all the components available in the library. Click on the component name to view detailed documentation and usage examples.

Available Components ​

  • Accordion: Accordion component. It includes expandable and collapsible content sections.
  • Alert: Alert component. It includes customizable type options, possibility to add an icon and show a closing button.
  • Badge: Badge component. It includes customizable color options and a size variant.
  • Checkbox: Styled checkboxes.
  • Combobox: An enhanced dropdown with search capabilities.
  • ButtonBase: A versatile button component. It includes customizable color options, size variants, and additional configuration options to adapt to different use cases.
  • DataTable: A flexible and customizable table component built with Vue 3. It supports sorting, custom headers, and various alignment options.
  • Dropdown: A customizable dropdown component with support for various items.
  • Drawer: A sliding drawer component that can be used to display additional content, form layouts or options.
  • EmptyState: Inform users when no data is available.
  • FileUpload: Select or drop files with area and button variants, previews, and optional thumbnails.
  • FormInput: A customizable input field with support for icons, prefixes, and various size variants.
  • FormSelect: A customizable <select> input with support for custom icon and slots.
  • FormTextarea: A customizable textarea input with support for different sizes.
  • Lightswitch: A toggle switch for enabling or disabling options.
  • Pagination: Navigate through pages of content.
  • Modal: A modal dialog component that can be used to display content in a dialog box.
  • Tabs: Organize content into tabbed sections.
  • Radio: Styled radio buttons.
  • RichTextEditor: A powerful editor for rich text content.
  • Toast: Non-intrusive notifications that appear temporarily.
  • Tooltip: The Tooltip component is a versatile tooltip component built with Vue 3 and @floating-ui/vue. It provides a customizable tooltip interface perfect for displaying additional information on hover.

Roadmap ​

The following components are planned for future releases:

  • DateNavigator: A date picker component with prev and next buttons.

How to Use ​

To use any of these components, import them into your Vue components and use them as described in their respective documentation pages.