Koala UI · Figma Design System

A Design System that Cares About SEO and Conversion

Koala UI is a Design System built for users who are looking to create uniquely beautiful websites with highly converting structures and SEO optimization.

If you don't trust us, just see what our clients are saying:

⭐⭐⭐⭐⭐

The UI kit looks fantastic, incredibly extensive!

Especially impressed that it's all built in Webflow so you can get a huge head start in building your next website!

Liam McCabe, Founder of Layers.to

--

⭐⭐⭐⭐⭐

There's simply no comparison.

Dark & cream mode, top-notch components, and an abundance of templates. It's every designer's dream, all in one place.

Carlos Gerónimo, Framer Developer.

--

⭐⭐⭐⭐⭐

One of the most beautiful UI kits out there

Love how there's not just light and dark mode, but also cream! Congrats on your launch 👏

Katherine Shan, UX designer at LivePerson

--

⭐⭐⭐⭐⭐

The BETA version is already a game-changer!

With Koala UI, the possibilities are endless - every component is a building block towards a stunning high-conversion website.

JP Dionisio, Wized Dev

Changelog

At Koala UI, continuous updates are more than just a task; they represent our dedication to excellence and innovation. Every line of code, every design tweak, serves a purpose: to enhance your workflow, make your day-to-day smoother, and empower you to create amazing products with confidence.

A significant portion of the changes you'll see in this changelog are aimed at perfecting the product. Some months we add things, and other months we refine or remove features. Many of these changes are driven by you, our valuable community. Your ideas and feedback are the driving force behind our updates, ensuring each improvement is meaningful and relevant to you.

December Update [V.5]

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

October Update [V.4]

• Inputs and buttons: Added MacOS Command Shortcuts on inputs and buttons.
• New Theme Available: Introducing Moonlight.
• Changes to Buttons: New sizes: lg, md, sm and 2 buttons added: Link & Link Secondary.
• Avatars: Added new avatars and made them Figma Styles so it's easier to switch between them.
• Avatars variants: New variants added -> Status, logo, country...
• Dropdowns: New variants added -> Opened, disabled...
• Login & Verification pages: New page template added.
• Tables: Added new variants to tables.
• ...

Any questions?

We are committed to ensuring your satisfaction with our product. Should you encounter any issues or have inquiries, our proficient support team is readily available to facilitate a seamless experience.

We recommend that you thoroughly read our documentation before contacting our team. You can also read the FAQs in case we have already addressed your questions for others.