<h2>Overview</h2>
The Flexi Button is an incredibly adaptable button component designed specifically for Angular applications. With its customizable features and ease of integration, it serves as a robust solution for developers looking to enhance user interactions within their applications. Whether you need a simple button with text or a more complex option that includes icons and loading states, the Flexi Button can meet your needs and preferences.
What sets the Flexi Button apart is its seamless integration with Google Material Symbols, allowing developers to use a variety of icons effortlessly. Additionally, its ability to customize size, color, and even corner rounding provides a high degree of flexibility for creating visually appealing buttons that fit perfectly into any design.
<h2>Features</h2>
<ul>
<li>Supports Text, Icon, or Both: Choose between displaying just text, just an icon, or combining both for maximum clarity and functionality.</li>
<li>Integration with Google Material Symbols: Effortlessly use a wide range of icons to enhance the button's visual appeal and functionality.</li>
<li>Customizable Size, Color, and Rounded Corners: Tailor the button's dimensions and appearance to suit your design standards, whether it's large and bold or small and subtle.</li>
<li>Built-in Loading State: Display a loading spinner instead of content, which provides users with visual feedback during processing times.</li>
<li>Tooltip Functionality: Enhance user experience by displaying tooltips with customizable text on hover, offering additional context without cluttering the interface.</li>
<li>Flexible Color Options: Choose from a comprehensive palette including primary, success, danger, and many more to match your application's theme.</li>
<li>Variety of Size Options: Adjust button size to small, medium, or large, offering versatility depending on your layout needs.</li>
<li>Rounded Corners Option: Enable rounded corners for a softer look and feel, aligning with modern UI design trends.</li>
</ul>

<h2>Overview</h2>
Flexi Grid is an innovative and highly customizable data grid component designed specifically for Angular 20 applications. It stands out due to its lightweight nature and robust functionality, allowing developers to seamlessly integrate it into their projects. With features like filtering, sorting, and theme support, Flexi Grid enhances user interaction with data tables while promoting a smooth user experience.
This component is engineered for versatility, catering to diverse needs within Angular applications. Whether you're managing simple datasets or complex interactions, Flexi Grid empowers developers to create responsive and interactive grids that are both visually appealing and functional.
<h2>Features</h2>
<ul>
<li>Filtering: Supports a range of filter types for various data formats, including text, number, date, and boolean, enhancing data management.</li>
<li>Sorting: Offers column sorting capabilities with customizable ascending and descending order options for effortless data organization.</li>
<li>Resizable Columns: Users can dynamically adjust column widths, allowing for a more tailored viewing experience.</li>
<li>Data Binding: Flexi Grid seamlessly interacts with both static and dynamic data sources, simplifying integration.</li>
<li>Multi-language Support: Comes with built-in support for English and Turkish, making it accessible to a broader audience.</li>
<li>Theme Options: Offers flexibility in choosing between light and dark modes, catering to user preferences and enhancing visual aesthetics.</li>
<li>Pagination: Configurable page sizes and navigation enhance usability by allowing users to manage large datasets effectively.</li>
<li>Excel Export: Provides a convenient option to export grid data to an Excel file with just one click, facilitating data sharing.</li>
<li>Custom Templates: Enables advanced customization through custom header, footer, and cell templates, allowing for unique presentation styles.</li>
</ul>

<h2>Overview</h2>
Flexi Report is an innovative Angular standalone component that simplifies the process of creating, styling, and managing interactive reports. With its ability to export these reports as PDFs, Flexi Report merges functionality with ease of use, catering to developers and businesses that require dynamic reporting solutions. Its comprehensive features make it easy to manage content, customize appearances, and execute complex queries, ensuring a smooth user experience throughout the report creation process.
This component stands out in its versatility, enabling users to not only design visually appealing reports but also engage with them interactively. Whether you need to filter data, perform calculations, or even execute SQL queries, Flexi Report offers the necessary tools to build detailed and customized reports tailored to specific business needs.
<h2>Features</h2>
<ul>
<li>Dynamic Content: Effortlessly add, rearrange, and manage report elements to fit your needs without hassle.</li>
<li>Interactive Styling Panel: Fully control the visual aesthetics of your reports with adjustable fonts, colors, alignments, and more.</li>
<li>Table Customization: Gain comprehensive control over table structures, including headers, formatting, and dynamic footer calculations such as sums and averages.</li>
<li>SQL Query Execution: Execute SQL queries directly within the component, allowing for dynamic population of report tables.</li>
<li>AI Integration: Utilize OpenAI to generate optimized SQL queries, enhancing the efficiency of your database interactions.</li>
<li>PDF Export and Print: Seamlessly export your reports as PDFs or print them directly with customizable layouts and padding.</li>
<li>Drag &#x26; Drop Support: Rearrange table headers and form elements easily using Angular CDK DragDrop functionality.</li>
<li>Page Configuration: Customize the report's page size and orientation, along with background colors and fonts for a professional look.</li>
</ul>

<h2>Overview</h2>
Flexi Select is an impressive Angular component that stands out for its lightweight design and extensive customization options. It not only allows developers to create highly interactive select dropdowns but also incorporates features like search, infinite scrolling, and single or multiple selection modes. With full keyboard and ARIA support, this component is engineered to enhance user accessibility significantly.
The flexibility of Flexi Select truly lies in its customizable nature, catering to both the aesthetic and functional needs of modern web applications. Whether you need a simple select box or a complex dropdown list, Flexi Select offers robust solutions that are both easy to implement and maintain.
<h2>Features</h2>
<ul>
<li>
Built-in Search/Filter: Quickly find options in the dropdown, making it easier for users to navigate large datasets.
</li>
<li>
Single &#x26; Multiple Select Modes: Choose between single selection for a straightforward experience or enable multiple selections for more complex data selection.
</li>
<li>
Infinite Scroll / Lazy Load: Efficiently manage large lists with lazy loading features, allowing items to load as users scroll down the dropdown.
</li>
<li>
Theme Support: Easily switch between light and dark themes to ensure consistency with your application's design.
</li>
<li>
Full Customization: Utilize CSS variables and various inputs to tailor the appearance and function of the dropdown to fit specific needs.
</li>
<li>
Angular Forms &#x26; ngModel Integration: Seamlessly integrate with Angular forms, supporting template-driven and reactive forms.
</li>
<li>
ARIA Roles &#x26; Keyboard Navigation: Ensure accessibility with proper ARIA roles and keyboard support, enhancing usability for all users.
</li>
<li>
Validation Features: Implement built-in form validation, including required fields and min/max selections for multiple modes, along with custom validation messages and error displays.
</li>
</ul>

<h2>Overview</h2>
Flexi Treeview is a powerful Angular component designed to offer a highly customizable solution for displaying hierarchical data in a tree format. With its extensive features set, it allows developers and users alike to navigate complex data structures effortlessly. Whether you need selection capabilities, expansion options, or simple search functionality, Flexi Treeview provides an intuitive interface to manage and manipulate your data with ease.
This component not only enhances user experience with its dynamic functionality but also offers customization options to fit various UI themes and styles. With the support of both dark and light modes, along with an adaptive design, Flexi Treeview is poised to meet diverse aesthetic requirements while ensuring that usability remains at the forefront.
<h2>Features</h2>
<ul>
<li>
Dynamic Tree Structure: Supports parent-child relationships, allowing for multiple nested levels of data, accommodating complex data hierarchies seamlessly.
</li>
<li>
Checkbox Selection: Provides the ability to select individual nodes, along with handling indeterminate states, making it easy to manage selections.
</li>
<li>
Search Functionality: Quickly locates nodes within the tree, streamlining navigation through extensive datasets.
</li>
<li>
Customizable UI: Users can adjust sizes, colors, and styling according to their preferences or branding requirements.
</li>
<li>
Dark &#x26; Light Mode Support: Automatically adjusts to the selected theme, ensuring optimal visibility in various lighting conditions.
</li>
<li>
Expand/Collapse All: Simplifies tree navigation by allowing users to expand or collapse all nodes with a single action.
</li>
<li>
Action Buttons: Features edit, delete, and detail buttons for each node, providing direct access to important actions.
</li>
<li>
Live Refresh: Enables dynamic updates to the tree, ensuring that data displayed is always current without needing a full page refresh.
</li>
</ul>

Flexiui Labs

Flexi Button

Flexi Grid

Flexi Report

Flexi Select

Flexi Treeview