Changelog

Right-to-left (RTL) support

Untitled UI React library now supports creating RTL-ready layouts.

This is an optional feature you can opt-in to easily if you want to support RTL in your application. Check out our RTL migration guide to learn how.

Core improvements and Tailwind CSS v4.2 colors

With Untitled UI v8.0, we focused on refining the entire library: improving core components, filling gaps in the system with new components, and tightening overall quality and consistency.

This update has laid the foundations for a planned release cadence. As always, we’re focused on continuous improvements and updates to Untitled UI as we use it in real-life projects in pursuit of the “perfect” design and code library.

What’s new in version 8.0

We won’t cover every pixel, but here are some highlights:

• Tailwind CSS v4.2 color palette (more on this below).
• New Input components, including Date and time, Number counter, and OTP variants and a new sm size (36px height).
• New Multi-select components, with search support.
• New Dropdown components, including sub-menus and new Context menus.
• New Breadcrumb components, including an Account dropdown variant.
• New Color picker components, with support for solid, gradient, and image fills.
• New Filters components for filtering tables and page data, including advanced rules-based filtering/query builders.
• New Tree view components, with collapsible nested levels.
• New Empty state components, with four new variants.
• New Modal components, with tighter spacing, horizontally stacked buttons, and several new variants.
• New Slideout menus, with several new variants.
• New Pagination components, with support for specific page navigation and adjusting rows per page.
• New Tech grid background patterns (as used on the Untitled UI website).
• New Country flag icons, with support for 261 countries and 3 styles.
• New Payment method and Folder icons.
• New Integration icons, useful for use in Select and Dropdown components.
• Improved Buttons, including a new xs size (32px height).
• Improved Social buttons, including a new md size (40px height).
• Improved Avatar components, along with subtle skeuomorphic effects.
• New Date picker components, with a new Available times variant and support for date and time inputs.
• Improved Sidebar navigation and Header navigation components, with simplified components and tighter spacing.
• Improved Tabs components, with support for icons.
• Improved Toggle components, with better contrast.
• Improved Command menu components, with simplified structure.
• Simplified file structure, along with alphabetical ordering.
• Simplified and improved variables and disabled states for components.
• Improved and updated documentation within Figma files.
• Tightened spacing and typography across the entire library, particularly across application UI components, dashboards, settings, and informational pages.
• Hundreds of small but meaningful improvements to core components and UI examples.

Other updates

• Upgraded Untitled UI React to support the latest version of React v19.2, Tailwind CSS v4.2, TypeScript v5.9, and React Aria v1.16 improvements.
• Multiple payment currency support for all Untitled UI products.

All of these updates and improvements are included for free in both Untitled UI React and Untitled UI Figma, including all three versions of the Figma UI kit:

• Untitled UI Figma PRO VARIABLES: Color, spacing, radius, width, typography, and effects variables (including dark mode!).
• Untitled UI Figma PRO STYLES: Does not include variables for those who prefer to keep their workflow simple.‍
• Untitled UI Figma PRO LITE: Our lightweight version of the full Untitled UI Figma PRO STYLES kit. It’s 55% lighter and faster and is designed to include everything you need.

Please sign in using the email address you used to purchase Untitled UI to access updates. We've also published detailed upgrade documentation for Untitled UI React to make moving from v7.0 to v8.0 as smooth as possible.

Replit integration

Untitled UI React can now be used directly in Replit projects. Start building interfaces quickly using our CLI and component library inside the Replit development environment.

This makes it easy to experiment, prototype, and build full applications with Untitled UI React directly in the browser.

Gemini integration

You can now use Untitled UI React with Gemini with our new Gemini integration.

Our Next.js and Vite starter kits include everything needed to get started, including providers, routing, and a GEMINI.md file that gives Gemini context about the component library so it can generate and compose UI using Untitled UI components.

MCP server

We’ve added support for our MCP server, allowing Untitled UI to connect directly with AI tools like Claude Code and Cursor.

Your AI assistant can browse the component library, search for components, and install them into your project using natural language.

components.json integration

Untitled UI now supports components.json configuration for projects using the CLI. This allows the CLI to understand your project structure, including component directories, path aliases, and install locations.

The CLI can also automatically create and configure a components.json file when setting up a project, ensuring components are installed in the correct location with the right configuration from the start.

Copy components and pages

Use the new Copy as dropdown to copy React components and layouts as markdown. You can open them directly in v0, ChatGPT, or Claude to generate or modify interfaces with AI.

This makes it easier to work with Untitled UI components inside modern AI coding tools. Support for more AI tools is coming soon.

Monorepo integration

Untitled UI React now supports monorepo project setups. You can initialize and install components inside shared packages or app directories within your workspace.

The CLI reads your components.json configuration to understand aliases and workspace structure, making it easy to share UI components across multiple apps in a monorepo.

Improved quick search (⌘+K) and navigation

We’ve upgraded the search and navigation experience in Untitled UI React:

• Quick search: Open the menu instantly with ⌘K (or click the search icon at the top of the sidebar).
• Improved navigation: The sidebar now has a cleaner structure with collapsible sections, making it faster to find what you need.

As always, we’re focused on continuous improvements and updates to Untitled UI as we use it in real-life projects in pursuit of the “perfect” design and code library. We're working on some much bigger updates behind the scenes and will have more announcements soon!

Introducing Untitled UI React!

Untitled UI React is the world’s largest collection of open-source React components built with Tailwind CSS and React Aria. Just copy, paste, and build.

Skip months of design and development with pixel-perfect, production-ready components. Untitled UI React is built with React Aria and TypeScript v5.8, and styled with Tailwind CSS v4.1. It's the perfect starting point for any project, no matter the size.

We've made a huge part of Untitled UI React free and open source. Use our free components in unlimited commercial projects—no strings attached.

What makes Untitled UI React better?

Untitled UI React isn't just a collection of basic components like most React component libraries. It's consistent, professionally designed, and includes everything you need to design and develop modern, beautiful interfaces, web apps, and websites in one neatly organized package.

Here’s what sets Untitled UI React apart:

• Built by professionals. Accessible, responsive, and production-ready components designed for modern performance using a modern tech stack.
• 5,000+ components. Not just another basic or inconsistent library, but a comprehensive, growing collection with 5,000+ components and 250+ page examples to help you design and build with confidence.
• Open-source components. Hundreds of free and open-source components and sections you can use in unlimited commercial projects.
• Styled with Tailwind CSS v4.1. Copy production-ready components built with the latest Tailwind CSS v4.1 utility classes and performance.
• React Aria accessibility and longevity. Built on React Aria with WAI-ARIA accessibility standards and best practices—actively maintained by Adobe, so you won’t get left high and dry like Radix UI and other frameworks.
• No third-party maintainers. Modern performance without annoying lock-ins. You own the code, so you can build and extend without relying on third-party maintainers and packages.
• Custom CLI tool. Add components or scaffold new projects effortlessly with a single command using our custom CLI tool.
• Official starter kits. Launch faster with pre-configured starter kits for Bolt.new, Next.js, and more—designed for real-world apps, not demos.
• Synced with Figma. Perfectly aligned with Untitled UI Figma, the world’s largest and most popular Figma UI kit and design system. Keep design and code perfectly in sync, with free updates for life.
• One purchase, free updates for life. No annoying subscriptions. No hidden fees. Use Untitled UI React components in unlimited projects, forever.

Too many React component libraries lack in size, scalability, consistency, or quality—usually all three. We couldn't find a React component library we loved, so we built the biggest one in the world.

Check out our documentation and explore our free components to get started.

What tech stack does Untitled UI React use?

Untitled UI React components are built with and powered by:

• React v19.1
• Tailwind CSS v4.1
• TypeScript v5.8
• React Aria

We’ve kept our tech stack minimal, so you can focus on building instead of wrestling with dependencies. You own the code, so you can build and extend without relying on third-party maintainers.

We're always working to make Untitled UI better than ever, including implementing new updates into our products as fast as possible. All Untitled UI products come with free updates for life.

Untitled UI Icons npm now available

We’ve added React support and official npm packages for Untitled UI Icons! Instantly install, import, and style Untitled UI Icons as React components.

You can now instantly install, import, and style icons as React components. Plus, copy any icon in SVG or JSX format directly from the new Untitled UI Icons resource page.

View installation guide ​​→

Explore Untitled UI Icons →

If you’ve purchased the PRO version of Untitled UI Icons, you can unlock additional styles by configuring your package manager with your private access token. Sign in to Untitled UI for setup instructions.

New components + ready for React!

This update includes many new components and significant improvements to existing core components, including buttons, text editors, and tables. As always, we’re focused on continuous improvements and updates to Untitled UI as we use it in real-life projects in pursuit of the “perfect” design library.

What’s new in version 7.0

We won't cover every pixel, but here are the main updates:

• Simplified Buttons, including a new “loading” state and contrast between text and icons.
• New and improved Messaging components, with multiple different types of messages and media.
• New and improved Video player components, with improved styling and functionality.
• New and improved Table components, with a ~50% reduction in variants and a new smaller size Table cell for more compact UI.
• New Text editor component (replaces the WYSIWYG toolbar).
• New and improved Modals, including user settings and text editor examples. Modals now use radius-3xl (16px) by default for a friendlier feel.
• New and improved Slideout menus, including user settings and A.I. assistant chat.
• New and improved File upload components with better UX.
• New and improved Code snippet components with new tabs variant.
• New Informational pages examples, showcasing the new Text editor component.
• Improved and simplified Progress steps components and new number variant.
• Improved Empty state components, including sharper empty state illustrations and a new folder icon variant.
• New Featured icons and Folder icons styles.
• New and improved Social icons, including simplified vector paths.
• New and improved Cursor components.
• Simplified and improved Activity gauge, Progress circle and Pie chart components.
• Updates across the entire library to support Figma’s new Lock aspect ratio feature which was (finally) released a few weeks ago. This includes blog cards, video players, icons, etc.
• Improved shadows and borders for floating elements modals for sharper edges and contrast (modals, dropdown menus, date pickers etc.)
• Simplified Text styles, replacing and removing all “underline” and “italic” styles. Figma now supports these functions natively without detaching text styles.
• Tightened up spacing and typography across the entire file, particularly marketing site sections such as Team sections and Features sections.
• Simplified and improved variables with a focus on reducing component-specific variables.
• Improvements to prototyping across the entire library: transitions are snappier and 100% consistent across components.
• Small but significant improvements to other core components, including Inputs, Avatars, Icons, Badges, Date pickers, Modals, Header navigation etc. so they look nicer, are easier to use, and/or are more accessible + much more…

All of these updates are included for free in all three different versions of Untitled UI:

• Untitled UI PRO VARIABLES: Color (including dark mode!), spacing, radius, width, typography, and effects variables.
• Untitled UI PRO STYLES: Does not include variables for those who prefer to keep their workflow simple.‍
• Untitled UI PRO LITE: Our lightweight version of the full Untitled UI PRO STYLES kit. It’s 55% lighter and faster and is designed to include everything you need.

Improvements to resources pages (coming soon)

In case you missed it, we’ve also created some new pages on the site so you can quickly copy useful design assets from Untitled UI right into your design projects:

• 1,100+ FREE icons: We’ve added a quick search and copy to SVG page featuring 1,100+ icons from Untitled UI Icons.  
• 180+ FREE logos: Need some placeholder logos for your designs? Click to copy from this collection of fictional logos in SVG format.
• 370+ FREE avatars: Download these free placeholder user avatars and profile pictures to use in your design projects. Available in JPG, PNG and WEBP formats or a Figma library!

We’re actively working on improving these pages and will be releasing even better versions soon. Please share them on X (Twitter) if you find them useful! They’re 100% free to use in personal and commercial projects, even if you’re not a customer of Untitled UI.

New components + color palette + examples!

In version 5.0, we updated Untitled UI to support Figma’s new features released at Framework 2024 and Config 2024, rounding out color variables and introducing Figma’s new typography and effects variables.

Today, we've released Untitled UI v6.0, a different kind of update. This shiny new version of Untitled UI includes a new and refined default color palette, hundreds of new and improved components, and countless small but significant changes we’ve wanted to make for some time.

Unlike the last few updates which mainly focused on introducing variables (boring), this update is one that we’re excited about and enjoyed building.

What’s new in version 6.0

As always, we won't cover every pixel, but here are the main updates:

• Carefully refined and improved default gray color palettes for both light mode and dark mode. These are more neutral and practical with a decreased saturation (more on this below).
• Carefully refined and improved default shadows and gradient styles.
• New and improved Application examples, including dashboards, settings pages, and informational pages.
• New full-screen Calendar component with day, week, and month views.
• Improved Header navigation components with new “floating” style navigation.
• Improved Application navigation components, including new Sidebar navigation components.
• Many new Nav featured cards components to use in sidebar navs and layouts.
• Improved Line and bar chart components, including several new chart styles and handy Chart marker component.
• New Input dropdown component size and improvements so the menu resizes dynamically when menu items are removed without affecting functionality.
• Improved Table components, including refined Table header components.
• New Button utility component with a tooltip. These are small, subtle, and incredibly useful for dense UI such as sidebar navigation and table cells.
• New Metric item components, as well as many useful new Chart mini components to use in metric cards.
• New and improved Social proof sections and Testimonial sections.
• Updates to the Google Maps mockup component with the addition of useful image fill styles for placeholder maps.
• Improved and simplified Scroll bar component so sizing can be controlled dynamically using bottom padding.
• New Modal components.
• New Slide out menu components.
• New “slim” Toggle component.
• Improved and simplified 3:2 screen mockup, Macbook Pro mockup, and iPhone mockup components using image fill styles to dynamically switch between light and dark mode placeholders.
• New and fresh Modern screen mockup component.
• Huge improvement to PRO LITE, including the addition of skeuomorphic buttons and styles and more application examples.
• Refreshed all documentation images across all files.
• Updated and improved placeholder images throughout the entire file (credit: Lummi.ai).
• Updated and improved all thumbnail sizes to 1920x1080px (Figma recently changed thumbnails to a standardized 16:9 ratio instead of a weird 5:3 ratio).
• Subtle improvements to dozens of other components (e.g. Credit card mockup, Breadcrumbs, Command menus) so they look nicer, are easier to use, and/or are more accessible.
• Last but not least, a subtle update to the Untitled UI logo (hat tip: @huseyingayiran) + much more…

All of these updates are included for free in all three different versions of Untitled UI:

• Untitled UI PRO VARIABLES: Color (including dark mode!), spacing, radius, width, typography, and effects variables.
• Untitled UI PRO STYLES: Does not include variables for those who prefer to keep their workflow simple.‍
• Untitled UI PRO LITE: Our lightweight version of the full Untitled UI PRO STYLES kit. It’s 55% lighter and faster and is designed to include everything you need.

New default gray color palette

Untitled UI’s v5.0 default gray color palette was slightly blue saturated, giving it a “cooler” feel. This is a common approach, particularly in B2B and SaaS because it works well with “cooler” colors such as blue, indigo, and purple (e.g. Stripe).

With the release of Untitled UI v6.0, we switched the default gray color palette to a less saturated “flat” gray, for a clean and modern look and feel:

Why did we change to this new color palette?

This new gray color palette is more neutral with less blue saturation, making it easier to work with regardless of your project and your brand colors.

After using Untitled UI in dozens of different projects and creating 1,000+ daily design posts, we often found ourselves reverting to the Gray neutral, Gray iron, and Gray true alternative color palettes included with Untitled UI, all of which are desaturated.

The new gray color palette is more aligned with our long-term goal for Untitled UI: to be the perfect starting point for any project. It’s neutral, clean, and just “works”, regardless of what you’re working on.

Of course, if you want to revert back to the gray color palette used in Untitled UI v5.0, just edit your color variables or styles in your file to the following:

• Gray 25: #FCFCFD
• Gray 50: #F9FAFB
• Gray 100: #F2F4F7
• Gray 200: #E4E7EC
• Gray 300: #D0D5DD
• Gray 400: #98A2B3
• Gray 500: #667085
• Gray 600: #475467
• Gray 700: #344054
• Gray 800: #182230
• Gray 900: #101828
• Gray 950: #0C111D

You can find a step-by-step guide on how to change your color palette inside the Figma files under FOUNDATIONS>Colors>Notes and documentation.

Typography variables and updated components!

We've released v5.0 of Untitled UI to support Figma’s exciting new features released at Framework 2024 and Config 2024. These updates include support for typography and effects variables, meaning variables are officially out of beta.

Typography variables allow you to define values such as font families, font weights, font sizes, and line heights and apply them consistently across your entire system. We’ve updated the Untitled UI to include these new typography and effects variables.

We also made significant improvements to core components, focus states, and effects styles, and added a bunch of useful new components and assets!

What’s new in version 5.0

As always, we won't cover every pixel, but here are the main updates:

• Carefully designed and easy-to-use typography variables (more on this below).
• Simple and powerful shadows and effects variables.
• Improved button components with subtle skeuomorphic effects (more on this below).
• New “focus” and “active” styles with updates across all components, notably buttons and inputs (more on this below).
• Improved and expanded placeholder logos (180+ high-quality logos to use in your designs or for your project/business).
• Big improvement to Input field, Textarea input field, and Input dropdown components to support a dynamic * to indicate when a field is required, as well as a help icon.
• Similarly, simplified Section label component and added a dynamic * to indicate when a section is required, as well as a help icon.
• Improved and simplified Date picker dropdown component.
• Added a disabled state to the Input dropdown component to match the Input field component.
• Improved featured icons and new “Gradient” style, as well as the addition of preferred values for icon instance swaps for faster changes.
• New Folder icon and Award components.
• Simplified and improved tabs components and new modern “Button minimal” style.
• Simplified Avatar component.
• Replaced every single bitmap (image) inside the files, including avatar styles, with improved and compressed images.
• Minor tweaks to color palette.
• Improved Table components with “first on top” canvas stacking for easier prototyping.
• Improved Tooltip component, adding text string and more dynamic resizing.
• Simplified and improved _Metric item components.
• Improved and updated documentation across all pages to new UI3 + updated images.
• Expanded Badge modern component to include full spectrum of colors.
• Removed several variables not needed with new focus and active state styles.
• Simplified and improved dozens of other components so they look nicer, are easier to use, and/or are more accessible + much more…

All of these updates are included for free in all three different versions of Untitled UI:

• Untitled UI PRO VARIABLES: Color (including dark mode!), spacing, radius, width, typography, and effects variables.
• Untitled UI PRO STYLES: Does not include variables for those who prefer to keep their workflow simple.‍
• Untitled UI PRO LITE: Our lightweight version of the full Untitled UI PRO STYLES kit. It’s 55% lighter and faster and is designed to include everything you need.

New skeuomorphic style components

Many elements in Untitled UI, including buttons and featured icons, have recently been updated with a subtle skeuomorphic style.

Skeuomorphism incorporates depth, shadows, and textures to simulate the physical world, making components like buttons more “real” looking and visually engaging. We’ve intentionally kept this effect as minimal and subtle as possible.

Here’s an example with buttons:

Skeuomorphic design was popular in the early days of digital interfaces, especially with the introduction of Apple iOS. Over time, UI and web design have shifted towards minimalism and flat design.

Recently, skeuomorphism has made a noticeable comeback. Is it a trend? Yes, but so are many visual decisions in UI design. As long as accessibility fundamentals are maintained, we’re all for it.

As you can see in the example above the skeuomorphic effects we’ve added are extremely subtle and simple. They are achieved with a couple of shadow effects:

How to remove skeuomorphic effects

If you prefer the flat style of Untitled UI v4.0 buttons, it’s incredibly easy to remove skeuomorphic effects from your buttons and components. We’ve set it up that way.

These effects are set up as individual effects styles. Just change the effect style at the master component level to add or remove skeuomorphic effects:

You can even delete the shadow-xs-skeuomorphic effect style if you don’t need it!

Why the new focus state style?

Another major visual update to Untitled UI is a new “focus” and “active” state style:

A focus ring (also known as a "focus indicator") identifies the currently focused element on your page. Focus rings are important for accessibility when providing interfaces for users who are unable to use a mouse. Focus rings act as a stand-in for their mouse pointer.

The new focus state style is much more noticeable, switching from your brand-100 color to brand-500. We decided on this update for a few reasons:

1. It’s much better for accessibility. The new focus state style is much higher contrast and easier to identify for low-vision users (who are most likely to need it). @kajetanizycki created the perfect low vision simulation/comparison.
2. Simpler to use and for developers to implement. While Figma doesn’t offer the best support for focus:ring styling or multiple effects styles, CSS does. The new focus state style is simpler to use both in Figma and development.‍
3. Simpler effects styles and variables. The new focus state style allows us to simplify variables into just two aliases; focus-ring and focus-ring-error.

Untitled UI FREE v2.0

Our Untitled UI FREE UI kit has hit 100,000+ downloads! We've been blown away by the support for this project and are always making improvements to the PRO version.

To celebrate, we've made some improvements and updates to the free version of Untitled UI for the first time since we launched it back in 2021.

What’s new?

The free version of Untitled UI is essentially a slimmed-down version of the full UI kit. It includes global styles, basic components, and a few page examples. The majority of changes are subtle aesthetic and accessibility improvements:

• Simplified and improved hundreds of other components so they look nicer, are easier to use, and/or are more accessible.
• Text default has been changed from gray-500 to gray-600. While gray-500 text on a white background is WACG accessible with a contrast ratio of 4.95 (AA), gray-600 is significantly higher-contrast at 7.65 (AAA).
• Headings across all components and layouts are now semibold by default. This includes obvious section headers and card headers but also spans across most smaller components (e.g. avatar label groups, charts, checkbox groups).
• Similarly, buttons are now semibold by default.
• All cards have a slightly larger 12px corner radius by default.

The free version of Untitled UI is based mainly on v2.1 and doesn’t include Figma’s latest features announced at Config 2023, including color variables (dark mode), spacing and radius variables, Auto Layout 5.0, min/max widths, Auto Layout wrapping, and much more.

Variables and Auto Layout 5.0!

Dark mode is here! This is our biggest update yet.

We’ve completely refactored Untitled UI to support Figma’s latest features announced at Config 2023, including color variables (dark mode), spacing and radius variables, Auto Layout 5.0, min/max widths, Auto Layout wrapping, and much more.

What’s new in version 4.0

As always, we won't cover every pixel, but here are the main updates:

• Dark mode is here! Switch any component, layout, or page to dark mode with one click.
• Carefully designed, powerful, and easy-to-use color variables.
• Useful spacing, radius, and width variables.
• Huge Auto Layout 5.0 updates, including dynamic container max-widths and Auto Layout wrapping for more responsive designs.
• Truncated text wrapping added to components (e.g. blog cards) for perfect balancing of dynamic content in your designs.
• Scoping set up for all variables, making them easier to find and apply to your designs.
• We've added keywords to all icons for faster searching. Looking for a file icon, but can't remember what it was called? Now you can search file, attachment, text, paper, pdf, or report.
• Improved button components so they remain perfectly optically balanced when used with icons (hat tip to @JordanAmblin for this awesome tweak!)
• Destructive buttons have been moved to their own component so the main button component contains fewer variants and is easier to maintain (this also makes it lighter to use across the system).
• Improved accessibility contrasts across the entire system, particularly for text in components.
• Expanded, improved, and updated documentation throughout Untitled UI.
• New in-depth guide and documentation on variables, including how to use variables, how variables are named, and other best practices and tips.
• “Primary” color styles and naming convention switched to “Brand” for consistency with the variables naming convention.
• Simplified and improved hundreds of other components so they look nicer, are easier to use, and/or are more accessible.

There’s more. You now have access to three different versions of Untitled UI, depending on your project or how you prefer to work:

• Untitled UI PRO VARIABLES: Supports all the latest features announced at Config 2023, including color, spacing, radius, and width variables (including dark mode!) and Auto Layout 5.0 (min/max widths and wrapping).
• Untitled UI PRO STYLES: Supports the latest updates such as Auto Layout 5.0 (min/max widths and wrapping) but does not include variables for those who prefer to keep their workflow simple.
• Untitled UI PRO LITE: Our lightweight version of the full Untitled UI PRO STYLES kit has also been updated to support Auto Layout 5.0 (min/max widths and wrapping). It’s 55% lighter and faster and is designed to include everything you need.

Why have we released three different versions? 

As we mentioned, we’ve split the Untitled UI PRO into three different versions:

• Untitled UI PRO VARIABLES
• Untitled UI PRO STYLES
• Untitled UI PRO LITE

Why? This was a pragmatic decision so you can choose which system works best for your workflow or project. Designers and teams should feel empowered, not overwhelmed. If you aren’t using design tokens or variables already in your projects, it can be easy to feel overwhelmed.

If building and maintaining 3x versions of the same file sounds like an insane amount of work, please know that it was! However, we firmly believe using variables is not the best approach for everyone. It’s okay to continue using styles if you want to — we’ll dive into this more below.

We will continue to update a non-variables version of Untitled UI for the foreseeable future so you can continue to work with styles if you prefer to. It’s just as up-to-date with all the other new features announced at Config 2023.

Similarly, we first introduced PRO LITE way back in v2.6 as a premium and lightweight version of the full Untitled UI PRO STYLES kit. It's 55% lighter, and faster, and is designed to include everything you need and nothing you don't. It's perfect for moving fast and for smaller projects and is an incredibly powerful UI kit in its own right.

Do I need to use variables?

Variables are an exciting and powerful new feature in Figma. They bring another level of functionality, scalability, and flexibility to an already incredible design tool and bridge the gap between design and development even further.

The most commonly asked question we get from designers is, “Do I need to use variables?”. The answer is no. You don’t have to if you don’t want or need to.

It’s easy to get caught up in shiny new tools and design tokens have been one of Figma’s most anticipated features. However, implementing, managing, and using variables brings another level of complexity to the design process and your design projects. Adding, editing, and applying variables in Figma is more time-consuming than using styles. Anyone who tells you otherwise hasn’t used them in real projects.

The way we think about it is this; if you’re a large team, you’re already using design tokens in your design to development workflow, or absolutely need to have dark mode for every component and layout, then it probably makes sense to invest the time and effort to implement and use variables, just like it would make sense to use tokens in development.

If you’re a solo operator, a small team, have a simple product, want to move as fast as possible, or simply don’t care too much for dark mode (hint: not every product needs dark mode), sticking with styles probably makes more sense! At least for now. Don’t feel like you need to use variables simply because it’s a brand new feature.

Another important thing to consider is that variables are still in open beta, which means they’re still ironing out bugs and are adding more functionality (more on this below).

The decision whether or not to use variables is entirely up to you. This is one of the reasons we released different versions of Untitled UI 4.0 — one using variables and one using styles. Try them both and see which suits your workflow better!

Do variables replace styles?

Perhaps the second most commonly asked question we get from designers is, “With variables, should I still use styles?”. Right now, the answer is, “We’re not sure, so keep them for now.”

The main reason this is the answer is because it’s directly from Figma’s team. Styles in Figma are still useful because they can reference multiple values at once, while variables only support one raw value. Also, styles support gradients and effects, while variables don’t yet.

It’s not clear yet how the relationship between styles and variables will evolve over time and over the course of variables beta. Styles still have their purpose for now and you should keep them in your files. The good news is that if you’re using variables, you can reference those variables in your styles so your variables act as the single source of truth.

Variables currently in open beta

If you’re new to variables, we suggest reading through the ❖ Variables documentation page included in the file. We cover everything from how to learn variables, how variables work within Untitled UI, why we made specific decisions, plus best practices and mistakes to avoid when using variables in your projects.

Because variables are so new, even the Figma team are still figuring things out. There are no defined industry standards and there isn’t a lot of practical documentation or best practice guidelines on how to use variables effectively.

It’s important to note that variables were introduced at Config 2023 and are still in open beta. This means it has plenty more room to grow and evolve as the Figma team iron out any bugs and add missing features.

We’ve been working hard to incorporate all the available features into Untitled UI but keep in mind that there are still some key features and functionality missing from variables that will likely be introduced soon. We’ll incorporate these into Untitled UI as quickly as possible.

If you’re on the fence about whether to switch to using variables yet or wait until this feature is out of beta, these are some key missing features to be aware of:

1. Support for additional properties

This is the most obvious missing feature from variables. Currently, you cannot use and apply variables to certain key properties in designs including:

• Gradient fill colors
• Stroke widths
• Effect colors such as shadows
• Layer opacities
• Independent radius values, and more.

2. Image variable type

This is the most obvious missing feature from variables. Currently, you cannot apply variables to certain key properties including stroke widths, effect colors (shadows etc.), layer opacities, independent radius values, and more.

3. Typography variable type

Figma are exploring how they want to support typography variables. Typography variables will likely provide you with a way to easily switch key typography properties across modes such as typefaces and sizing.

For example, you may want to set up typography scales to dynamically switch between breakpoints in your designs.

4. Extended collections

Figma have noted that this will be an enterprise-only feature, but soon Figma will support extended collections. This will provide teams with a way to handle theming for sub-brands with brand-specific overrides.

Thanks for reading this far! We’re excited about these 1% incremental improvements and we’re already working on the next update. Stressing these small details compounds over time.

Variables is still in open beta so we’re expecting more changes and updates soon. We’ll do our best to implement improvements into the system as soon as possible.

In other news, Untitled UI turned 2 years old last week! I truly appreciate the overwhelming support for this li’l side project. I genuinely love working on it and look forward to dedicating more time to it.

Quick search keywords

We've added keywords to all icons for faster searching!

What’s new in Untitled UI Icons v1.6

Ever tried to search for an icon but can't remember the exact component name? We've made life a little easier by adding super-smart keywords to every single icon in both the free and PRO icon libraries.

As you may know, Figma allows you to to add descriptions to components. Descriptions are useful for providing tips for using particular components for your team or adding important dev notes and links to documentation. What you may not know is that these descriptions can act as tags for better searching.

For example, say you're looking for a file icon, but can't remember what it was called. Was it called file, attachment, text, paper, pdf, or report? Now you can search any of these.

This is a small update, but one that will hopefully save you a bit of time. As always, we’re excited about these 1% incremental improvements. Stressing these small details compounds over time.

We’re already working on the next update for Untitled UI after Config 2023 which will also include icon keywords. Stay tuned!

You can download Untitled UI Icons v1.6 by clicking the link in your original receipt email. Check out our guide on how to do this on our FAQs page (click the Untitled UI Icons tab).

New updates to PRO and PRO LITE!

We’ve made some updates to Untitled UI PRO and PRO LITE!

What’s new in version 3.2

Quite a lot. We initially planned on simplifying and improving existing components and releasing this update in early April. We got a little carried away with adding shiny new things and stressing tiny details.

As always, we won't cover every pixel, but here are the main updates:

• Huge update to useful avatar placeholders (increased from 70 to 378 styles). We’ve had a lot of positive feedback on how useful these are so we’ve expanded the library and also added a new “neutral” style 🔥
• 105 new linear gradient styles to use in designs and components 🔥
• Improved badge components, added hover states for close “X” buttons + added new modern style 🔥
• Improved badge group components + added new modern style and hover states 🔥
• New dynamic background pattern components + updated across the kit in header sections, modals, empty states, log in and sign up pages etc. 🔥
• New super smart dynamic background overlay (dimmer) component + updated across the kit in modals, command menus etc. 🔥
• New file type icons with 3 styles + updated everywhere (tables, messaging components, activity feeds, examples etc.) 🔥
• New 404, log in and sign up pages + improvements and refreshed images 🔥
• Simplified and improved the command menu components, and added a useful footer component 🔥
• Simplified empty states, added subtle dynamic backgrounds, and added new style 🔥
• Refreshed and improved blog marketing site components, added new styles, and refreshed the placeholder images 🔥
• Added subtle contrast borders to avatar components for images with light backgrounds 🔥
• Added nested instances to components where they make sense
• New darker 950 color styles + updates dark mode components (e.g. footers, sidenavs)
• New featured icons styles with outlines (+ updated in components such as notifications)
• New micro charts used in metric cards + added new styles
• New underline style vertical tabs (to match horizontal tabs)
• New section label component added to all application example layouts
• New banner style application alerts
• Improved chart components to use a gradient mask (instead of color gradient) so it is easier to make color changes
• Improved secondary color buttons for better contrast
• Simplified and improved header navigation components
• Simplified card headers + updated everywhere they’re used across other components
• Simplified progress steps components + added new featured icon styles
• Simplified the file upload components and improved styling
• Hundreds of subtle style improvements to marketing site sections
• Hundreds of subtle style improvements to application and settings page examples
• Simplified and improved dozens of other small components including carousels, video components, pie charts, activity feeds + many more small changes…

New updates + (re)released Untitled UI PRO LITE!

We've made some updates to Untitled UI PRO and (re)released Untitled UI PRO LITE. Everyone who has purchased PRO has free access to PRO LITE.

What is Untitled UI PRO LITE?

Untitled UI PRO LITE is a premium and lightweight version of the full Untitled UI PRO kit. It's 55% lighter, faster, and is designed to include everything you need and nothing you don't. It's perfect for moving fast and for smaller projects!

If you were an early supporter of Untitled UI, you may remember we initially released PRO LITE back in February. When Figma unveiled their new component property features we completely refactored Untitled UI PRO, simplifying and reducing almost every component. This made the first version of PRO LITE a bit redundant.

We've found some time to revisit this idea and have built an even better PRO LITE with Figma's new features.

What is the difference between PRO and PRO LITE?

We've kept the most useful components and removed the rest. The result is 55% fewer overall layers.

Both kits include almost identical foundational components and styles but have far fewer variants and additional components across the rest of the kit. We've also slimmed down the page examples.

Even though PRO LITE is 55% smaller than the full PRO version, the new PRO LITE kit is an incredibly robust and powerful UI kit in its own right. It's still more comprehensive and better value than other kits we've seen.

Why did we create Untitled UI PRO LITE?

We're always looking for ways to improve Untitled UI. We spent weeks creating a lightweight little brother to the full PRO version so you now have two options: start with the complete PRO version or ship faster with the PRO LITE version.

What’s new in version 3.1

We won't cover every tiny detail, but here are the main updates:

• Brand new Untitled UI PRO LITE kit 🔥
• Improved modal components with flexible header and footer components
• Added a bunch of new modal examples 🔥
• 17 new fictional logos to use in your designs
• Tweaked and improved dozens of icons
• Additional modern featured icon style
• New and improved application alerts components
• Simplified several components and removed group components (e.g. metrics)
• Switched canvas stacking on header sections to First on top (a small bug prevented this last update)
• + Many more small improvements...

Aesthetic/accessibility improvements + more!

We've released an update to Untitled UI.

This update is a little different from previous releases... but it's one we've wanted to do for a while. While there are a few new components as always, the majority of changes are subtle aesthetic and accessibility improvements.

What’s new in version 2.9

We won't cover every tiny detail, but here are the main updates:

• Refactored and simplified all badge components (removed base component) + added new styles 🔥
• New content components for blog posts, content sections, and rich text 🔥. This is a simple but scalable system of rich text components (headings, paragraphs, quotes, and images) so you can consistently adjust content styling and padding everywhere at once, kind of like CSS. This is something we haven't seen something like this done before in Figma.
• Text default has been changed from gray-500 to gray-600. While gray-500 text on a white background is WACG 2.0 accessible with a contrast ratio of 4.95 (AA), gray-600 is significantly higher-contrast at 7.65 (AAA).
• Improved styling of all dropdown components, notably menu item hover states which now have independent padding.
• Headings across all components and layouts are now semibold by default. This includes obvious section headers and card headers but also spans across most smaller components (e.g. avatar label groups, charts, checkbox groups).
• Similarly, buttons are now semibold by default.
• All cards have a slightly larger 12px corner radius by default.
• + Many more small improvements...

Untitled UI Webflow component library

We're excited to share something we've been working on for the last few months. We've launched an official Untitled UI Webflow component library!

Copy 275+ fully-responsive website components and paste them straight into your Webflow projects. We're adding new components regularly and the entire library is built using Finsweet Client-first best practices.

We teamed up with the Relume team for this launch. They've just released Relume Library 2.0, which allows the Webflow community to create and share their own Webflow component libraries. This is on top of the world's largest Webflow component library!

Support on Product Hunt

We put a lot of love and work into this. It would mean a lot if you could please take a second to support the launch on Product Hunt.

FAQs

How do I access the Webflow Library?

You can check out the Untitled UI Webflow Library on our Relume Library profile.

Try it out for free and copy fully-responsive website components straight into your next Webflow project.

Does the Webflow Library include every Untitled UI component?

Not yet! We've launched with the most useful 275+ marketing site components which was a huge amount of work. We'll be adding new components to the library regularly.

What is Relume Library?

Relume Library is the world's largest Webflow component library. Copy 800+ unstyled components with one click and paste them into your Webflow project.

They've just released Relume Library 2.0, which allows the Webflow community to create, save, and share their own Webflow component libraries.

What is Finsweet Client-first?

Finsweet Client-first is a set of guidelines and strategies to help you build Webflow websites in a clear, organized, and scalable way that any human can understand.

Clients, marketers, Webflow developers, and anyone who opens your Webflow project should be able to read a class name and understand what that class is responsible for doing. Our components are built using Client-first, so you know you're using best practices for your Webflow builds.

If you haven't used Client-first before, it's a game changer and easy to learn! Once you start using it, you won't turn back. Check out the Client-first documentation to learn more.

Learn more abut how this works on our FAQs page.

Untitled UI Icons + updates to v2.8

We're excited to share something we've been working on for the last few months! Untitled UI Icons are a clean, consistent, and neutral icon library crafted specifically for modern UI design. Made for Figma, in Figma.

We've also released a FREE version of the icon library at untitledui.com/icons. You can use the icons in unlimited projects!

What’s new in version 2.8

We've completely replaced the default ~280 Feather icons in Untitled UI with our new library. You'll now find 1,100+ high-quality, neutral, and consistent icons to choose from.

A few other changes:

• Added a helpful section on icon best practices
• New featured icon components
• New input size — you can now switch between small and medium
• Tidied up several components changed with Figma's new component property features

About Untitled UI Icons — 4,600+ essential Figma UI icons + 4x styles

We searched everywhere for the "ultimate" icon set for modern UI design to use across all our projects... We couldn't find an icon library for Figma we loved so we made one.

• Made for Figma, in Figma. 100% compatible with Figma's latest 2022 component properties and override features. Say goodbye to Illustrator.
• Crafted specifically for modern UI design. Clean, consistent, and professionally crafted. Purposefully not overly stylized and neutral enough for any project.
• 4x flexible styles. Choose between minimal line, modern duocolor or duotone, or solid icon styles. Switch styles and maintain icon overrides in Figma like magic.
• 4,600+ and counting. Packed full with everything you need to design modern and beautiful UI and websites. No more custom icons.
• Neatly organized + IconJar. The entire library is neatly organized alphabetically across 19 categories. We've also included an IconJar library with super-smart tags for quick search.
• Smooth corners by default. Untitled UI Icons use beautiful and naturally continuously 60% variable curves on all corners. We stress these tiny details because once you see it, you can't unsee it.
• 2px stroke weight default. 2px stroke weight by default for visually-balanced icons across sizes. Plus, master icons with live corners are included, so you can tweak corners for your own custom libraries.
• Optimized SVG output. No unnecessary layers or shapes. SVG outputs are optimized for minimal file size, no unnecessary attributes, and infinite scalability.
• Use in unlimited projects. In fact, we designed it this way — to be as neutral, flexible, and scalable as possible to use as a single "ultimate" library for any project.
• Lifetime updates. No subscriptions or "upgrades". Pay once and get lifetime updates forever. We're always making improvements to Untitled UI products.

New solid icon style

Just a quick update — we've added a new solid icon style to Untitled UI Icons!

What’s new in version 1.5

You'll now find 1,100+ brand new solid icons included in Untitled UI Icons. These solid/fill style icons were requested by a few people on Twitter. They're handy in UI design when you need a high-contrast icon style to stand out even more.

We also changed all fill and stroke colors to currentColor for faster implementation. This means you can use the exported SVGs or copy them from IconJar directly in projects and they'll automatically adapt to the color you're already using in your CSS. Learn more about how currentColor works in CSS.

You can download v1.5 by clicking the link in your original receipt email or via your Gumroad library if you made an account.

Config 2022 component properties + more!

Figma announced some great updates at Config 2022 last week, particularly around auto layout and component properties. We've been working non-stop since to make Untitled UI even better than ever.

To make the most of Figma's new features, we've completely refactored the entire library. Almost every single component has been simplified and improved upon, making it the biggest update to Untitled so far. Was this a lot of work? Yes. But we're really excited about the changes Figma are making and we're already working on v2.8.

We were halfway through this update when these new features were released, so you'll also find a bunch of useful new components and expanded existing pages. We've also got another announcement further down...

What’s new in version 2.7

As we mentioned, almost every single component has been changed so we won't cover everything but here are a few points. Firstly, the entire library has been simplified and improved with the new boolean component property features, drastically reducing the number of variants without losing any of the functionality. A few highlights:

• Buttons down from 1,320 (with 25 base components) to 760
• Inputs down from 336, including new input styles to 56
• Application page headers down from 144 to 12
• Application card headers down from 96 to 16

Also:

• New command menu (⌘+K) components 🔥 —these were highly requested
• New section footer components + added to all example pages
• New tags components
• New inputs with trailing button and multi-select tags
• New simplified dropdown components + added hint text and multi-select tags
• New log in and sign up pages
• New verified tick component + added to avatar components
• Expanded library with 40+ new useful hand-drawn scribbles
• Completely refactored and simplified all button components + removed base component 🔥
• Completely refactored and simplified all input components + removed base component 🔥
• Added instance swaps across core components (buttons, inputs etc.)
• Replaced dividers throughout the entire file with new independent borders (where it makes sense)
• Drastically improved table components and layouts (no more dividers!) 🔥
• Avatar groups, page sections, page headers, and example pages simplified with new negative margin feature
• Drastically simplified core shared components (button groups, inputs etc.) taking advantage of component properties and independent borders.
• Improved "X" close button and updated every component it's used in (e.g. banners and notifications) with the new absolute positioning feature
• Added new "X" close button to modals and slideout menus
• Pagination improved and simplified with independent borders
• Refactored card and section headers with component properties
• Improved and simplified date picker components
• + Much more...

Introducing Untitled UI PRO LITE

We have some great news for you all! We’ve released a new update to Untitled UI which includes a brand new lightweight version called Untitled UI PRO LITE.

Everyone who has purchased Untitled UI PRO now has free access to PRO LITE with free updates for life.

So, what is Untitled UI PRO LITE?

Untitled UI PRO LITE is a premium and lightweight version of the full Untitled UI PRO kit.

It's 50% lighter, faster, and is designed to include everything you need and nothing you don't. It's perfect for moving fast and for smaller projects! You can preview PRO LITE at untitledui.com.

Even better, if you move the example pages to a separate file, PRO LITE is 70% lighter than the full kit!

We hope that it will come in handy next time you have a smaller project or a tight timeframe. Plus, we want to say thanks to everyone who has bought Untitled UI so far by including it for free with this update.

Why did we create Untitled UI PRO LITE?

We're always looking for ways to improve Untitled UI. We spent weeks creating a lightweight little brother to the full PRO version so you now have two options: start with the complete PRO version or ship faster with the PRO LITE version.

Even though it's ~50% smaller than the full PRO version, the new PRO LITE kit is an incredibly robust and powerful UI kit in its own right. It's still more advanced and better value than anything else we've seen.

What’s new in version 2.6

• Brand new Untitled UI PRO LITE
• 50% lighter + faster (70%+ lighter if you move example pages moved to a separate file)
• Untitled UI PRO is also 7% lighter (40%+ lighter if you move example pages moved to a separate file)
• Huge new library of 100+ company logos, all painstakingly optically sized proportionally to each other so they line up nicely in your website designs
• Improvements to almost every page in Untitled UI PRO as we worked on PRO LITE
• Optimized/improved table components
• Fixed tab underline sizing issue
• Replaced all examples in documentation with compressed jpegs instead of layers
• Removed hidden columns from tables in example pages
• Added a helpful guide on how to resize logos proportionally to each other

Interactive components + more!

We’re excited to announce that we’ve released a new update to Untitled UI! 🤗 

The main improvement is by far the most requested: interactive components. We’ve added hover and click interactions, helping you to quickly create prototypes that feel like the real experience.

If you haven’t used Figma’s prototyping feature before, check out this tutorial.

What’s new in version 2.5

• Added interactive components 🔥
• Improved original color palette
• Huge expanded secondary color palette with 16 new grays and colors
• Softer/improved shadows
• Improved hover states in dropdowns and inputs — they’re now gray for a more neutral design and better contrast/legibility
• Expanded library of 42 new hand-drawn arrows
• Improved application navigation components
• Improved slider controls with more contrast
• Simplified and improved tabs
• Added borders to all dropdowns and lists to improve contrast and legibility
• Improved calendar component
• Expanded typography best practices section
• New "X" close button and updates to every component it's used in (e.g. banners and notifications)