Our components streamline the design and development process by breaking down user interface elements into reusable, modular components, to create a cohesive and improved accounting experience.
Layout & navigation
App Header
The app header is the primary UI element, positioned as the top bar of the application of the layout. It can contain breadcrumb, profile details, or a search bar within.
Navigation
The navigation is the list of main categories of an application and lets users navigate through the product.
Card
Card is a layout element used to display information or content in an organized format.
Breadcrumb
The breadcrumb component is used to show users the path of the current page in relation to the overall site hierarchy.
Pagination
Pagination is used to divide content or data into multiple pages, making it more manageable for users to navigate through a large set of information.
Form elements
Checkbox
Checkbox allows the users can easily indicate which options they want to select, and the selected options can be submitted as a group to perform a specific action or to record their preferences.
Checkbox group
A checkbox group is a form input element formed by multiple checkboxes coming together, which are contextually related to each other.
File Uploader
The file uploader allows users to upload their own content onto relevant fields. It can mostly appear on form or process pages, either alongside form input items or standalone in modals or cards.
Form input
Input is a versatile element that allows for the gathering of data from the user and the processing of this data within the system.
Radio (Radio Button Group)
A radio button group contains multiple options in a list or form, but allows only one option to be selected among them.
Toggle Switch
A toggle switch is an input item can be used to enable or disable certain settings.
Search
Search is typically a text area that allows users to perform in-context searches by typing a search string.
Buttons & actions
Button
Button is a primary UI element that can trigger an action in a flow.
Split Button
A split button is a type of button that includes additional options (or actions) related to its primary function, which are placed under an overflow menu as icon buttons.
Content Switcher
The content switcher is a layout-level component that helps differentiate and group similar or identical types of records and allows users to switch between them within itself.
Tab
Tabs are used within a record to divide array filters related to that record into specific groups and also to switch between them.
Link
Links are a fundamental element that allows users to redirect to a different page on the interface or to an external resource directly using a sentence, paragraph, or label with the anchor tag.
Overlay elements
Calendar
The calendar allows users to select a specific date or range of dates.
Overflow Menu
The overflow menu is for represents lists of commands and variable choices.
Modal
A modal appears over the main content, maintaining context while requiring user interaction. It temporarily disables access to the main content until interacted with and is used to display separate content or views.
Tooltip
A tooltip helps in conveying and carrying additional short static information specific to the states of components while hovering over the component.
Lists & tables
List
List (list-group) is a set of related text labels, each of which starts with a bullet point, number, hyphen, or character.
Structered (Index) List
Table
Indicators
Add new item
Aggregate
Aggregate is the representation of the arithmetic or value sum of all aggregatable values present in a data table or index list.
Badge
A badge is a component that represents the type of record registered in the system. Badges are a non-interactive way to visually identify and distinguish a specific type of record within a system.
Helper text
Helper text provides additional information for a situation or action, or allows us to explain the situation in more detail for the input it belongs to.
Progress bar
Progress bars are used to visually and quantitatively represent the progression of a system operation, such as a download or upload, indicating how long the system will take to complete the process.
Notification
Notification is a component that provides the user with relevant information and updates about the outcome of an action they have taken.
Tag interactive
Tag interactive is used to allow users to apply and manage dynamic data, grouping and filtering them based on specific criteria in lists and reports.
Tag semantic
Tag-semantic can be used to represent objects as a visual label on list items, table rows, and individual type of records.
Spinner
A spinner is an animated circle icon used to indicate an indeterminate loading process.