--- title: Best UI Design posts — January 2025 | daily.dev description: The most upvoted UI Design posts from January 2025, curated by the daily.dev community. canonical: https://daily.dev/tags/ui-design/best-of/2025/01 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/ui-design/best-of/2025/01 og:type: website og:site_name: daily.dev og:title: Best UI Design posts — January 2025 | daily.dev og:description: The most upvoted UI Design posts from January 2025, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of UI Design — January 2025 1. 1 [](/posts/frontend-designers-developers-meet-your-new-best-friend--xow8hebq4 "🚀 Frontend Designers & Developers, Meet Your New Best Friend! 🎨💻") Article Dev World · 2y 🚀 Frontend Designers & Developers, Meet Your New Best Friend! 🎨💻 Discover an incredible resource for frontend designers and developers with calltoinspiration.com. This site offers a vast collection of beautifully designed web components like forms, alerts, tabs, dropdowns, and cards. It's perfect for elevating your projects and unleashing your creativity. Check it out to design better and faster. 3.5K 198 2. 2 [](/posts/11-free-must-know-websites-for-every-developer-t1rht1ghw "11 Free Must-Know Websites for Every Developer") Article DEV · 2y 11 Free Must-Know Websites for Every Developer Highlighting 11 essential websites and tools for developers, this post covers resources like Omatsuri for frontend development, HTMLRev for templates, Unicornicons for icons, UiVerse for UI elements, Undraw for illustrations, PatternPad for custom patterns, Shape Divider for stylish transitions, Photopea as a Photoshop alternative, QuickRef for cheat sheets, DevDocs for API documentation, and DevHints as a quick-reference assistant. 3.2K 91 3. 3 [](/posts/top-ui-libraries-with-copy-paste-components-for-developers-vgu9i3lgf "Top UI libraries with copy-paste components for developers") Article OpenSouls · 2y Top UI libraries with copy-paste components for developers A curated list of free UI libraries that leverage Tailwind CSS for styling, featuring multiple open-source options. Ideal for developers looking for ready-to-use, copy-paste components. Contributions for additional libraries are welcome to keep the list updated. 539 50 4. 4 [](/posts/rizzui-nw6wqyw5r "RizzUI") Article Community Picks · 2y RizzUI RizzUI is a modern and minimal React UI library built with TailwindCSS, designed to offer simple, customizable, and accessible components. It includes a variety of production-ready elements categorized under buttons, inputs, navigation, feedback, overlays, data display, typography, and integrations. RizzUI emphasizes ease of use, full customization, type safety, and accessibility compliance. 366 22 5. 5 [](/posts/shadcn-ui-theme-generator--bovdhrfc1 "shadcn UI theme generator.") Article Community Picks · 2y shadcn UI theme generator. Easily create custom themes from a single color that you can copy and paste into your apps. The post provides information on team collaborations, setting daily activity goals, email management, and payment methods. It includes examples of email listings and payment status updates. 317 17 6. 6 [](/posts/sharing-my-300-best-web-design-tools-and-resources-collection--h8twgav4c "Sharing my 300+ best web design tools and resources collection.") Article UX/UI · 2y Sharing my 300+ best web design tools and resources collection. A curated directory of over 300 web design tools covering categories like UI kits, stock images, icon libraries, color palettes, typography tools, illustrations, and AI-powered design tools. 309 22 7. 7 [](/posts/super-color-palette-v37ebfowf "Super Color Palette") Article Community Picks · 2y Super Color Palette Super Color Palette lets you create, export, and save color palettes for free without ads. Use shifting techniques for hue, saturation, and lightness to generate diverse palettes quickly. Adjust individual colors, entire palettes, or generate palettes from hex codes and images. It supports different color harmonies and models and offers features like accessibility checking, custom easing, and preview options. Join the Patreon for updates and optional support. 292 6 8. 8 [](/posts/the-rise-and-fall-of-neumorphism-vkiulzspn "The Rise and Fall of Neumorphism") Article UX Planet · 2y The Rise and Fall of Neumorphism Neumorphism, a UI design trend that emerged in 2019-2020, aimed to create new, fresh aesthetics by combining elements of realism with minimalism. It featured shadows, highlights, and pseudo-3D depth to make UI elements feel embedded or extruded from the background. Despite its visual appeal, neumorphism had practical issues, including low contrast, poor usability, and compatibility problems with dark modes. Following its decline, new trends such as glassmorphism and skeuomorphism 2.0 (hyper-realism) are gaining traction, each bringing distinct visual styles and improvements. 103 3 9. 9 [](/posts/introducing-mirai-a-server-driven-ui-framework-for-flutter-5hgoixs36 "🚀 Introducing Mirai — A Server Driven UI framework for Flutter") Article Medium · 2y 🚀 Introducing Mirai — A Server Driven UI framework for Flutter Mirai is a new server-driven UI framework for Flutter that enables dynamic UI updates and instant changes using JSON definitions. Traditional client-driven UI approaches are tedious and slow, requiring app store approvals and user updates. Mirai simplifies this process by allowing the server to control the UI, offering fast updates, easy personalization, simplified maintenance, and efficient A/B testing. Setting up Mirai involves adding dependencies to your Flutter project and defining UI elements in JSON, which are then rendered dynamically on the client side. 75 5 10. 10 [](/posts/introducing-pillar-ui-a-new-react-design-system-u7xnpbo9y "Introducing Pillar-UI: A New React Design System") Article WebDev · 2y Introducing Pillar-UI: A New React Design System Pillar-UI is a new design system for React apps, focused on performance, accessibility, and developer experience. Built from the ground up, it is significantly smaller and faster than many existing alternatives by leveraging CSS and minimizing JavaScript dependencies. Key features include adherence to WCAG guidelines, RTL support, high contrast mode, and customizable default styles using CSS variables. It also offers reusable hooks, icons, and utility functions to simplify development. The project is open-source and community-driven, inviting collaboration and contribution from developers. 74 12 11. 11 [](/posts/stop-using-pixels-for-media-queries-lxywcskjq "Stop Using Pixels For Media Queries") Video Web Dev Simplified · 2y Stop Using Pixels For Media Queries Using pixels for font sizes, media queries, padding, and margins is not recommended due to accessibility issues. Instead, using REM units allows for more responsive and scalable designs that adapt to user settings. This practice ensures that elements on the web page remain proportional and accessible across different devices and user preferences. 67 3 12. 12 [](/posts/neotasks-oss---an-in-development-task-manager-hlxp14soy "Neotasks OSS - An in-development task manager") Article The React Community · 2y Neotasks OSS - An in-development task manager The author is developing a task management application called Neotask, inspired by Trello but with additional features. It's being built using React, with the backend yet to be decided, possibly in C++ or Rust. The design uses the Catppuccin color palette. 60 11 13. 13 [](/posts/learn-framer-in-2025---crash-course-for-framer-beginners-znwyfguti "Learn Framer in 2025 - Crash Course for Framer Beginners") Video DesignCourse · 2y Learn Framer in 2025 - Crash Course for Framer Beginners This post offers a crash course for beginners in Framer, focusing on designing a hero section with interactive elements. It also covers integrating assets from Figma, setting up layouts, adding animations, and ensuring responsive design. Additionally, it demonstrates using an external software, Unicorn Studio, to create a dynamic background effect. The tutorial emphasizes practical use and optimization for various screen sizes. 57 2 14. 14 [](/posts/top-voted-tools-for-developer-asqnqpdrk "Top Voted Tools for developer") Article Dev Squad · 2y Top Voted Tools for developer Discover a list of highly recommended, minimalist all-in-one UI libraries that can enhance your development projects. Each library aims to provide comprehensive tools to streamline your UI design process. 57 4 15. 15 [](/posts/chinese-web-design-cluttered-but-it-works-here-s-why-lc5rd6iww "Chinese web design: cluttered, but it works. Here's why") Video Phoebe Yu · 2y Chinese web design: cluttered, but it works. Here's why 46 6 16. 16 [](/posts/prompt-based-ui-gmqja2mop "Prompt-Based UI") Article UX/UI · 2y Prompt-Based UI Prompt-based UI is emerging as a new interface paradigm, aiming to extend rather than replace traditional UIs. Voice-based control, while innovative, can be cumbersome for complex tasks. Combining old and new features is essential for mass-market products to avoid alienating existing users while adopting new technologies. Successful implementation requires a complete redesign to incorporate AI-powered prompts seamlessly alongside familiar functionalities. 43 3 17. 17 [](/posts/10-game-changing-ui-ux-design-trends-to-watch-in-2025-mhau3ibmt "10 Game-Changing UI/UX Design Trends to Watch in 2025") Article UX Planet · 2y 10 Game-Changing UI/UX Design Trends to Watch in 2025 By 2025, several key UI/UX design trends will play crucial roles, including the rise of website builders offering advanced tools, the growing importance of AI in automating design processes, and the continued investment in AR and VR tools. Enhanced connectivity through technologies like 5G and satellite connections, silent authentication methods, and the necessity of dark mode are also highlighted. The article predicts that static websites will fade, Figma will dominate the market, and traditional aesthetics will largely hold unless major updates from giants like Apple or Android occur. 41 1 18. 18 [](/posts/smooth-rotation-with-modern-css-yuvj0lnbn "Smooth rotation with modern CSS") Article CSS Tip · 2y Smooth rotation with modern CSS Learn how to use modern CSS techniques to achieve smooth rotation animations for any element. This method utilizes the @property feature and various math functions to create interactive animations without relying on keyframes. 41 19. 19 [](/posts/loaders-for-your-projects-tlonjqfff "Loaders For Your Projects") Article Tailwind Templates · 2y Loaders For Your Projects Uiverse offers a community-made library of free and customizable UI elements created with CSS or Tailwind. It saves time on building and customizing UI components for your projects. 39 1 20. 20 [](/posts/a-single-element-star-rating-component-without-js--8pbzbcnwt "A single-element star rating component (without JS)") Article CSS Tip · 2y A single-element star rating component (without JS) Learn how to transform a native range slider into an interactive star rating component using just a few lines of CSS, with no JavaScript required. Adjust the number of stars by changing the 'max' attribute. 39 1 21. 21 [](/posts/crafting-daily-ui-designs-framer-component-built-with-frameblox-ui-kit-and-plugin-zv23nscap "Crafting Daily UI Designs: Framer Component Built with Frameblox UI kit and Plugin") Article UX/UI · 2y Crafting Daily UI Designs: Framer Component Built with Frameblox UI kit and Plugin Develop and share daily website section components for Framer using the Frameblox UI kit and plugin, which can be easily copied and pasted into projects. 32 22. 22 [](/posts/easily-create-overlapping-sections-on-a-website-bvftchhwn "Easily create overlapping sections on a website") Video Kevin Powell · 2y Easily create overlapping sections on a website Learn multiple solutions for creating overlapping sections on a website layout, focusing on using CSS techniques such as box-shadow and linear gradients. The post also provides tips to avoid common issues and discusses the merits of each method. 27 23. 23 [](/posts/design-and-development-perfectly-aligned-pikfknmvv "Design and development perfectly aligned") Article Community Picks · 2y Design and development perfectly aligned AlignUI offers over 500 flexible and customizable components designed to streamline web development. Trusted by over 1,500 Figma users, it enables rapid building of unique designs with a comprehensive codebase and easy integration. It includes ready-to-use multi-page user flows and premium components that adapt seamlessly to various project needs. 24 2 24. 24 [](/posts/revisiting-css-multi-column-layout-gob7gwhf5 "Revisiting CSS Multi-Column Layout") Article CSS-Tricks · 2y Revisiting CSS Multi-Column Layout CSS Multi-Column Layout, introduced nearly 20 years ago, allows for dividing content into columns without extra markup. Despite its potential, it remains underused due to past browser support issues and usability concerns. Modern CSS features like container queries and properties such as column-span improve its readability and flexibility. Designers and developers should reconsider the layout for enhancing web design. 23 25. 25 [](/posts/a-simple-masonry-like-composable-layout-k93iqvnya "A simple masonry-like composable layout") Article Piccalilli · 2y A simple masonry-like composable layout A detailed guide on creating a masonry-like layout using composable methods in HTML and CSS. The post explains the masonry layout concept, its history with JavaScript, and how browser support issues for CSS masonry prompted a flexible workaround. Step-by-step code examples demonstrate how to use the switcher and flow layouts to approximate masonry effects, ensuring configurability and responsiveness. 22 2 [See all UI Design archives](/tags/ui-design/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/ui-design/best-of/2025/01#page","url":"https://daily.dev/tags/ui-design/best-of/2025/01","name":"Best UI Design Posts — January 2025","description":"The most upvoted UI Design posts from January 2025, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/ui-design/best-of/2025/01#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/frontend-designers-developers-meet-your-new-best-friend--xow8hebq4","name":"🚀 Frontend Designers & Developers, Meet Your New Best Friend! 🎨💻"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/11-free-must-know-websites-for-every-developer-t1rht1ghw","name":"11 Free Must-Know Websites for Every Developer"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/top-ui-libraries-with-copy-paste-components-for-developers-vgu9i3lgf","name":"Top UI libraries with copy-paste components for developers"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/rizzui-nw6wqyw5r","name":"RizzUI"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/shadcn-ui-theme-generator--bovdhrfc1","name":"shadcn UI theme generator."},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/sharing-my-300-best-web-design-tools-and-resources-collection--h8twgav4c","name":"Sharing my 300+ best web design tools and resources collection."},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/super-color-palette-v37ebfowf","name":"Super Color Palette"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/the-rise-and-fall-of-neumorphism-vkiulzspn","name":"The Rise and Fall of Neumorphism"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/introducing-mirai-a-server-driven-ui-framework-for-flutter-5hgoixs36","name":"🚀 Introducing Mirai — A Server Driven UI framework for Flutter"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/introducing-pillar-ui-a-new-react-design-system-u7xnpbo9y","name":"Introducing Pillar-UI: A New React Design System"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/stop-using-pixels-for-media-queries-lxywcskjq","name":"Stop Using Pixels For Media Queries"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/neotasks-oss---an-in-development-task-manager-hlxp14soy","name":"Neotasks OSS - An in-development task manager"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/learn-framer-in-2025---crash-course-for-framer-beginners-znwyfguti","name":"Learn Framer in 2025 - Crash Course for Framer Beginners"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/top-voted-tools-for-developer-asqnqpdrk","name":"Top Voted Tools for developer"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/chinese-web-design-cluttered-but-it-works-here-s-why-lc5rd6iww","name":"Chinese web design: cluttered, but it works. Here's why"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/prompt-based-ui-gmqja2mop","name":"Prompt-Based UI"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/10-game-changing-ui-ux-design-trends-to-watch-in-2025-mhau3ibmt","name":"10 Game-Changing UI/UX Design Trends to Watch in 2025"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/smooth-rotation-with-modern-css-yuvj0lnbn","name":"Smooth rotation with modern CSS"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/loaders-for-your-projects-tlonjqfff","name":"Loaders For Your Projects"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/a-single-element-star-rating-component-without-js--8pbzbcnwt","name":"A single-element star rating component (without JS)"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/crafting-daily-ui-designs-framer-component-built-with-frameblox-ui-kit-and-plugin-zv23nscap","name":"Crafting Daily UI Designs: Framer Component Built with Frameblox UI kit and Plugin"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/easily-create-overlapping-sections-on-a-website-bvftchhwn","name":"Easily create overlapping sections on a website"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/design-and-development-perfectly-aligned-pikfknmvv","name":"Design and development perfectly aligned"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/revisiting-css-multi-column-layout-gob7gwhf5","name":"Revisiting CSS Multi-Column Layout"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/a-simple-masonry-like-composable-layout-k93iqvnya","name":"A simple masonry-like composable layout"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"UI Design","item":"https://daily.dev/tags/ui-design"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/ui-design/best-of"},{"@type":"ListItem","position":5,"name":"January 2025"}]}]} ```