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.
  • 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.