Changelog

We’ve introduced new improvements and fixes to the product:

• Updated Button Disabled State: Improved the appearance of the disabled state for button-brand.
• Refined Radio Button Design: Updated the visual design of radio buttons for better consistency.
• New Component Variants: Added new card variants for radio buttons and checkboxes.
• Streamlined FAQs: Removed certain FAQ sections to enhance consistency across the Design System.
• Formatting Fixes: Resolved various formatting issues.
• Layer Renaming: Renamed previously unnamed layers for better organization.
• Real Content Added: Replaced placeholder content with real examples where applicable.

Let me know if you’d like any further adjustments!

Koala UI is a product that I, as the creator, use in my daily work. I usually update Koala UI when I have several improvements to make, but that's not always the case.

As I just mentioned, Koala is a product I personally use for my clients and projects. As I work and create new products, I incorporate new features and improvements. After a few days, I decide to publish these updates with the small changes I've made during that time.

• Added new links for demo videos.
• Reinforced the documentation.
• Added 3 new templates: Declan and Creative Shutter as portfolio & agency templates, and Course Craft as a course creation template.
• Improved toggle usability.
• In dark mode, the brand color now turns white.
• Improved line height in tablet and mobile breakpoints for typography.
• Published a new article: The 8 Best Free Webflow Templates.
• Added a variant hover tooltip: You can now hover normally, or hover with a tooltip.
• Removed some components that were still being used despite being marked as "restore components." Now, no legacy components remain.
• Updated tooltips: there are now only black tooltips with various styles for both light and dark modes.

We’re thrilled to introduce one of the biggest updates we’ve ever made to Koala UI. This release represents a pivotal step forward, packed with substantial improvements across the entire product.

In this update, we’ve focused not only on fixing issues and adding new features but also on refining the product by rethinking and removing components that no longer meet our high standards. Our mission has always been to maintain a design system that stands out for its quality, consistency, and usability. Achieving this often requires us to introduce, enhance, and sometimes eliminate elements to ensure everything performs at its best.

Here’s what’s new in this update:

Main Areas of Focus:

• Color
• Typography
• Bug fixes
• Consistency
• New content for applications
• New marketing content

What we’ve worked on:

• Improved documentation for the entire product, including usage guides and video explanations for some components.
• Added new “Welcome” content for onboarding new users.
• Replaced Koala branding images with SVGs for better control over colors in dark mode.
• Enhanced the color palette for dark and moonlight themes.
• Improved typography: Reduced letter spacing to refine kerning, especially in headings.
• Improved typography for responsive design.
• Enhanced several sections of the website.
• Increased contrast in placeholder texts for dark theme.
• Increased contrast in border strokes for dark theme to improve accessibility.
• Introduced new Phosphor icons.
• Added a new “Effects” section with shadows and focus rings.
• Created the accordion component: Previously part of the FAQs section, now a standalone component.
• Added new variants for alerts and notifications.
• Created new sizes and variants for the avatar component.
• Added new variants for the badge component.
• Introduced example images for components to showcase their use cases.
• Added new background variants for light and dark themes.
• Added new banner variants.
• Added new breadcrumb variants.
• Introduced the "Button Icon" variant in the button component.
• Added new variants for the button group component.
• Improved checkboxes with new tree variants and a hover state.
• Added examples of how to use checkboxes in logins and dropdowns.
• Added new dialog variants and usage examples in dark theme.
• Completely rethought the dropdown select input and combobox component.
• Added new dropdown variants.
• Created a new file upload component.
• Introduced new input variants and improved input consistency across sizes, dropdowns, and select inputs.
• Added new navbar variants.
• Improved some mega-menu examples.
• Added new radio button variants.
• Created the select input component.
• Added new variants for tabs.
• Created the tags component, now separated from badges.
• Added new variants for switches and toggles.
• Added new variants for the careers section.
• Added new variants for the contact section.
• Added new variants for the FAQ section.
• Added new variants for the testimonials section.
• Created a new product calendar component.
• Added new dashboard widgets.
• Improved navigation within the application.
• Enhanced the tables component in the application.
• Improved the email page.
• Introduced three new settings pages.
• Enhanced all marketing pages.

Hello everyone!

Welcome to the October update. If you're new and don't know how this works—every month at Koala UI, we release an update where we incorporate new layouts, fix issues, and make improvements.

As always, I bring you this month's update.

Before starting with this month's update, I want to thank all the new users who are joining us every month. It makes us very happy to see the new websites you are launching thanks to what we are creating at Koala.

Introducing Social Buttons

Social Buttons are best used in sign-up or login forms across applications and websites where users benefit from a quick, streamlined authentication process. They allow users to register or log in with an existing account from popular platforms like Google, Discord, Facebook, and Apple, eliminating the need to create a new password and speeding up the onboarding experience.

New theme Available: Introducing Moonlight

We introduce a new theme: Moonlight, a variant of dark mode with bluish tones. If you follow us, you will see more examples of how we are applying this new theme.

Introduced Register, Login and OTP Verification Pages

Dropdowns

New variants added → Opened, disabled…

Avatars

New variants added -> Status, logo, country... Also, we've made them Figma Styles so it's easier to switch between them.

Button new states

New sizes: lg, md, sm and 2 buttons added: Link & Link Secondary.

Logos

We've introduced new logo placeholders, but better crafted to look as realistic as possible. Now they no longer say "lorem ipsum", but have proper names.

Dialogs

We've fixed some issues with the dialogs and we've added real content and new variants.

Table variants

We have introduced new table variants and improved their construction.

Product Navigation

We have introduced new sidebar variants and improved their construction. From now on, there are different views like the tree view, where you can add new elements within existing elements.

Charts

We have introduced new chart variants and added their empty state variants. Additionally, we have improved the way they have been constructed in Figma.

Tiny but mighty updates

• In the inputs, previously when removing the label, only the text was removed, leaving the required asterisk in place. Now it removes everything completely.
• We've worked on placing more real content instead of placeholders.
• Created new dropdowns and comboboxes.
• Created new dropdown menus.
• Cursor: Created new cursor -> Disabled & Typing.
• Pagination: New variants.
• Fixed some of those "restore components" issues. This happens when working with a large Design System, and then problems appear when updating/improving components. Also fixed some "set to default" issues.
• Dropdowns and inputs have the same height.
• In the marketing sections, where the class "container-large" was previously used as width, it is now set as "max-width" with a width of "fill" to improve the responsive experience.
• Additionally, many sections are now responsive when collapsed and will adjust to the dimensions. Also, we've added breakpoint variants, so on each component you can choose which breakpoint variant you want.
• Mac Command Shortcuts on inputs
• Login/Dialog: New login dialogs have been added.
• Toggle/switch: Added new sizes.
• Charts: Added new variants, and added the empty states.
• Improved the way tables are built in the product and we've added new variants.
• Icons: We've added 50 new Phosphoricons.
• Tabs: Added new tabs variants.
• Icons: We've removed the "filled icons".
• Tooltips: New tooltips.
• Flags: Introduced new flags.
• Overlays are now no longer a gradient of colors, but a gradient of opacities, so they always work regardless of the color underneath.
• New content dividers.

‍