SavvyUI - A C++ Windows Component Library
A powerful C++ component library for the development of Windows Desktop Applications
Feature-rich, advanced, flexible, and easy-to-use!
Getting Started Documentation Buy Now
Terms of use: You may use this library free of charge during the development of your Windows application. However, a valid license must be purchased before releasing the application. This requirement applies to all types of applications, including but not limited to commercial off-the-shelf products and applications deployed internally within your organization. Please ensure that all deployed applications are properly licensed, as this licensing policy is strictly enforced.
SavvyUI is a feature-rich windows c++ component library for the development of Windows Desktop applicatons. It features a large set of basic and advanced built-in components that can be used to create complex UI applications using C++. All the components have a familiar look and feel, and they are exceptionally easy to use. The library comes with built-in and customizable theme.
Components showcase
Accordion
An **accordion component** is a vertically stacked list of items that allows users to toggle the visibility of sections of related content. Each item typically consists of a header that can be clicked to expand or collapse its associated content panel. This interaction pattern helps streamline user interfaces by conserving screen space and organizing information into manageable, collapsible sections. Accordions are commonly used in FAQs, settings panels, and navigation menus to improve user experience by reducing visual clutter and allowing users to focus on specific sections without being overwhelmed by all the content at once. They can be customized with animations, icons, and responsive behavior to enhance usability and accessibility across devices.
Button Component
A **button component** is a fundamental interactive element in user interfaces, designed to trigger an action or event when clicked or tapped. Typically styled to stand out visually, a button can include text, icons, or both to clearly indicate its purpose—such as submitting a form, opening a dialog, navigating to another page, or executing a function. Button components can vary in size, color, shape, and state (e.g., active, disabled, loading) to convey hierarchy and interactivity. They are essential for guiding user interactions, and when implemented with accessibility in mind, they ensure a responsive and inclusive user experience across all devices and input methods.
Button Grid
A **button grid** is a layout component that arranges multiple button elements in a structured, grid-based format. This design pattern is commonly used to display a set of related actions, options, or tools in a visually organized and easily navigable way. Button grids are especially useful in interfaces where users need to make selections quickly or perform tasks from a predefined set—such as in keypads, dashboards, filter menus, or control panels. The grid layout can be responsive, adapting the number of columns and rows based on screen size or container width. Button grids improve usability by grouping actions clearly, reducing cognitive load, and enabling efficient interaction across both desktop and mobile environments.
Button Menu
A **button menu with text and images** is a user interface component that presents a collection of clickable buttons, each combining an icon or image with a descriptive text label. This design enhances both visual appeal and usability by leveraging imagery to quickly communicate the function or category of each button, while the accompanying text provides clarity and context. Commonly used in navigation menus, dashboards, mobile apps, and feature selectors, this type of menu allows users to easily identify and interact with available options. The layout is presented as a list, and may include hover or active states, making it intuitive and engaging across devices. Ideal for visually-driven interfaces, this component supports accessibility and reinforces recognition over recall, improving overall user experience.
Calendar
A **dates calendar** component is a simple and focused UI element that displays the days of a selected month in a grid format, primarily used for date viewing or selection rather than event scheduling. It typically includes navigation controls to move between months and years, and allows users to select a single date or a date range. This type of calendar is commonly used in forms, booking interfaces, or filters where users need to pick a specific date without the complexity of managing events or tasks. Clean and minimal by design, a dates calendar emphasizes usability and clarity, making it easy to browse and choose dates across different devices and screen sizes.
Chart Component
A **charts component** is a visual interface element used to represent data graphically, making complex information easier to understand and analyze at a glance. Common chart types include bar charts, line charts, pie charts, area charts, and scatter plots, each suited for different kinds of data relationships and comparisons. Charts components are often interactive, allowing features like tooltips, legends, filtering, and zooming to enhance user engagement and insight. They are widely used in dashboards, reports, analytics tools, and data-driven applications to highlight trends, distributions, and patterns. Designed with responsiveness and customization in mind, a charts component can adapt to various data sets and screen sizes, delivering a clear and intuitive visual experience.
Check Box
A **checkbox** is a basic form input component that allows users to make binary selections—typically representing a true/false or yes/no choice. It consists of a small square box that can be either checked or unchecked, often accompanied by a label describing the option. Checkboxes are commonly used in forms, settings panels, and filters where multiple options can be selected independently. They support states such as checked, unchecked, and indeterminate (used when a group of related options is only partially selected). Simple, accessible, and easy to interact with, the checkbox is a fundamental UI element for collecting user input in a clear and consistent way.
CheckComboBox
A **check combobox** (also known as a multi-select dropdown with checkboxes) is a user interface component that combines the functionality of a dropdown menu and checkboxes, allowing users to select multiple options from a list. When the combobox is clicked, it expands to reveal a list of items, each with an associated checkbox. Users can check or uncheck items independently, and the selected values are typically displayed as a summary (e.g., as text or tags) in the collapsed state of the combobox. This component is ideal for scenarios where space is limited but multiple selections are needed—such as filtering data, selecting tags or categories, or configuring preferences. A check combobox enhances usability by offering a clean, compact design while maintaining the flexibility of multi-selection. Advanced versions may also include features like search, “select all” options, or grouped categories to improve the user experience further.
CheckList
A **checklist** is a user interface component that displays a list of items, each accompanied by a checkbox, allowing users to mark tasks or options as completed or selected. This component is commonly used for task management, to-do lists, settings configuration, or multi-option selection. Users can check or uncheck each item independently, and the state of each checkbox provides a clear visual indication of progress or selection. Checklists help organize information in a simple, linear format that encourages interaction and improves clarity. They are often enhanced with features like labels, descriptions, grouping, or drag-and-drop reordering. Easy to use and highly intuitive, the checklist is a practical component for both productivity and selection interfaces.
ComboBox
A **ComboBox** is a versatile user interface component that combines a dropdown list with a text input field, allowing users to either select an option from a predefined list or enter a custom value. This dual functionality makes it ideal for scenarios where users need flexibility—such as searching through a long list of options or quickly typing in their own input. Typically, when the user clicks on the ComboBox, a dropdown menu appears displaying selectable options. Users can scroll through or type to filter the list dynamically. ComboBoxes are commonly used in forms, search bars, and filtering interfaces to save space while offering both selection and input capabilities. They enhance user experience by balancing ease of choice with the freedom to add new entries.
DatePicker
A **DatePicker dropdown** is a user interface component that allows users to select a date from a calendar interface that appears as a dropdown when interacting with an input field. Instead of typing a date manually, users click or tap on the input box, which triggers a compact calendar popup where they can visually navigate through months and years to pick a specific date. This component improves date entry accuracy and usability by preventing formatting errors and providing an intuitive way to choose dates. DatePicker dropdowns are commonly used in forms, booking systems, and any application requiring date input. They often support features like keyboard navigation, customizable date formats, and restrictions on selectable dates to enhance accessibility and user experience.
Modal Dialog
A **modal dialog** is a UI component that appears as a pop-up window overlaying the main content, requiring the user to interact with it before returning to the underlying interface. It is commonly used to capture user attention for important tasks such as confirming actions, displaying alerts, gathering input, or presenting critical information without navigating away from the current page. Modal dialogs typically include a header, body content, and action buttons (e.g., “Confirm” and “Cancel”). They disable interaction with the background content to focus user engagement and prevent accidental clicks outside the dialog. Well-designed modal dialogs support accessibility features like keyboard navigation and screen reader compatibility, ensuring they are usable by all users.
DialogFactory
A **DialogFactory** is a design pattern or utility component in software development that simplifies the creation and management of dialog components (such as modals, alerts, confirmation dialogs, or input forms) by providing a centralized, reusable way to generate dialogs with consistent styling and behavior. Instead of manually building each dialog from scratch, a DialogFactory abstracts the common setup—like layout, buttons, event handling, and accessibility features—allowing developers to quickly create customized dialogs by specifying only the unique content and actions. This approach promotes code reuse, consistency across the application, and easier maintenance.
FluidPanel
The FluidPanel is a layout management component that can be used to display components from left-to-right, with the responsive capability built-in, you simply set the minimum width of a column, and the component takes care of laying out the child components in a responsive manner.
GridPanel
A **responsive container panel** is a versatile UI component designed to automatically adjust its size, layout, and content arrangement based on the screen size or device viewport. It acts as a flexible wrapper or section that can contain other elements—such as text, images, or controls—and ensures they are displayed optimally on desktops, tablets, and mobile devices. Responsive container panels use fluid grids, flexible widths, and media queries (in web design) or adaptive layout techniques to reorganize content, resize components, and maintain usability across different screen dimensions. They are essential for building modern, mobile-friendly interfaces that provide a consistent and user-friendly experience regardless of how users access the application or website.
Grid
The grid component is a table component that displays rows of data, you can configure the columns, their width, their editable state, etc. You can also enable paging by implementing a paging interface, and then you implement a function that the grid will call each time it needs to fetch a page.
GridView
A **grid table** is a structured UI component that displays data in a tabular format using a grid layout of rows and columns. Each cell in the table holds individual pieces of information, allowing users to easily scan, compare, and analyze data. Grid tables often include features such as sortable columns, filtering, pagination, and selectable rows to enhance data interaction and usability. Commonly used in dashboards, data management systems, and reporting tools, grid tables provide a clear and organized way to present complex datasets. They can be styled for readability with alternating row colors, fixed headers, and responsive behavior to adapt across different screen sizes and devices.
IconMenu
A **vertical icon menu** is a user interface component that displays a series of clickable icons arranged in a single vertical column. Each icon represents a distinct action, tool, or navigation option, providing users with a space-efficient and visually clear way to access features or pages. This vertical alignment is especially useful for sidebars, navigation panels, or tool palettes where screen width is limited or where a natural top-to-bottom flow enhances usability. Vertical icon menus often include hover or focus states, and sometimes labels or tooltips to clarify icon meanings, improving accessibility. They help organize functionality in a neat, easily scannable format, making them ideal for both desktop and mobile interfaces.
Image
An **image** component is a fundamental UI element used to display visual content such as photographs, illustrations, icons, or graphics within an application or webpage. Images enhance the user experience by providing context, conveying information quickly, and adding aesthetic appeal. This component typically supports various formats (JPEG, PNG, GIF, etc.) and can be customized with properties like size, alignment, alt text for accessibility, captions, and responsive behavior to adapt to different screen sizes. Proper use of images improves engagement, clarifies content, and complements text-based information effectively.
Label
A **text label** is a simple user interface component that displays static text to identify, describe, or provide context for other UI elements such as input fields, buttons, icons, or sections. Labels help users understand the purpose or content of an element, improving clarity and usability. Text labels are usually concise, clearly visible, and positioned close to the related component. They can include styling options like font size, color, and weight to enhance readability and hierarchy. Accessible labels also play a crucial role in supporting screen readers and assistive technologies, making interfaces more inclusive.
ListBox
A **listbox** is a user interface component that displays a scrollable list of items from which users can select one or multiple options. It typically shows several items at once, allowing users to navigate through the list using a mouse, or keyboard, input. Listboxes are commonly used in forms, settings panels, and selection dialogs where presenting a large set of choices in a compact, easy-to-scan format is needed. They can support single or multiple selection modes and often include features like search, grouping, and keyboard navigation to improve usability and accessibility.
MaskedField
A **masked field** is an input component that enforces a specific format or pattern for user-entered data by visually guiding or restricting input as it’s typed. It “masks” the input by automatically adding characters like parentheses, dashes, or slashes, or by limiting the type and number of characters, ensuring data consistency and reducing input errors. Common examples include phone numbers, dates, credit card numbers, social security numbers, and postal codes. Masked fields improve user experience by making it clear how information should be entered and help applications validate data more efficiently.
PickList
A **picklist with two lists** (also known as a dual-listbox or multi-select transfer list) is a UI component that displays two side-by-side lists—one showing available options and the other showing selected items. Users can move items back and forth between the lists using buttons, allowing easy selection and management of multiple choices from a larger pool. This component is ideal for scenarios where users need to select multiple options without cluttering the interface, such as assigning users to groups, selecting preferences, or managing features. The dual-list layout provides clear visual separation between chosen and unchosen items, improving usability and control over selections.
PopupMenu
A **popup menu** is a contextual user interface element that appears temporarily on top of the current screen or application content, typically triggered by a right-click, tap, or specific user interaction. It presents a list of options or actions relevant to the current context, allowing users to quickly choose commands without navigating away from their current task. Popup menus are commonly used for shortcuts, tool options, or additional settings, and often disappear automatically after a selection is made or when the user clicks outside the menu. Designed to be lightweight and unobtrusive, popup menus enhance usability by providing quick access to contextual functions while keeping the interface clean.
ProgressBar
A **progress bar** is a visual UI component that indicates the completion status of a task or process over time. It typically appears as a horizontal or circular bar that fills up proportionally to show progress, helping users understand how much of the task is done and how much remains. Progress bars are commonly used in file uploads, installations, loading screens, and any operation where feedback on time or completion percentage improves user experience. They can be determinate (showing exact progress) or indeterminate (indicating ongoing activity without a specific percentage), and often include animations, labels, or percentages to enhance clarity and engagement.
Radio
A **radio group** is a user interface component that presents a set of related options where only one option can be selected at a time. It consists of multiple radio buttons grouped together, each representing a single choice within a category. Selecting one radio button automatically deselects any previously selected option in the same group. Radio groups are commonly used in forms and surveys to gather exclusive choices—such as gender selection, payment methods, or preference settings. They improve clarity by visually grouping mutually exclusive options, and when properly labeled, they enhance accessibility for all users.
Rating
A **rating** component is an interactive UI element that allows users to provide feedback or evaluate content by selecting a value, typically represented by stars, hearts, or other icons. Ratings usually range on a scale (e.g., 1 to 5), visually indicating the level of satisfaction, quality, or preference. This component is commonly used in reviews, product feedback, surveys, and media platforms to capture user opinions quickly and intuitively. Ratings often support half or partial selections, hover effects, and can be displayed in both read-only and editable modes. They help guide other users’ decisions and provide valuable insights to content creators or service providers.
Slider
A **slider** is an interactive user interface component that lets users select a value or range by dragging a handle along a horizontal or vertical track. It provides a smooth and intuitive way to adjust numeric or continuous settings such as volume, brightness, price ranges, or timeline scrubbing. Sliders often display the current value dynamically as users move the handle, and can support single values or dual handles for selecting ranges. They enhance user experience by offering precise control in a compact and visually engaging format, commonly used in media players, settings panels, and data filters.
Switch
A **switch** is a toggle-style user interface component that allows users to quickly turn a setting or option on or off. Visually resembling a physical switch or slider, it typically slides or flips between two states—often labeled as “On” and “Off” or represented by different colors or icons. Switches are commonly used for enabling or disabling features like notifications, privacy settings, or connectivity options. They provide a clear, immediate way to change binary states, improving usability by making the current status obvious and interactions effortless. Switch components are designed to be accessible, responsive, and easy to understand at a glance.
Tabbed Pane
A **tabbed pane** is a user interface component that organizes content into multiple sections, each accessible through labeled tabs arranged typically at the top or side of the pane. Only one tab’s content is visible at a time, allowing users to switch between different views or categories without navigating away from the current screen. Tabbed panes help manage complex or related information in a compact space, improving navigation and reducing clutter. Commonly used in settings panels, dashboards, and multi-section forms, they provide a clear structure and easy access to different content areas while maintaining context. Well-designed tabbed panes support keyboard navigation and accessibility for a seamless user experience.
TextArea
A **text area** is a user interface component that provides a larger, multi-line input field where users can enter, edit, and review extended blocks of text. Unlike a single-line text input, text areas are ideal for capturing longer responses such as comments, descriptions, messages, or feedback. Text areas often include features like resizing, scrollbars, and placeholder text to guide user input. They can support rich text formatting or plain text depending on the application. By offering ample space for detailed input, text areas enhance usability in forms, chat interfaces, and content creation tools.
TextField
A **text field** is a fundamental user interface component that allows users to enter and edit a single line of text. It’s commonly used in forms and applications for inputting data such as names, email addresses, passwords, or search queries. Text fields usually include features like placeholder text, input validation, and support for keyboard input. They may also offer options for masking input (e.g., for passwords), auto-completion, and clear buttons to enhance user experience. Simple and intuitive, text fields are essential for capturing user information efficiently and accurately.
ToastFactory
A **ToastFactory** is a utility or design pattern used in software development to create and manage toast notifications—small, temporary messages that appear on the screen to provide feedback or alerts without interrupting the user’s workflow. The ToastFactory centralizes the creation of toast messages, ensuring consistency in styling, behavior, duration, and placement across an application. Instead of manually building each toast notification, developers can use the factory to quickly generate toasts by specifying parameters like message text, type (success, error, info), and display duration. This approach promotes reusable, maintainable code and a unified user experience.
ToggleButton (ButtonSelector)
A **button selector** is a UI component that presents a group of buttons where only one button can be selected at a time, allowing users to choose one option from several. It functions similarly to radio buttons but uses visually styled buttons to enhance interaction and clarity. Button selectors are commonly used for filtering, mode switching, or setting preferences—like selecting text alignment, view modes (grid/list), or payment options. The selected button is usually highlighted to clearly indicate the current choice, making the interface more intuitive and engaging.
Tooltip
A **tooltip** is a small, informative popup that appears when a user hovers over, focuses on, or taps an element in a user interface. It provides additional context, explanations, or helpful hints about the element without cluttering the main UI. Tooltips are commonly used to clarify icons, buttons, form fields, or other controls—especially when their purpose might not be immediately obvious. They typically display concise text, appear near the target element, and disappear when the user moves away. Well-designed tooltips improve usability and accessibility by offering guidance just when it’s needed, enhancing the overall user experience.
Toolbar
A **buttons/icons toolbar** is a horizontal or vertical interface component that groups a collection of clickable buttons or icons, providing quick access to commonly used actions or tools within an application. Each button or icon represents a specific function—like formatting options, navigation controls, or commands—allowing users to perform tasks efficiently without navigating through menus. Toolbars are often customizable, support tooltips for clarity, and may include separators or grouping to organize related actions. They enhance productivity by keeping important features readily accessible, and their compact design helps maintain a clean and intuitive interface across desktop and mobile environments
Treeview
A **treeview** is a hierarchical user interface component that displays data or items in a nested, expandable list structure resembling a tree. Each item, or “node,” can have child nodes, allowing users to drill down into multiple levels of information by expanding or collapsing branches. Treeviews are commonly used for navigating file systems, organizational charts, menus, or any data that has parent-child relationships. They help users explore complex structures in a clear, organized way, making it easier to find and manage information without overwhelming the screen. Good treeviews support keyboard navigation, dynamic loading, and accessibility to enhance usability.
