Changelog

New ✨

• On-Screen Keyboard: A full keyboard for touch screens: letters, symbols, shift and space, with a Spanish layout, and keys that never take the field's focus.
• Translations: LabelsProvider sets the words components say on their own for a whole app, with Spanish included. Nine components read it so far.
• Keypad: A touch number pad for PINs, quantities and amounts: keys up to 80px, masked dots, a rejection shake, physical keyboard support and labels you can translate.
• Migrating a custom project: A guide to moving an app of any age entirely onto Koala, carried by the Koala skill as references/migrate.md: a coding agent audits the project, protects what works, replaces every surface and proves nothing old is left.

Improved 🛠️

• File Preview: New FilePreviewPrint prints the file from a hidden frame.
• Number Input: New precision keeps decimals independent of step, so 1.5 stays 1.5 while the steppers move by 1.
• Toggle Group: ToggleGroupItem takes a color for a mark beside its label.
• Toggle Group: Toggle and ToggleGroup gain lg and xl and follow ControlSizeProvider, for touch screens.
• Chip: New md and lg sizes, 32 and 40px, for screens worked by finger.
• Tab Strip: A size prop with 36 and 44px tabs.
• Order Summary: OrderSummaryItemQuantity takes a size and follows ControlSizeProvider.

New ✨

• Attachments: A row of attached files: images as tiles, files as cards with their type and size, an inline chip variant, upload and error states, and useAttachments to keep the list.
• Citation: CitationClaim marks the sentence a source backs, and layout="list" shows every source at once instead of paging through them.

Improved 🛠️

• Prompt Input: Pass onFiles and the composer takes files pasted, dropped on it or picked with PromptInputAttachButton; hasAttachments lets a message send with no text.
• Markdown: While a reply streams, new blocks fade in and each word comes into focus on its own; tables render with Koala's Table and quotes read as a muted note.
• Code Snippet: showLang gives a block with no file name a header with just its language chip, and highlighted colors settle in instead of jumping.

New ✨

• File Upload: Upload queue: pass onUpload and FileUploadQueue and FileUploadSummary run every file with progress, time left, Retry, Cancel, rejected rows with their reason, and a polite live region.
• ChipIcon: reveal="selected" keeps a trailing check collapsed until the chip is selected, then opens its slot so the chip grows instead of jumping.

Improved 🛠️

• RadioCard: Keyboard focus now matches a focused input: a brand stroke with the brand ring around it, selected or not.
• Pricing: The featured tier now wears a brand edge with the focus ring behind it, and every tier is a size tighter: less padding, a smaller name and price, 16px checks.
• File Upload: The dropzone reads the drag before the drop: the title counts the files or warns about the wrong type, the glyph lifts, the panel turns brand or destructive, and a drop where nothing passes shakes.
• Toggle Group: Items sit on Button's scale (32px sm, 36px md, Button's corner, 16px glyphs), the segmented track is as tall as a Button, and a chosen item no longer turns semibold.
• Toggle: Sized and cornered like Button: 32px sm, 36px md, 16px glyph when icon-only.
• Chip: selected keeps the chip's hue and turns it up (full edge, deeper wash, soft shadow) instead of swapping it for a white edge, and a neutral chip fills with ink.
• Spinner: The full ring stays drawn as a faint track and a quarter arc sweeps over it, so the spinner reads as a circle at every size.
• Checkbox: The box matches the label's text size: md is now 16px and sm 14px, with the touch hit area unchanged.
• RadioGroup: Radios and RadioCard controls follow Checkbox down to 16px (md) and 14px (sm), so both still line up in the same form.
• HoldButton: Sizes follow Button's scale (xs to xl, 28px to 44px), so the default md is now 36px and sits level with a Cancel button; the old 48px lg is xl plus h-12.
• Lightbox: Opening zooms the image out of its tile and closing flies it back, while the other tiles ripple away and ease home; turn either off with zoom or ripple.

Fixed 🐛

• DotMatrix: Both sizes now share one proportion, each dot as wide as its gap, so lg is xl scaled down instead of a denser grid.
• Pricing: tone="outline" draws a brand edge instead of a white one, and a badge on tone="solid" turns into a white chip with a black label on its own, so its text no longer disappears.
• File Upload: A dropzone with only text inside is now the button itself, reachable with Tab and opened with Enter or Space; FileUploadDescription writes itself from accept and maxSize.

New ✨

• List: variant="filled" gives each row its own muted tile, for lists that already sit on a card or a side panel.
• BadgeGroup: max="fit" shows as many badges as fit the group's width on one line and folds the rest into the +N chip, recounting as it resizes.
• Layout: A skip link takes keyboard users past the sidebar to LayoutContent; its text is skipLinkLabel.

Improved 🛠️

• DescriptionList: The density padding sits between rows only, so a list inside a Card leans on the card's padding and the frame reads even on all four sides.
• Flag: The flag art loads as one async chunk the first time a flag renders, so Flag, PhoneInput, CountrySelect and JobCard no longer carry every flag in their bundle.

Fixed 🐛

• Forms: LoginForm, SignUpForm, ProviderForm, ContactForm, FeedbackForm, NewsletterForm, PaymentForm, SettingsForm and WaitlistForm hand the form back when the submit handler rejects, instead of spinning forever.
• Button: A loading button keeps its label as the accessible name, and the action buttons inside Carousel, Pagination, CookieConsent, Chat and the rest no longer submit a form they sit in.
• OTPInput: The SMS code autofill on iOS and Android fills every slot instead of leaving only the last digit.
• Touch: Controls that only appeared on hover now stay up on touch screens: CodeSnippet copy, FileCard tile actions, Carousel arrows, Sidebar row and group actions, TabStrip close and the FloatingWindow resize grip.

New ✨

• Stepper: StepperPanels and StepperPanel hold the step bodies: the height tweens to each step and the body slides in from the side you moved, so a wizard dialog no longer jumps between steps.

Improved 🛠️

• Button: The shape follows the domain: application UI gets the field corner of each size, like the Input beside it, and only marketing surfaces (Section, Hero, Navbar, Footer, Banner, Gallery or data-domain="marketing") keep the pill. SplitButton and HoldButton follow.

New ✨

• Input: InputFloatingField: the label rests as the placeholder and floats to the top edge on focus, value or autofill.
• Field: info on FieldLabel and FieldGroupLabel puts the help behind an info icon with a tooltip; it still describes the control for screen readers.
• Empty State: layout="inline" puts the parts on one left-aligned line, for an empty list inside a sheet or a panel.
• Rich Text Editor: imageLinks shows the picture under any block that links to an image file; the saved HTML keeps just the link.

Improved 🛠️

• Icons: Searching "halloween" now finds Broom, Bone, Moon and MoonStars.
• Dialog: Clearer rhythm: the header stands apart from the body (and drops that margin when the footer follows), the icon sits closer to the title, the close button centres on the first row, and the bordered footer gets more room.
• Expandable Search: The docs header search is now an Expandable Search: it rests as a magnifier, opens on click and lists matches right under the field. ⌘K still opens the command palette.
• Paper: A SignaturePad inside PaperSignature drops its own box and guide and signs on the sheet's line, scaled with the sheet.
• Radio Group: RadioCard states no longer compete: every state is one ink, keyboard focus adds a soft ink halo, a click shows the ink selection straight away, and hover is a quieter hint.
• Floating Window: Dragging lifts the window from the grab point with a deeper shadow, and the cursor holds while the pointer leaves the bar.

Fixed 🐛

• Textarea: The resize grip sits in the bordered box's corner, level with the counter, instead of floating above the footer, and is drawn with the new Notches Koala icon.
• Accordion: Every disclosure panel (Accordion, Collapsible, Tool, Plan, Tree, Sidebar groups) keeps its children's edge and focus rings painted while it opens and closes.
• Paper: A section band no longer doubles the rule above it.
• Floating Window: A minimized window no longer shows a stray hairline under its bar.
• Tool: The first section's top hairline no longer vanishes while the card opens.
• Voice Roster: A group mark before the avatar keeps the full gap, and the header and overflow line align with the row text at each density.

Improved 🛠️

• TeamMember: Name and role sit closer together in every layout, so the pair reads as one label.

Fixed 🐛

• Layout: The docked content keeps its top hairline under a topbar: it sits 1px lower, so the sticky bar no longer paints over the ring.

New ✨

• Brand logos: @/lib/brand-logos holds the monochrome brand marks (GitHub, X, LinkedIn, Dribbble, TikTok and more) with the same size, color and title props as an icon.

Improved 🛠️

• Koala Icons: Every component, section and page now draws Koala Icons: 117 new icons bring the set to 487, and @phosphor-icons/react is no longer a dependency.

New ✨

• ease-lift: A motion token for physical objects being picked up or selected: a gentle 10% overshoot, softer than ease-spring.

Improved 🛠️

• Motion: No control scales down on press anymore: Button, inputs, pickers, toggles and every other control answer a press with the focus ring and color alone, and static stays for compatibility.
• SplitButton: Takes a menuClassName for the menu, never shrinks in a flex row, and now drives the docs Copy page menu.
• VoiceRoster: Speaks Koala now: rounded rows on the elevation floor, a soft green fill instead of the spine and wash, body type instead of mono, round group dots, the supervisor star after the name, and panel rows sit on the page's own ground like a List.
• Hero Section 1: A rotate list turns the end of the headline into a rotating highlight, the same wash as HeroHighlight.
• SwatchGrid: Swatches are round now, the selection ring takes the swatch's own color, kept opaque and readable on either theme, and hover hints in that color.
• Ink Tray: The tool in hand now lifts on ease-lift with a growing shadow, hover only hints at the lift, and the chosen colour rises slightly.

Fixed 🐛

• HeroHighlight: A rotating highlight now server-renders only its first phrase, so search engines read a clean headline instead of every phrase run together.
• cn and every recipe now let ease-drawer, ease-spring, ease-lift and ease-sine in className override a component's own easing.

New ✨

• Toast: appearance: "minimal" for a compact one-row toast, countdown for a hairline that drains with the timer, and progress for a determinate bar you advance by raising the same id; the first two can be set app-wide on <Toaster />.
• Ink Tray: A whiteboard pen tray: pen, marker, pencil and eraser rise from behind the bar when picked up, and each tool keeps its own colour and stroke size.

Improved 🛠️

• Fields: Input, InputGroup, Select, MultiSelect, NativeSelect, CountrySelect and DatePicker are rounded rectangles instead of pills (12, 14 and 16 by size), and Textarea steps down to rounded-lg.
• Button: A Button inside a <form> takes the field corner for its size, so a submit matches the inputs beside it; everywhere else, a Popover form included, it stays a pill.
• OTPInput: Slots follow the field corners, 12, 14 and 16 by size, so a code entry matches the inputs and the Verify button beside it.

New ✨

• Icons: Koala Icons grows to 370 glyphs, and every example in the docs now draws with them instead of Phosphor.
• PromptInput: PromptInputBannerApps and PromptInputBannerApp: a row of app logos in the banner under the composer, each a button with a tooltip, for a "connect your apps" strip.

Improved 🛠️

• No comments left in the code you install: components, sections, page examples, templates and the shared lib helpers all ship as plain code.
• Rating: icon takes any icon component, Koala Icons or Phosphor, and so do the icon props of CookieConsent categories and Toolbar overflow items.
• Terminal: A Windows window now: 8px corners, square seams, a TerminalTab that merges into the screen and TerminalCaption buttons with close going red on hover.
• PromptInput: One size now: the size prop is gone, and every composer is the tighter default, with one 32px control height and 16px icons across the toolbar, send included.
• PromptInput: The banner takes a muted tint so it reads as tucked behind the composer, and its content wraps on narrow screens instead of overflowing.
• ModelSelector: Capability glyphs are smaller and quieter, and each explains itself in a tooltip on hover through a new description prop.

Fixed 🐛

• Command: The sliding highlight no longer covers a group heading or separator as it glides from one group into the next.
• Tool: Opening or closing a call no longer shows its sheets cut flat by the height animation; they fade in step with it.
• Citation: A chip no longer wraps alone onto the next line, and no longer crops the first message of a Chat conversation.

New ✨

• Citation: A chip in an answer that previews its sources on hover and goes to them on click.
• Tool: One call an agent makes to a tool: its arguments, the result and an approval step when a person has to say yes.
• ModelSelector: A searchable model picker grouped by provider, with each model's capabilities and context window.
• ContextMeter: A small ring for how much of the context window a conversation has used, opening onto what fills it.
• EventCalendar: Month, week and day views where events drag between slots and resize, from the mouse or the keyboard.
• CompareSlider: Two pictures in one frame with a divider to drag between them, for a redesign, a retouch or a grade.
• Button: A split button: the main action stays visible and its alternatives sit in an attached menu.
• Chat: An agent trace of reasoning steps, with an ink-sweep pass across the step still in progress.

Improved 🛠️

• Tabs: segmented is now the default variant, with a tighter track.
• EmptyState: Illustrated states: a small object that belongs to the job for each empty moment.
• DataTable: An AI generation example that fills an insight column row by row.
• ActivityFeed: A workflow example with a compact phase bar for the total time.
• Leaner component source: the long explanatory comments are gone from every component, so the files you copy read as plain code. One-line prop docs stay for editor hints.

New ✨

• Combobox: A text field you type into to filter a list, then pick one option.
• Meter: A measurement inside a known range, like storage used or a plan quota.
• NumberField: A numeric input with minus and plus steppers.
• Terminal: A command-line surface whose title bar doubles as a drag handle.
• StatusBar: The thin strip of status items along the edge of an app shell.
• TabStrip: The browser-style row of open documents across the top of an app shell.
• DotMatrix: A 5×5 dot-matrix loader with a light running through it.
• TabletFrame: A device that floats over a game, a map or another full-bleed canvas.
• SwatchGrid: A grid of pickable samples: a color, or a glyph over a color.
• FloatingWindow: A small movable, resizable window over the app.
• Tabs: variant="segmented", the pill-on-track look for switching views.

Improved 🛠️

• Tabs: The line and folder indicators sit on the bottom edge of the list and stay fully visible.
• DropdownMenu: The exit animation is interruptible: reopening mid-close picks up where it was.
• Map: Map pins merge the collapsible chip with the new dispatch, fleet and incident symbols.
• API tables and anatomy on the docs pages of every component merged this week, including AI panel, Chat, Prompt Input and Rich Text Editor.

Fixed 🐛

• DotMatrix: Keyframes that were left open no longer break the animation.
• Button: An icon-only size="xs" button stays round like every other size.

New ✨

• ChannelChat: A many-person channel log for team chat or a radio net.
• VoiceRoster: Who is on a voice channel, lit as they talk. variant="panel" sets it inside a page column.
• Chip: A small pill you act on, the interactive sibling of Badge.
• Dot: A status light or color swatch.
• HoldButton: Press and hold to confirm a destructive or final action, with controlled holding and keyboard support.
• Receipt: A slip of thermal paper with a torn edge.
• HandheldDevice: The shell of a handheld gadget, with an LCD, keys and a printer.
• Button: size="xs", a 28px tier for dense interfaces.
• Progress: A timed mode: pass duration and the bar runs itself, like an auto-dismiss countdown.
• Typography: eyebrow and eyebrow-mono label roles.

Improved 🛠️

• Badge: Takes any color, not only the preset variants.
• PushToTalk: size="sm", variant="outline" and a live prop for a hotkey handled elsewhere.
• NotebookPage: A red margin, a spiral binding and fields that sit on the rules. Focus shows only the caret unless focusTint is set.
• AI panel: Works inside a container, with jump to latest, prompt limits, quick actions and mentions.
• Chat: The conversation keeps following the latest message through resizes.
• List: A bleed option and currentStyle for the active row.
• Banner: A size prop.
• Tabs: A trailing badge sits concentric with its tab.
• Focus rings use one brand color everywhere and are never clipped by a scroll container.

Fixed 🐛

• Dialog: Focus returns to the opener when there is no trigger, including a menu item that opened it.
• Tooltip: Automatic hints stand down under an explicit Tooltip, so you never get two bubbles.
• TabStrip: A sortable tab no longer breaks the tab stop.
• PushToTalk: A hold interrupted by unmounting or disabling still ends through onTalkEnd.
• PromptInput: Growing with its text no longer moves the thread above it.

Koala UI started in January 2024 as a Figma design system. Eleven desktop versions and a mobile kit later, it also ships as code: starting today, Koala UI is a React library built on the same tokens, the same four themes and the same finish, ready to drop into your app.

This is the biggest release in Koala's history. It is not a port of the Figma file: every component was rebuilt in React, documented page by page and designed for all four themes. Here is everything that ships in 1.0 and how the pieces fit together.

What's in the box 📦

• 125 components, free forever: forms, overlays, menus, data tables, charts, AI chat, maps and more.
• 190 sections, Pro: marketing and ecommerce bands across 24 families, from heroes to checkout.
• 35 page examples, Pro: dashboards, authentication, CRM, tasks, mail, chat, onboarding, checkout and blog posts.
• 8 templates, Pro: complete Next.js sites and apps you can browse live before you download the source.
• 4 themes, 9 accent presets, one radius knob and 2 densities, shared by every part of the system.
• A CLI that copies the source into your project, a docs page for every component and foundation, and a skill for AI agents.

125 components, free forever 🧩

Every component lives in its own folder and has its own docs page, with live demos, every variant and the props it takes. One command installs any of them, with nothing to sign up for.

• Actions: Button, Button Group, Toggle, Toggle Group, Link, Toolbar and Kbd.
• Form controls: Input, Input Group, Textarea, Select, Native Select, Multi Select, Checkbox, Radio Group, Switch, Slider, OTP Input, Password Strength, Rating, Date Picker, Color Picker, Emoji Picker, File Upload, Signature Pad, Rich Text Editor, Expandable Search, Field, Label and Form.
• Ready-made forms: Auth Form, Contact Form, Newsletter Form, Waitlist Form, Payment Form, Settings Form, Feedback Form, Survey and Checklist.
• Overlays and menus: Dialog, Drawer, Sheet, Popover, Hover Card, Tooltip, Dropdown Menu, Context Menu, Menubar, Command, Toast and Lightbox.
• Navigation and layout: Sidebar, Navbar, Navigation Menu, Footer, Dock, Island, Tabs, Breadcrumb, Pagination, Stepper, Table of Contents, Layout, Section, Section Header, Resizable, Scroll Area, Divider, Collapsible and Accordion.
• Data and status: Data Table, Chart, Heatmap, Stat, Animated Number, Ranking, Description List, List, Tree, Activity Feed, Progress, Skeleton, Spinner, Alert, Badge, Badge Group, Avatar, Avatar Group, Empty State, Map and QR Code.
• Content and media: Card, Carousel, Gallery, Video Player, File Preview, File Card, File Icon, Flag, Code Snippet, Prose, Signature, Animated Label and Load More.
• AI: AI Panel, Chat, Prompt Input, Suggestions, Generation and Push to Talk.
• Marketing and commerce: Hero, Bento, Announcement, Banner, Promo Card, Pricing, Pricing Comparison, Plan, Testimonials, FAQs, Team Member, Job Card, Placeholder Logos, Cookie Consent and Order Summary.

Finished down to the detail ✨

A kit is judged by the parts nobody screenshots. These rules hold for every component, not just the ones on the home page:

• Accessible by default: every interactive part sits on a Radix UI primitive, so focus trapping, roving focus, typeahead, Escape to close and the right ARIA roles come without extra code. The target is WCAG 2.1 AA.
• Easy to hit: controls keep a hit area of at least 40 by 40 pixels, show a focus ring in your accent color and use a pointer cursor.
• Steady numbers: stats, prices, counters and table cells use tabular figures, so values never jitter as they change.
• Calm motion: transitions name the properties they animate, can be interrupted halfway and respect prefers-reduced-motion.
• Surfaces that nest: radii stay concentric from a card to the button inside it, and shadows are tuned per theme so dark surfaces keep their depth.
• Typesetting: headings balance their lines and body text avoids orphans, in every theme and at every width.

Themes, accents, radius and density 🎨

Koala is themed entirely through CSS variables. Components read semantic tokens, never a raw color, radius or shadow, so four independent knobs restyle the whole system:

• Four themes: Light, Cream (a warm paper tone), Dark and Moonlight (a dark theme with blue undertones). The included theme provider switches them at runtime, and dialogs, menus and toasts follow.
• Nine accent presets: Blue, Violet, Pink, Red, Orange, Amber, Lime, Green and Teal, applied with a single data-accent attribute. One value recolors checkboxes, switches, sliders, focus rings and links at once.
• One radius knob: --radius drives the whole scale, so the system goes from sharp to soft with one value.
• Two densities: comfortable for marketing pages and compact for application UI, set once for a whole subtree with DensityProvider.

The four combine freely, so the same component works on a landing page and inside a dense dashboard. To make the system yours, override one block of variables: the theming guide walks through it.

Foundations, documented 📐

• Typography: Inter for UI and body copy, DM Sans for headings, with Tailwind v4's scale, weights, tracking and leading.
• Color: semantic roles such as background, foreground, muted, border and brand, defined once per theme.
• Motion: three easing curves and three durations as Tailwind utilities, plus spring and sine curves, mirrored in lib/motion.ts for JavaScript animation.
• Radius and shadows, spacing, breakpoints, aspect ratio and density, each with its own page.
• Assets: Phosphor icons, flags and file icons, plus the scroll fade and morphing utilities.

Built on a modern stack ⚙️

• React 19 and the Next.js App Router: ref is a regular prop, with no forwardRef wrappers.
• Tailwind CSS v4, with every variant written as a tailwind-variants recipe. Your className is merged last, so an override always wins.
• Radix UI primitives for behavior and accessibility, and Phosphor for icons.
• 100% TypeScript with named exports (CardHeader, never Card.Header), so every part crosses the server and client boundary.
• Semantic tokens only: change a color role or the radius once and every component follows.

190 sections and 35 page examples 🧱

Sections are complete page bands assembled from the free components: copy one in, change the words and ship it. Every one is previewed live in a device frame on the marketing and ecommerce pages.

Page examples go one level up: whole screens to start an app from. Among them are 15 dashboards, 7 authentication screens, blog post layouts, a CRM, task boards, a mail client, chat, onboarding and checkout.

8 templates 🖥️

Templates are complete Next.js projects built only from Koala components. Every demo is free to browse live; with Pro, koalaui template <name> writes the full source into an empty folder.

• Metro Dispatch: a police dispatch console on the real New York, with streets from NYC Open Data, units moving on a live map, push-to-talk radio and full person records.
• Pipeline B2B: for marketing agencies and studios that need to turn visits into leads.
• Elevate B2B: a dark SaaS landing page with features, testimonials and pricing.
• Vital 360: for health and wellness, with training, mindfulness and nutrition services.
• Heaven Auto: for car dealerships that sell luxury cars and premium services.
• Urban Luxe Neo: for interior design studios that show projects and services.
• Course Craft: for online courses in education and illustration.
• Creative Shutter: for photographers, designers and creative agencies.

You own the code 💻

There is no package to lock you in. The Koala CLI copies the source into your repo, so every file is yours to read and change, and nothing breaks when we ship an update.

npx koalaui-cli@latest init
npx koalaui-cli@latest add button card dialog

A koala.json file records what you installed, so update can tell a file you changed from one you did not. For CI, activate a seat once with login <key> --name ci --no-save and store the ids it prints as secrets.

Ready for AI agents 🤖

Koala's docs are written for coding agents as much as for people. See AI and agents for the setup in each tool.

• Markdown pages: add .md to any docs URL to get the page as clean Markdown, with its prose, tables and every code sample.
• Copy page: the menu at the top of every docs page copies it as Markdown or opens it in ChatGPT or Claude.
• llms.txt indexes every page with its summary, and llms-full.txt holds every free docs page in one file.
• The skill: npx koalaui-cli@latest skill writes the house rules, tokens, themes and a reference per component into your project. Claude Code picks it up on its own, and Cursor, Codex and any agent that reads AGENTS.md can point to it.
• Same CLI, same license: an agent installs free items like you do, and Pro items with the seat already active on the machine.

Free and Pro 🔓

• Free: all 125 components, the helpers and the tokens, for any project, with no account.
• Pro: every section, page example and template, with a one-time license for unlimited projects, client work included. The Solo plan also includes the Figma file.

See pricing for the plans.

Coming from shadcn/ui? 🔁

The migration guide maps every shadcn/ui component and size to its Koala counterpart. To start from scratch, follow the installation guide.

What's next 🛣️

1.0 is the foundation, not the finish line. New components, sections and templates are planned in the open on the roadmap, and you can suggest a feature there. Thank you to everyone who built with the Figma kit and asked for code: this release is for you.

Also on launch day 🎁

New ✨

• Paper: A printed document on screen that scales as a whole.
• NotebookPage: A sheet of notebook paper behind what someone writes.
• Existing members: The access guide for buyers from the old site.

Improved 🛠️

• RichTextEditor: Opt-in text alignment, starterKit and extensions props, quote and code styles, and translatable labels.
• Lightbox: A loop prop and translatable labels.
• Carousel: A peek layout that shows the neighbouring slides.
• Navbar: collapseAt="xl" collapses it at the wider breakpoint.
• Chart: Translucent stacked areas.

Fixed 🐛

• RichTextEditor: No longer calls onChange on mount.

Koala UI v11 is a major update to our Figma design system for product and AI interfaces. This release focuses on design system consistency, AI‑ready UI patterns, and a fully responsive component library that scales from desktop to mobile.

Global System Improvements 🌐

• Unified spacing across buttons, inputs, dropdowns, selects and more so your Figma components look perfectly aligned in complex dashboards and AI tools.
• Introduced padding variables for inputs and buttons, making it easier to manage spacing at scale inside your Figma design system file.
• Delivered over 400 micro‑improvements to consistency, color tokens, typography, and spacing, so Koala UI behaves like a cohesive, production‑ready design system for SaaS and AI products.
• Adjusted line-height and letter-spacing across all text styles to improve readability in dense AI dashboards, data tables, and chat layouts.
• Connected all typography and font values to Figma Variables, simplifying theming, multi‑brand work, and AI product UI experiments.
• Fixed multiple bugs and inconsistencies where edited components could become detached and show as "reset default", improving reliability when teams scale their design system in Figma.

Themes & Accessibility 🌓

• Improved the Moonlight theme for better contrast and accessibility, ideal for AI dashboards, code‑heavy UIs, and dark‑mode tools.
• Refined color tokens so components stay legible and on‑brand in both Dark and Moonlight modes, keeping your Figma design system consistent across themes.
• Updated the branded focus ring in Dark and Moonlight themes to support keyboard navigation and accessibility requirements out of the box.

Core Components 🧩

• Buttons, Inputs, Dropdowns, Selects: Unified heights, paddings, and spacing across all interactive controls so forms, filters, and AI prompts feel consistent in your product.
• Checkbox: Visual refinements for clarity, alignment, and state feedback, especially in dense settings pages and AI configuration panels.
• Radio: Improved alignment and states for cleaner decision groups in onboarding flows and AI feature toggles.
• Badges: Reworked badge styles and colors so status labels and AI state indicators look great in both Dark and Moonlight themes.
• Chips (New): Added a new chips component ideal for AI filters, quick actions, and multi‑select prompts.
• Tabs: Clearer tab states and alignment for navigation across analytics, AI reports, and multi‑step workflows.
• Cards: Refined card layouts and added new variants for dashboards, AI insights, and content previews.
• Alerts & Notifications: Improved hierarchy and structure for system messages, AI errors, and in‑product toasts.
• Tooltips: Better contrast and spacing to explain AI features, settings, and parameters without clutter.
• Popovers: More polished menus and contextual panels for command palettes and action menus.
• Slider: Updated slider visuals for fine‑tuning AI model parameters, thresholds, and ranges.
• Select: More consistent visuals and states so dropdowns feel aligned with inputs in complex forms.
• Keyboard Shortcut: Clearer keycaps and layout for documenting shortcuts in power‑user and AI tooling experiences.
• Pagination: Improved controls for navigating long data sets, logs, and AI output histories.
• Rich Text Editor: Visual refinements so editors used for documentation, AI prompts, and content creation feel integrated with the rest of the system.
• Command Menu: Enhanced customization options so you can build command palettes for AI tools, admin panels, and power‑user workflows.
• Header: A more robust header component for products, dashboards, and AI‑heavy applications.
• Dashboard Widgets: Updated widgets and new variants for analytics, AI metrics, and real‑time monitoring.
• Date Picker: A more consistent, accessible date picker for scheduling, logs, and time‑based AI rules.
• Drawer: Better structure and spacing for secondary navigation, settings, and contextual AI panels.
• Dialogs: New dialog structures with padding connected to variables, making it easier to standardize modals used for confirmations, AI actions, and critical flows.
• Empty State (New): New empty state patterns for onboarding, no‑data views, and first‑time AI experiences.

Emojis & Icons 🎨

• Added new emojis and icons so you can visually differentiate AI actions, states, and product areas directly in your Figma components and design system documentation.

Layouts & Pages 📄

• Added new variations to the Blog Article page to support content marketing for AI products, design systems, and Figma resources.
• Improved Email pages with clearer hierarchy for product updates, AI feature launches, and lifecycle campaigns.
• Refined Forgot Password pages to feel more trustworthy and aligned with the rest of your design system.
• Improved Tasks pages with better hierarchy and spacing for productivity tools, AI task managers, and operational back‑offices.

Mobile Experience 📱

• Added new mobile pages so Koala UI covers more mobile design system patterns used in SaaS and AI companion apps.
• Applied the new spacing and consistency rules to Koala UI Mobile, aligning desktop and mobile components inside your Figma libraries.

Quality & Consistency 🛠️

• Fixed a range of bugs and inconsistencies, especially around components becoming detached from their bases, making Koala UI more reliable as a shared Figma design system for large teams.
• Continued polishing of spacing, colors, and typography so AI products, dashboards, and marketing sites built with Koala UI feel cohesive and production‑ready.

We’ve extended Koala UI to go beyond web. Now, with the same design system, you can build native mobile apps for iOS and Android, all from a single Figma file.

This means faster prototyping, better consistency across platforms, and a smoother workflow between design and development.

What’s inside the mobile kit

• 400+ mobile components: fully responsive and structured
• 30+ ready-to-use screens: from onboarding flows to dashboards
• Light & Dark themes: included by default
• Auto layout: optimized for mobile constraints
• iOS & Android guidelines: respected in every pattern
• Production-ready: ideal for MVPs, startups, and full apps

Koala UI now adapts to every screen, from desktop to mobile design. One Design System. One payment.

Hi everyone! Hope you're enjoying your summer (unlike me—feels like I've been working 24/7 😅). Anyway, today I'm bringing you one of those long-awaited updates that many of you have been asking for. Here's what's new:

• 🟣 Radius updated from 8px to 10px (experimental). Padding adjusted accordingly.
• 🎨 Color tokens updated for better accessibility and aligned with Tailwind v4.
• 🌗 Focus states improved for consistency across light and dark themes.
• 📝 Text Editor introduced.
• 🎨 New Color Picker component added.
• 😄 Emoji support added.
• 🪜 Stepper component added for multi-step flows.
• 📌 Popover component introduced.
• 👤 Avatar updated: status is now a standalone component (active, inactive, away, busy). Sizes and addons fixed.
• 👥 Avatar Group updated for better layout consistency.
• 🔖 Badge cleaned up: unnecessary variants removed, padding fixed, pink variant added.
• 🧾 Breadcrumbs improved and new variants added.
• 🔘 Button paddings and sizes improved. Destructive (red) variant coming soon.
• 📤 File Upload updated.
• 📋 Inputs improved: better consistency, new variants like password strength and OTP.
• 🔲 Checkbox and Radio updated (interaction layer now absolute – experimental).
• 📂 Select component updated and expanded with new variants.
• ➗ Divider component improved and curved variant added.
• 🪟 Dialogs improved and new variants introduced.
• 🗂️ Tabs updated for better usability.
• 🧠 Tooltip refined and new variants added.
• 📣 Activity Feed improved and new variants added.
• 🧭 Command Menu enhanced with new variants.
• 📊 Dashboard Widgets improved with new states and layout options.
• 🗃️ Drawer updated with additional variants.
• 🧑🏫 Guided Tour component improved and expanded.
• 🧱 Product Headers improved.
• 🧭 Navigation component improved with new variants.
• 📅 Calendar now shows current time in week view.
• ✅ Tasks improved with new Kanban view variants.
• 🧑💼 Profile component improved.
• ⚙️ Some components (checkbox, radio) now use position: absolute for better performance under evaluation.

After the Figma Config 2025 update, we’ve spent weeks bringing Koala UI to the next level. Here's everything new and improved in this release:

• 🎉 All components updated according to the latest Figma Config 2025 changes.
• 🖼️ All images now include aspect ratio settings for consistent scaling.
• 🏷️ Added brand logos so you no longer need to search for them in other documents.
• 🌗 Improved contrast in dark mode and several light mode elements using Figma Variables. Secondary text is lighter, and hover backgrounds are darker to clearly differentiate from active states, especially in sidebar navigation.
• 🆕 Added 20 new icons.
• 🚨 New alert & notification variants added.
• 🔖 Improved badge component.
• 🎨 Simplified and improved the background/overlay component for better consistency in light and dark modes.
• 🔴 Buttons improved and now include a “destructive” red variant.
• 🧩 Improved button groups for better alignment and usability.
• ➗ New divider variants with smoother, curved edges to align with the playful updates from Figma.
• 💬 Improved dialogs and introduced new variants.
• 📁 Updated file upload component.
• ✏️ Inputs enhanced with new variants including inline inputs and amount inputs.
• 🧭 New product variants added to the navbar.
• 📌 Introduced the Popover component.
• 🗂️ Tabs component improved for better usability.
• 🧠 Tooltip component refined for clarity and better performance.
• 📣 Improved multiple marketing sections: CTA, FAQs, Features, Footer, Gallery, How It Works, Pricing, Team, Testimonials, and Voting.
• 🕒 Activity Feed component updated with new variants.
• 🃏 Card component improved and new variants added.
• 📆 New week view variant added to the Calendar component (day and agenda views coming soon).
• 📊 Charts improved for clarity and performance.
• 🧭 Command menu enhanced with new variants.
• 📈 New and improved dashboard widgets, including new states like hover.
• 📅 Date Picker component improved for smoother interactions.
• 🗃️ Drawer component updated with new variants.
• 🧱 New product headers introduced.
• 🧭 Sidebar navigation for application layouts improved for better usability.
• 🧾 Product tables refined for better readability and customization.
• 🧑‍💻 Dashboard templates improved and new variants introduced.
• ✉️ Email/Inbox template updated for better usability.
• ✅ Task template improved with clearer structure.
• 🧑‍💼 Profile template improved with better layout options.
• ⚙️ New templates introduced for Settings, Account Setup, and Dashboards.
• 🧹 General product cleanup: Removed unnecessary components, renamed some layers, and added more real content.

We're introducing Ecommerce in Koala UI. This means you can now design for online stores.

If you're a designer working with clients, you can now include ecommerce in your service offering.

And if you're an entrepreneur looking to launch your own store, you can now create multiple concepts using our templates.

🔠 Typeface as Figma Variables

From now on, the typeface can be changed directly using Figma Variables, allowing for even deeper customization in your projects.

You can make the typography cleaner, more modern, more minimalist, whatever fits your style.

Choose as many variations as you like.

🫒New Color Mode: Dark Green

You can now customize your projects even further with 4 modes and 3 themes that you can mix and match freely.

We highly recommend experimenting by combining color modes with typography and border radius settings for a more refined and tailored design.

✨ New Features

• Max-width container: container-xlarge: You can now build layouts with an even wider container, giving you more flexibility for spacious designs.
• ‍Introducing Flows: From now on, you can view the entire flow—not just individual screens. See how components and elements interact with each other in a complete, connected experience.
• Added 3 new pages to Koala UI website: Marketing, Ecommerce & Product.

🧩 Introduced New Variants to:

• Account Verification
• Account Setup / Onboarding
• Reset Password
• Hero Section
• Navbar Mega-menu
• Footer Section
• Team Section
• Banner Component.
• Navbar Component.
• Bento section.
• CTA Section.
• FAQs Section.
• Features Section.
• Gallery Section.
• How It Works Section.
• Pricing Section.
• Testimonials Section.
• Voting Section.
• [Ecommerce] Cart Component.
• [Ecommerce] Product Details.
• [Ecommerce] Product List Section.
• [Ecommerce] Widgets.
• [Ecommerce] Adding to Cart.
• [Ecommerce] Checkout.
• [Ecommerce] Product Details Page.

🛡️ Form Enhancements

• Introduced input strength password.

🔠 Placeholder content

• Most of the lorem ipsum content has been removed, and nearly the entire Design System now features real, production-ready content.

Welcome to Koala UI v7. After 2 months of hard work following the v6 update, here's everything new we've introduced:

Preview update

• Improved documentation across the entire document.
• New marketing variants for the Team section.
• Updated avatars: Previously using free-use images from Freepik, now using Unsplash images, which require no license attribution.
• Rating variant added to the Table component.
• 2 new Chat/Messenger product templates.
• 8 new Checkout product templates.
• 10 new Dashboard product templates.
• New Ecommerce Orders product template.
• 3 new Task Management product templates.
• 8 new Profile product templates.
• 3 new Email product templates.
• Updated Calendar product template.
• All images now use the aspect ratio from the latest Figma update.
• Redesigned table structure: Columns remain the foundational element but are now individual components themselves.
• Added 7 new table template variants for task management, order management, user management, etc.
• Introduced Progress Bar and Progress Bar with Tooltip as cell variants for tables.
• Added Payment Method component as a cell variant for tables.
• Added Logo component within a Badge as a cell variant for tables.
• Enhanced table experience: Columns are now individually customizable, allowing easy column type switching, with minimum width requirements specific to each table type.
• New Timeline and Activity Feed components introduced.
• Fixed some testimonials with legacy styles.
• Added over 10 new testimonial variants.
• Introduced new Date Picker variants.
• New Dashboard widgets added.
• Updated and added new Footer variants.
• New Tooltips introduced.
• New Drawer components and variants introduced.
• Updated Product variant headers.
• Improved and updated Charts.
• Introduced Event Details page in the Marketing section.
• Introduced Event Page in the Marketing section.
• Updated Team section with new avatars and additional variants.
• Updated Hero Section component.
• Updated existing FAQ components and added new variants.
• Improved, updated, and added new CTA variants in Marketing.
• Improved, updated, and added new Careers Section variants in Marketing.
• Updated/improved Select Inputs: Date picker can now be opened directly from inputs.
• Updated/improved Radio Buttons and added new variants.
• New Slider component introduced.
• New Progress component introduced.
• Updated and enhanced Pagination component following best practices.
• Improved Input component.
• Updated and improved File Upload component.
• Updated Dropdown component.
• Updated and added new Dialog component variants. Improved Dialog structure.
• Introduced Cookie Banner component.
• Updated and improved Breadcrumb component.
• Improved Badge component.
• Improved Alert & Notifications component.

We have big ambitions, and we want Koala UI to be the best Design System possible for marketing and product.

This year, we are seriously focusing on expanding both departments, and that’s exactly what we’re doing.

This month, we’ve introduced over 50 improvements in the product section.

Analytics Demo

Other updates

• Changed how tooltips were built and brought back the white and black variants.
• Adjusted the dropdown item to 4px top padding.
• Changed the color from "icon" to "foreground." The color was originally intended only for icons, but as the product expanded, we found the need to apply this property to other elements as well.
• Added new content tables with a topic.
• Added a new "none" addon variant to avatars.
• Added hover tooltips to buttons.
• Changed the disabled state of the brand button.
• Changed the radio button.
• Increased spacing between blocks in the sidebars.
• Added new sidebar variants.
• Added new radio button cards and checkboxes.
• Deleted some FAQ sections to improve design system consistency.
• Added vertical tabs.
• New component: Rating.
• Removed arrows from buttons.
• Created dashboard templates and added three.
• Created activity feed.
• Created new charts and graphs on January 27, 2025.
• Added table groups.
• Fixed an issue with the max width of the feature header.
• Made new changes to pagination to improve behavior in product applications. Removed padding and max widths.
• Created different table types by category: finance tables, marketing tables, user management tables, etc.
• Improved the select input component.
• Improved the menu component of the select input.
• Added payment method options in tables and inputs (text & select input).
• Introducing dashboard templates.
• New pagination variants.

What's coming this 2025

We have great expectations for Koala UI this year, and one of the biggest goals is the expansion to Mobile Design.

The goal is to finish the year with a high-quality version of Koala UI ready for:

1. Marketing
2. Product
3. Mobile

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.

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.

Preview Figma File

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.

Check component

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.

Follow us on Twitter

Introduced Register, Login and OTP Verification Pages

Dropdowns

New variants added → Opened, disabled…

Check component

Avatars

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

Check component

Button new states

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

Check component

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.

Check component

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.

‍

Keeping users informed about the company is vital for an optimal experience. We have introduced 6 new variants, and more are coming soon!

Everyone loves to always know a little more about projects or brands, we have introduced 6 new sections of 'about us,' 'about us,' or 'our team.' Present your team or explain about your company in the best possible way.

We have added 2 new different formats for the Careers section. Now you will be able to create job postings with all possible details: role, salary, description, image, company, location, etc.

The Hero sections are probably the most important in web page creation, as they are essentially the first impact a user has when interacting with the website.

We are pleased to announce that we have added 10 new sections to the Figma document.

The "unique pages" are a crucial and distinctive element of Koala. Essentially, they are pre-prepared sections designed for conversion, so users do not have to contemplate which structures to follow. Everything is well-thought-out.

Today, we are announcing 5 new pages for the careers section. These sections are primarily used to attract talent and provide opportunities to new users.

Today, we introduce more than 9 different CTAs (Calls to Action) in the Design System, precisely 13 different variants. This will allow you to increase the possibilities of conversion on your website. CTAs are elements used to guide users to explore new functionalities, subscribe to newsletters, or make purchases from other locations.

These CTAs are designed to drive engagement and enhance user interaction. Used correctly, they can significantly increase conversion rates.

These CTAs are available in the Figma document.

Remember that you can also mix them with 3 different themes (light, dark & cream) and 3 variants: Rounded, Full & Sharp.

Happy building

We are thrilled to announce the launch of Dark Mode and Cream Mode. This changes everything radically. Why? Let's do a simple equation: If you have 500 components and multiply them by 3 variants - Light Mode, Dark Mode, and Cream Mode - you get 1500 components. With 500 components, if we calculate the factorial to see the number of variations possible, it yields a colossal number, 500! ≈ 1.2216779×10^1134. But if, on top of that, instead of calculating it based on 500 variants, we calculate it with 1,500, you can imagine the possibilities and options for creating different things.

In a nutshell, having 500 different components in 3 different modes significantly increases customization possibilities and enables our users to create even more varied websites. The capabilities of personalization and differentiation are elevated to an extraordinary degree

Happy building!