DEV Community: Davide Pacilio

25 Places Where You Can Get Free Tailwind CSS Components

Davide Pacilio — Wed, 19 Jan 2022 13:45:34 +0000

When it comes to Tailwind CSS, it's hard to ignore the popularity of this famous front-end framework. Over the years, the growth of this ecosystem has seen steady increases, and it was announced that, in July, the download count of Tailwind CSS reached over three million. Considering the huge number of people who have downloaded the framework so far, you can count on an increase in support resources for developers that are building sites with this front-end framework.

If you're trying to find a good starting point with Tailwind CSS, I can't recommend the component libraries enough. These are what I think is the most important part of Tailwind: they provide a way to work with complete chunks of code without having to start from scratch. It doesn't make sense to reinvent the wheel when such great resources already exist.

Component libraries are great time-savers, but they can also be expensive for people on a budget. So, to help you find some great free options, I've put together a list of my favourite open-source resources—all of which I've tried and tested—to get you started.

The following component libraries are all available for use in any Tailwind CSS project. There is a wide variety of resources to choose from; ranging from code snippets, to fully-built UI kits. The full list includes:

Origin UI
Tailkits
Ghost UI
FloatUI
Tailwind Awesome
HyperUI
a17t
Kometa UI Kit
Tailwind Toolbox
Headless UI
Tailwind UI Kit
DaisyUI
Tailwind Components
Treact
Tail-Kit
Lofi UI
Meraki UI
VechaiUI
Mamba UI
Flowbite
Tailwind Starter Kit
Kutty
PostSrc
Tailblocks
Components Collection

Ready to dive in? Let's take a look at the list!

1. Origin UI

Origin UI offers a collection of free, open-source UI components designed with Tailwind CSS and Next.js. These components are ready to be dropped into projects for quick app UI development. The library includes elements like buttons, sliders, input fields, dialogs, and more, with regular updates. The open-source project is curated by the team behind Cruip.com!

2. Tailkits

Tailkits is a curated platform specializing in Tailwind CSS resources, offering a wide selection of premium and free templates, UI kits, and components. It features categories for various projects, such as landing pages, dashboards, and portfolios. The site also provides tools for enhancing productivity and allows users to submit their own resources.

3. Ghost UI

Can't find the perfect storm of styles for your next web app? Make it yourself with Gust UI. Gust UI is a Tailwind CSS gallery, showcasing responsive components, elements, and example pages. Quickly apply existing styles to your app without getting overwhelmed by a massive quantity of unrelated styles all thrown together. Remove what you don't need, change what you do need, and create an app that's just right for you.

4. FloatUI

Float UI is a collection of interactive UI components and elements that allow you to rapidly develop websites and web applications with React. Float UI is built from the ground up using pure React, React Router, and Tailwind CSS to provide everything you need to build a beautiful website. No jQuery or third-party plugins required.

5. Tailwind Awesome

Looking for the coolest new templates and UI kits for a website or web app? Tailwind Awesome is a hand-picked collection of the best free resources on the internet. The team behind this project is constantly on the lookout for new themes, templates, modules, and UI kits; so that you'll never run out of awesome things to use with Tailwind CSS.

6. HyperUI

HyperUI is a free, open source library of Tailwind CSS components. They are all customisable and ready to use out of the box. Get access to the source code for free, and copy/paste, or download your favorite components for easy integration into your own web project. Change colors, font sizes, content and much more.

7. a17t

a17t was created out of the need to have an extensible, atomic and design agnostic way to create UI components. This plugin is the culmination of several months of work, and a result of many discussions between two passionate individuals who argue over the ideal approach to CSS. You'll find this plugin makes creating Tailwind utility classes a breeze.

8. Kometa UI Kit

Kometa UI kit is a set of TailwindCSS-based UI components. You can use them as Tailwind sections, or simply as a handy set of elements to spice up your app. It doesn't matter if you're building an admin dashboard, a SPA, or just some website - these sections will become an essential part of your toolkit and, they will make your workflow way better.

9. Tailwind Toolbox

Tailwind Toolbox is a collection of useful open-source starter templates, components, handy building kits, generators, plugins, and tools to kick start any Tailwind CSS project. Almost everything on this site is open-source and available for you to use in your projects, so if you want to build something with Tailwind that needs a custom template to guide you then this is the site for you.

10. Headless UI

Need something simple, fast, and flat? Headless UI is a gallery of completely unstyled, fully accessible UI components that you can use in any way you choose. With everything from buttons and headers to menus, radios, and transitions, there's a little bit of everything for everyone. These are unchained components—just add your own flair to make them your own!

11. Tailwind UI Kit

Tailwind UI Kit is a powerful library of accessible, fully responsive, drop-in-ready Tailwind CSS components to fast track your workflow and make sure your latest project looks beautiful on all devices. With easy to implement styles, functional animations and handy utilities like the responsive menu bar, typography presets and more – you'll be able to get started with a handful of lines of code.

12. DaisyUI

DaisyUI is a collection of popular Tailwind CSS components with over 7K stars on Github and thousands of followers on Twitter. This repository contains a flexible set of widgets that can be used with Tailwind's component-based approach to component styling. Helpful for quickly creating custom UI in development as well as engaging design in production.

13. Tailwind Components

Tailwind Components is the perfect place if you're looking to begin building your next site or web app with Tailwind CSS. This popular website comes as an open-source repository of free UI components made for the Tailwind CSS framework. It includes templates, demos, and documentation to help you kick-start your next web project by providing a start point for your new site or app.

14. Treact

Treact is a modern gallery of React UI templates and components built using TailwindCSS. This product comes with a ton of cool CSS animations and a lot of useful structure to set up your next project super simple. All components are modular and fully responsive for a great mobile experience as well as big desktop screens. All the resources in Treact are constantly updated and 100% free for personal and commercial use.

15. Tail-Kit

Tail-Kit is a set of the 250+ most common components and the most popular component templates, followed by an extensive customisation guide. The goal is to speed up your development workflow and help you achieve the best experience possible when using Tailwind CSS. So stop coding CSS yourself and start Tail-Kitting!

16. Lofi UI

Lofi UI was created as a fun (but still functional) gallery of re-usable, re-workable, and just plain beautiful Tailwind CSS components. This product wanted to make a space that allowed both experienced frontend developers and beginners alike to learn from others, experiment with different components, and create something awesome in no time. No need to fork or modify this code, just build your own!

17. Meraki UI

Meraki UI is a collection of beautiful, handcrafted, and manually composed Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant dark mode. Packed with tons of accessible UI elements, contextual iconography, and sensible web typography Meraki UI is an ideal destination for anyone looking to start building web apps with awesome components built with utilities.

18. VechaiUI

VechaiUI is a CSS library that works out of the box with create-react-app (including TypeScript version), Preact cli (with compat), Next.js, Gatsby, and any other environment. VechaiUI was made for people who like to write the styles for their app rather than rely on an already-made theme. Using this library, you can make your app look great and be accessible with beautiful styles and accessible UIs.

19. Mamba UI

Mamba UI is designed to help you build beautiful user interfaces that look great on any screen size. It's a library of Tailwind CSS compliant components and templates covering a wide range of interface styles -- from simpler, component-based design to complex data table layouts that work out of the box

20. Flowbite

Start developing your next project with Flowbite - A growing library of over 400 free web components and interactive elements built with the utility classes from Tailwind CSS. Each element can be easily dropped into any Tailwind project to add a fresh new styling and branding. From common layout elements to more niche UIs this library is an invaluable resource for quickly building out any app or website.

21. Tailwind Starter Kit

Tailwind Starter Kit is free solution for Tailwind users that want to start using Tailwind for end to end styling of their projects, but are not comfortable installing CSS that is not officially released. It also comes with multiple components that can be used in any HTML document and is ready to use on React, Angular and Vue based projects. Everyone can take this CSS files from GitHub repository and start using Tailwind on their websites.

22. Kutty

Kutty is a Tailwind plugin for building modern and responsive web applications. It has a set of accessible and reusable components that are commonly used in web applications, such as dropdown, input groups and tabs. Kutty also provides common interface patterns like fixed header, sticky footer, centered navigation and full-screen layouts without navigation.

23. PostSrc

PostSrc is a collection of Tailwind CSS components for everyone. Browse all components in the collection, which are right for your project. Hint: you can use the search below the page to filter what you're looking for and view the results of individual components. Please note, the page is updated and posted daily so you might have to refresh to see new posts.

24. Tailblocks

Tailblocks is a powerful page builder that combines the best of Tailwind CSS with pre-built templates and sections, which you can use to build an entire website with only hand-picked Google Fonts. With over 120+ ready-to-use blocks and 10+ templates to choose from, you can create any type of website or landing page without the need of creating anything from scratch.

25. Components Collection

Looking for rare and uncommon Tailwind CSS components? We've got you covered! This repository includes all the best Tailwind CSS components and elements found on the internet. Everything is divided into a table of contents to allow you to easily access and grab what you need without the need of visiting multiple component libraries when searching for anything.

Conclusion

Thanks for reading, and please feel free to share your picks for other free component libraries in the comments below!

30 Free React dashboard templates and themes

Davide Pacilio — Wed, 28 Apr 2021 10:59:09 +0000

While researching for some dashboard-related inspiration for a product I recently developed (listed below), I came across some exciting and fully open-source React dashboard templates that I couldn't resist collecting and sharing with you all.

This list includes some of the best (and totally free), React admin and dashboard templates, packed with everything you need to create high-quality apps for yourself or your clients.

These templates also respect some quality factors that I think are very important for every open-source product:

100% free: Resources that are free up-front but later costs money to run can be a major burden, especially if you haven't considered hidden costs from the beginning.
Beautifully designed/coded: Nobody wants to depend on code that is difficult to understand, or on a user interface that is poorly created/designed.
Fully documented: We use ready-made templates to speed up the development process, so we don't want to waste our time guessing what we can and cannot do with the code.

1. Mosaic Lite

Live Demo / Download

The first template in this list is the brilliant Mosaic Lite React Template. It’s a fully free template built with tons of pre-built live charts and widgets, interactive modals and pickers, and a fresh and modern design to make your next web app looks stylish and user-friendly.

Features:

Fully functional charts built with Chart.js 3
Tiles-based user interface
Desktop and mobile live demos

2. Corona

Live Demo / Download

Corona is a sleek and dark admin dashboard from BootstrapDash that is super easy to customize and set up. The free version comes with a rich set of features that you can use on the go, and if you need more functionalities, there is also a full version that includes everything you need to take your product to the next level.

Features:

Multiple pages and styled-components
Cross-browser compatibility
Material Design Icons

3. Volt

Live Demo / Download

Volt React is an open-source admin dashboard template built in React.js and based on the latest version of the Bootstrap 5 CSS framework. It highlights over 100 elements, and the library has been built using a data-driven methodology, meaning that a large part of data is transferred to the components as an array of objects.

Features:

Over 100 React UI elements included
Sass preprocessing language
Tutorials and documentation available

4. Azia

Live Demo / Download

Azia is yet another incredible admin template packed with a lot of components, UI elements, and built-in sample pages. This product comes with all the pieces that fit your needs but are not cramped with segments you would never use. This result is an excellent fit to build admin panels, e-commerce systems, project management systems, CMS, or CRM.

Features:

Provides both compiled and minified variations
Luxurious directories and files
Clean and well-commented code

5. Connect Plus

Live Demo / Download

Presenting your product with Connect Plus React Free is an ideal pick if you're looking for a jump-starting starter template for your next project. Although this product has a design like none other it comes with a clean and well-commented code that makes it easy to work with partners and colleagues collaboratively.

Features:

Multiple and interactive dashboard views
Classy and elegant React diagrams
Data representation tables

6. Star Admin

Live Demo / Download

Data visualization and representation is often a hard and daunting task, but with Star Admin React you can get a powerful admin template with various tables, maps, apps, and more essential elements out of the box. This product offers unlimited customization options and allows the addition of unique touches to make the design unique.

Features:

Flexible look for different outcome needs
Pre-crafted application content
Advanced and dynamic chart library

7. Materially

Live Demo / Download

Materially provides you with all possible app pages and ingredients to serve any application requirement with minimum configuration. This product appears with multiple choices for widgets, chart icons, and many more features assembled with a meaningful code structure, and pleasant layout structure.

Features:

Various types of colored tables
Vertical, light, and dark layouts
Fast loading speed and page rendering

8. Datta Able

Live Demo / Download

Datta Able Admin Template comes with a tremendous selection of pre-designed parts that you can easily adapt to any screen size. The code structure is highly flexible to use and modify, and the concept of the dashboard is very elegant eye catchy for modern endeavors. So, If you are looking for advanced settings, Datta Able is one most intriguing resources of this kind in the current market.

Features:

Fully developer-centric code
UI kit included as part of the download
Fulfills every Dashboard needs

9. Tabler

Live Demo / Download

There are plenty of opportunities for business owners who can show off their projects with a sleek and functional dashboard template like Tabler React. The main layout enables you to see the number of members, the amount they are earning, and the total estimate chart gives you a clear view of what you can improve when selling online.

Features:

Responsive and high-quality UI
Fixes for package updates
Interactive tiles to display live stats

10. Airframe

Live Demo / Download

Airframe is a Dashboard and analytics template that works great on any smartphone, tablet, or desktop device. With its minimalist and innovative Light UI, this product will let you build amazing and powerful applications with a fully structured interface designed for large-scale applications with a detailed step-by-step documentation requirement.

Features:

10+ layout variations
Webpack based React app
Updated on a regular basis

11. Material Admin

Live Demo / Download

React Material Admin is a react dashboard template built with the Material-UI framework, and it's totally jQuery and Bootstrap free as several developers are demanding. This React template is a glorious pick to produce front-end interfaces for SAAS and IoT dashboards as it's continuously updated according to the latest market inclinations.

Features:

Multiple colored card layouts
Full support via forum and email
Notifications bar and Authentication

12. AdminPro

Live Demo / Download

If you have a project that needs several peculiarities and options, AdminPro Lite is the perfect React admin template to assists you along the process. This resource includes lots of useful tools to create nice and beautiful admin panels without reducing effectiveness and development abilities due to different front-end technologies that interact together.

Features:

Ready to use chart options
Application PSD files
front-end landing page included

13. MatX

Live Demo / Download

MatX is a feature-packed yet simple codebase React admin dashboard template. The free version of this glorious product includes pre-built Material UI components, Code splitting, SASS integrations, and last but not least it offers multiple possibilities to build web and mobile front-ends for management systems, project management, CMS, CRM, and more.

Features:

Firebase authentication
Infinite scroll grid
Plan and pricing pages

14. Devias Kit

Live Demo / Download

Devias Kit is a conscious material design admin dashboard organized particularly for React developers using Google Material Design for possible interactions, responsive layout grids, Shaping hierarchy, and more. This template grows prepared with intuitive catalogs and files so that you can have anything you need to kickstart awesome panels with custom buttons and with an additional fullscreen switch.

Features:

Available in dark and light mode
Includes several demo pages
Can be upgraded to the full version

15. Argon

Live Demo / Download

Argon Dashboard React is built with over 100 individual components to give developers all the freedom they need to create impressive web applications and websites. Each element in this product comes arranged in very complex documentation, so the development process is seamless, and you can quickly set up the basic structure for your web project with ease.

Features:

Several pre-built page examples
Bright palette with gradient backgrounds
Chic and streamlined user interface

16. Bamburgh

Live Demo / Download

Quickly start the development of your next product using this admin dashboard template built by UiFort. This template is free, and fully coded acknowledging the unique visual design standards of the responsive design, and It contains a set of fully customized Bootstrap elements just like the bonus version released under the MIT license.

Features:

Examples pages and starter kits
Compatible with multiple frameworks
Modular design architecture

17. OAH-Admin

Live Demo / Download

OAH-Admin is a generous React dashboard template developed on top of Gatsby with super components included in the package. This powerful template appears with stylized UI accessories and a soft dark layout that enables anyone to effortlessly generate user interfaces for SaaS-based web applications, admin panels, CRM, and analytics dashboards.

Features:

Scalable palette scheme
Multiple background options
Styled application states

18. CoreUI

Live Demo / Download

CoreUI React Admin Template lets you save hundreds of invaluable hours in development work because it offers everything you need to create modern, beautiful, and responsive React.js-based responsive web applications. This product supports the most popular frameworks, and it's used by thousands and companies and developers around the world.

Features:

SCSS and Javascript source files
Data-rich responsive charts
Enterprise-level support

19. Shards Lite

Live Demo / Download

Shards Lite is a free React dashboard template bundle featuring a modern design system and numerous custom layouts and components. This template provides a modular foundation that can be easily extended to fit almost any type of development environment, and it's well documented so you can start building impressive user interfaces in a snap.

Features:

Solid and consistent design system
Highly optimized for performance
FontAwesome and Material icon packs

20. Black Dashboard

Live Demo / Download

Black is an extraordinary React app template for admin interfaces. Built on top of the design guidelines produced by Bootstrap, this template is an outstanding front-end opportunity for enterprise clients giving them the freedom of choosing and combining elements. It includes higher-level segments, design kits, and reusable graphs to improve the usability and development experience from the start to the end.

Features:

16 individual components
Packed with various plugins
Easily change views and positions

21. Boss Lite

Live Demo / Download

Boss Lite is an admin dashboard template based on React and Redux. It provides startups with a clean and contemporary design center constructed with the result of several hand-made color themes. This template has been built to makes the development method easy and fast, and it's supported by workflows with flexible layout and flexbox.

Easily manage data collection
25+ reusable modules
High performance with SSR

22. Material PRO

Live Demo / Download

Many React admin templates in this collection have a tiny scheme to get you started developing your app, but Material PRO has that and much more. With Material PRO, you’ll find fully explained code, extraordinary documentation, and video guides to help you quickly set up stunning pages with comfort. If you're in a rush to release your product, this is a great template to help you with it.

Features:

Various table examples
6 Months Free Updates
Integrated plugins

23. Isomorphic

Live Demo / Download

Isomorphic is a flexible and good-looking admin template with tonnes of adjustable ingredients meticulously produced to combine the best of dense technology and the magic of the sharp design. With Isomorphic you can instantly configure different positions, sizes, and attributes of any element to accommodate any kind of existing admin project.

Features:

Ready-made carousels and popovers
Layouts with project summary
Demo links with the source code

24. Light Blue

Live Demo / Download

While almost all React templates available as an open-source project has a good quantity of reusable UI segments to choose from, Light Blue has the most comprehensive list separated into different categories. With numerous pages and elements (including dashboard sample, typography, tables, maps, and icons), this template makes it easy to modify your admin dashboard with very little custom development.

Features:

Styled Bootstrap components
Responsive charts
Notifications styles

25. Flatlogic One

Live Demo / Download

Flatlogic One is a radically new template produced with React 16 and several hours of coding. The template is very fitting for developing analytics and data tables applications as it gives customizable and reusable React components for creating modern responsive web applications. The template is made with three different colors, and the navigation on the left sidebar is designed at the center-right panel for accessibility purposes.

Features:

Widgets integrated with Google Maps
Datatables developed from scratch
Static and dynamic sidebars

26. Contrast

Live Demo / Download

Contrast admin dashboard was created with dynamic components to let the users see very vital and important information without scrolling up and down the page when a new graph loads. This approach is especially useful if you want to tweak the dashboard without editing personal notes to leave the code intact as for the documentation.

Features:

Free for personal and commercial usage
Technical support included
Built with the latest code standards

27. Reduction

Live Demo / Download

React Reduction work alongside Create React App, which means that all the characteristics that create-react-app supports are available in this awesome template without differences. You can choose to have a clean layout with the admin panel behind a cover or move the decoration to the top, and you also have command over what data and menu options are available as part of the ornament.

Features:

Different live previews available
Navigation panel on the left
Subscription bar integration

28. Isomorphic Admin

Live Demo / Download

Almost every resource in this list misses a template for strategic dashboards to track key performance indicators, but Isomorphic Admin has multiple layouts of this kind that you can use to build dashboards with many strategic points and order-processing sections for order status. You may use it also to bootstrap the development of different types of web apps, such as SaaS products, and operational admins.

Features:

Mobile-friendly layout
Utility classes for rapid development
Server-Side Rendering

29. Monster

Live Demo / Download

Monster React is a free React and Redux-based admin dashboard template, which will help you create stunning web administrations and productized services with ease. This template comes with customizable React hooks parts and many ready-to-use fashion features that will give your users a great adventure while running your application, clicking from a button experience to another.

Features:

Designed by industry-leading designers
Multipurpose backend interface
Multiple extended use

30. React Admin

Live Demo / Download

React Admin is designed as a library of free React components built on top of Material UI in addition to custom React hooks exposing reusable controller inputs and logic. This template allows you to easily replace any part of the main structure with your own, and it supports different front-end frameworks that you can adapt according to your development needs and as the app grows over time.

Features:

Highly customizable interface
Large library of data types
Supports any form layout

Conclusion

Do you have other React dashboard templates and themes to recommend? Feel free to share your favorite ones, and we’ll add the best to the list.

30 Awesome places to find design inspiration

Davide Pacilio — Tue, 13 Apr 2021 10:47:59 +0000

If I could give you one piece of advice about enhancing your creative process, it would be to never approach a new design project without researching for inspiration first!
It doesn't matter if you are a seasoned product designer or a non-creative person with zero experience designing products. The right dose of inspiration can help you be more productive, avoid creative blocks, and produce constant unique/fresh ideas for your projects.
I’m always on the lookout for places where I can find high-quality inspiration for my projects, and this collection includes an extensive list of sites I use to get ton of inspiration for absolutely anything. For example:

Landing Pages/Websites
Portfolios
eCommerce
Mobile apps
Web apps
Logo design
Email design
Visual design

30 Awesome places to find design inspiration:

Landing Pages/Websites:

SaaS Landing Page

A curated gallery showcasing high-quality SaaS landing pages and websites. You can also filter the results by the technology, fonts, colors, and more.

Land-book

On Land-book you'll find a wide range of design inspiration, from SaaS landing pages, agency websites, portfolios, to e-commerce stores.

Lapa

Lapa Ninja is a gallery featuring a vast variety of landing page design inspiration, educational books, UI kits, freebies, and more.

Landingfolio

A website gallery that offers landing page inspiration and resources. You can also filter the results by categories, such as SaaS, mobile apps, startups, and much more.

One Page Love

One Page Love, specializes in one-page websites, landing pages, and templates. It's the best you can find in this specific niche.

Minimal Gallery

Minimal Gallery is a web design gallery that combines a minimal design with a finely-honed selection of great websites and landing pages.

Portfolios:

Humans

Humans is a hidden gem for finding portfolio-related inspiration. You can filter the results by profession (developers, designers, photographers, etc.), and even by colors.

Awwwards

Awwwards is one of the best galleries on the internet to find inspirational design. It covers several categories, including a great selection of portfolios from top professionals and agencies.

Siteinspire

Siteinspire showcases a huge selection of amazingly designed websites, including one of the best portfolio directories you can find on the internet.

Semplice Showcase

The Semplice Showcase features the best portfolios built with Semplice (a portfolio system based on WordPress).

eCommerce:

Commerce Cream

Commerce Cream features some of the best-looking eCommerce websites submitted by top design agencies. If you’re looking for some eCommerce inspiration, Commerce Cream is a great resource.

ecomm.design

ecomm.design is a collection of top-notch eCommerce websites filterable by platforms (e.g., Shopify, Squarespace, etc.) and categories (e.g., fashion, accessories, etc.).

Shopify Themes

Explore a wide range of beautifully designed themes created by top-notch designers and agencies. Find inspiration, discover styles, and start building your next store.

Mobile Apps:

UX Archive

UXArchive is the leading destination to find design inspiration from the world’s top mobile apps.

Mobbin

Mobbin is a hand-picked collection of the latest mobile design patterns from apps that reflect the best in design.

UI Garage

UI Garage features the best mobile design inspiration sortable by platforms (iOS and Android), product categories, and design patterns.

Rowlab

Rowlab displays a curated collection of great mobile apps sortable by patterns, categories, elements, and even interface colors.

Scrnshts

Scrnshts is a hand-picked selection of the finest app store design screenshots created by top designers and illustrators.

Web Apps:

Screenlane

Screenlane is a growing library of user flows and screenshots from popular web products. It's a great place to find real-world web app patterns and inspiration.

Webframe

Webframe is massive library of 800+ screenshots to get inspiration from the internet's top web apps.

ReallyGoodUX

ReallyGoodUX is an inspirational directory to find the best UX examples—including onboarding tours and walkthroughs, UX copywriting, signup flows, and more.

Logos:

Brand New

Brand New features logos and brand designs of notable products, companies, services, and organizations across all industries and locations.

Font In Logo

FontInLogo helps you search and find World Brands (and other) Logos with their font details.

Logopond

Logopond is an inspirational site & showcase of identity work from designers of varying abilities all across the world.

Email Design:

Really Good Emails

Really Good Emails aims to be the best showcase of email design and resources on the web.

Email Love

Email Love is a brand new online resource curating the best email designs, templates, and tools.

Email Gallery

Email Gallery helps designers and developers find inspiration in the collection of emails from various companies and individuals.

Visual Design:

Designspiration

Designinspiration is an image & color search engine for creating mood boards and finding art, design, logos, photography, and app inspiration.

Baubauhaus

Baubauhaus is a design blog made up of many images that represent design, illustration, photography, fashion, and art-related inspiration.

Inspirationgrid

Inspiration Grid is an online magazine celebrating creative talent from around the world. It showcases daily awesome examples of design, art, illustration, typography, photography, architecture, and more.

Conclusion

Where do you get inspiration? Feel free to share your favorite sources of inspiration and we’ll add the best to the list.

50+ Free tools and resources to create awesome user interfaces (Part 2)

Davide Pacilio — Tue, 14 Jul 2020 10:28:09 +0000

After the success of the first post, and incited by several of you to publish a second edition, I decided to spend a few hours this weekend to release the Part 2 of 50+ free tools and resources to create awesome user interfaces.

As for the first post, the whole list has been divided into different categories, including:

Tools
Illustrations
Photos & Videos
Typography
Iconography
Palette
Vectors & Shapes
Inspiration
Utility

So if you’re looking for a free set of icons, just click on the Iconography link above.

Before we jump right in, I would like to thank all fellow devs for kindly sharing with me their favorite open-source projects after the release of the first post. Without their contribution, this second edition wouldn’t have been possible 🙌

50+ free tools and resources to create amazing UIs (Part 2):

Tools

Responsively

A web browser that aids responsive web app development. Preview all target screens in a single window side-by-side.

Photopea

An online, free, photoshop alternative that anyone can use.

Free Logo Maker

Create beautiful logos in minutes (by Namecheap).

Pastel

Pastel makes it super easy to invite your clients and teammates to leave useful comments directly on your live websites.

Whimsical

Communicate visually at the speed of thought – collaborative flowcharts, wireframes, sticky notes, and mind maps.

Illustrations

Handz

H A N D Z is a free 3D illustrations of diverse hands gestures.

Toy Faces Library

Toy Faces is a fun diverse library of 3D avatars for your design mockups and personal use. The entire bundle costs $10, but you can download 8 3D avatars for free.

Blush

Blush makes it easy for anyone to add stunning illustrations to their work. With collections made by artists across the globe, there's something for everyone, and every project.

Vector Creator

Create free personalised illustrations from 3000+ elements.

Diversity Avatars

Diversity Avatars is set of 59 free inclusive avatars to use in your products, projects, or anywhere you want to.

Streamline Lab

80 free colorful illustrations to use in your presentations, application onboarding or marketing websites

Photos & Videos

Pixabay

Over 1 million of free high quality photos, videos, and vectors.

Magdeleine

Hand-picked free photos for your inspiration.

Burst

Beautiful free stock photos for websites and commercial use (by Shopify).

Reshot

Tons of uniquely free stock photos. Handpicked & non-stocky.

Gratisography

Free use-as-you-please pictures that stand out.

ISO Republic

Thousands of Free High-Resolution CC0 Photos and Videos.

Mazwai

Stunning free stock footage clips, hand-picked by a team of video professionals. Simple licensing, and no sign-up required.

Image Colorizer

Colorize black and white images automatically.

Typography

Beautiful Web Type

Guide to only the best open-source typefaces.

Fontfabric

100% FREE—Beautiful typeface collection—Sans, Serif, Script, and more.

Font Library

Font Library is a gallery of high-quality fonts. Free downloads and quality support.

100 Days of Fonts

100 Days Of Fonts is a project by Do-Hee Kim exploring Google Font pairings for over 100 days. I personally consult this list when I need some inspiration for a new Cruip template.

1001 Fonts

Over 200K free fonts in 12092 families. Free to download for personal and commercial use.

Free Typography

The best free fonts, typefaces, and typography.

Iconography

Essentials

More than 300 icons, made on a precise 2px grid with a unique geometric style. Free to use anywhere you want.

266 FREE responsive icons

Free 266 responsive icons in 3 sizes (16/20/24px) created with pixel-perfect, dedicated for Interface design and wireframes.

Material Icons Library

Free collection of 1000+ icons for popular graphics tools.

Unicons

Open-source vector icons and icon-font library.

Tabler Icons

A set of over 550 free MIT-licensed high-quality SVG icons for you to use in your web projects.

Feather Icons

Simply beautiful open source icons.

Palette

Image to Colors

Upload an image to generate a color palette based on the image's primary colours.

Happy Hues

Happy Hues is a color palette inspiration site that acts as a real world example as to how the colours could be used in your design projects.

Piggment

Create the perfect gradient palette and get inspired to make something beautiful.

Coolors

Generate or browse beautiful color combinations for your designs.

Colorbox

Colorbox is a color tool by Lyft Design to produce color tints and shades.

Picular

Picular is a rocket fast primary color generator using Google's image search.

Vectors & Shapes

Shape Divider

Shape Dividers makes it easy for designers and developers to export beautiful SVG dividers for their projects.

Trianglify

Tweakable, one-of-a-kind hero images for your next project.

Free SVG Maps

Hundreds of free SVG maps available in high and low details.

Worldvectorlogo

Download hundreds of vector logos from brands you love.

Logolix

Free logos for your projects! No attribution required.

Inspiration

Webframe

800 web app screenshots for inspiration on your next app.

SaaS Landing Page

The best SaaS landing page examples for design inspiration.

Nicely Done

A curated showcase of the best digital products.

UI Design Daily

1000+ open-source UI designs, updated daily.

Mobbin

Discover the latest iOS UI design trends and patterns.

UI Garage

Daily handpicked UI inspiration & patterns.

Utility

Resizing App

Convert, optimise, crop, and resize images online in only one easy click. Free and unlimited.

TinyPNG

Smart PNG and JPEG compression - compress up to 20 images at the same time, for free!

Favic-o-matic

Favic-o-Matic generates favicons, both .ico & .png, and the HTML code needed to make your website look awesome on every browser and every device.

Screely

Instantly turn your screenshot into a beautiful mockup.

Sneakpeekit

Desktop, tablet, and mobile printable grids for design wireframing.

Font In Logo

Discover the fonts used on your favorite brand logos.

Conclusion

I hope you enjoyed this second edition of 50+ free tools and resources to create awesome user interfaces. Do you’ve other resources to recommend? Please feel free to contribute by commenting below - we might end up writing a third edition :)

20 Awesome websites built using Vue.js

Davide Pacilio — Tue, 07 Jul 2020 10:47:49 +0000

Vue is a progressive framework for building web interfaces and single-page apps. It is becoming more and more popular among developers, and thanks to its flexibility and moderately smooth learning curve this framework is currently used on over 650K websites, and by big companies like Apple, Netflix, and Google.

Here is a list of 20 awesome website and landing pages you probably have heard about, but might not know were created using Vue.js.

Before we jump into the list, I used SaaS Landing Page to find high-quality Vue.js examples, and Wappalyzer (an amazing free-based tool) to identify the technologies behind the products.

SaaS Landing Page

Discover the best landing page examples created by top-class SaaS companies, and get ideas and inspiration for your next design project.

Wappalyzer

Reveal the technology stack of any website, instantly and for free.

20 Awesome Vue.js website examples:

1. Spendesk

Spendesk is an all-in-one corporate expense and spend management service. It lets you track expenses across your company, empower your employees with a clear approval process, and simplify your bookkeeping.

2. Moderne

Moderne provides highly tailored ad ideas and insights, offering a digital workspace for more effective brainstorming for creative minds.

3. Chargebee

Chargebee is the leading subscription billing software powering end-to-end recurring billing, subscription management & auto invoicing for 2000+ SaaS businesses.

4. Yousign

Yousign is a certified software solution for generating verifiable electronic signatures. The application is the leader in its class in France and already has a considerable customer base with more than 1500 customers.

5. Infermedica

Infermedica is a leading digital health company specialized in AI-powered solutions for preliminary diagnosis and patient triage.

6. Keap

Keap (formerly Infusionsoft) offers an e-mail marketing and sales platform for small businesses, including products to manage and optimise the customer lifecycle, customer relationship management, marketing automation, lead capture, and e-commerce.

7. Beau

Beau allows you to easily pull in data from different sources, discover patterns, uncover trends and share insights with your team to keep your business moving forward.

8. Laravel Vapor

Laravel Vapor is an auto-scaling, serverless deployment platform for Laravel, powered by AWS Lambda. Manage your Laravel infrastructure on Vapor and fall in love with the scalability and simplicity of serverless.

9. MetaMusic

MetaMusic outlines the procedure and best practices to follow and establishes a common metadata model for indexing any music content.

10. Specify

Specify is a tool to create, scale and maintain a design system. Meet the ultimate bridge for digital product teams.

11. ProtoPie

ProtoPie is the easiest tool used to turn your UI/UX design ideas into highly interactive prototypes for mobile, desktop, web, all the way to IoT.

12. Chargetrip

Chargetrip is accelerating the advent of sustainable transportation by developing the missing tools that help people and businesses switch to electric mobility.

13. Brilliant

Brilliant helps you build quantitative skills in math, science, and computer science with fun and challenging interactive explorations.

14. Mille et UN fund

The Mille et UN Fund for Young People is the first major government project that brings together crowdfunding, contributions from businesses, and support from the public sector.

15. Netlify

Netlify is a unified platform that automates code to create performant, easily maintainable sites and web apps.

16. ITG.Digital

ITG.Digital is a website that offers more than 1,500 vector illustrations and 1,000,000 unique combinations for web applications, presentations, social media, print, and more.

17. Icons8

Icons8 app allows to recolor icons in seconds, add overlays, create icon fonts, drag-n-drop icons to any software, and more.

18. Inspireframe

Inspireframe lets anyone easily create website prototypes with thousands of real website components. No design skills needed!

19. Aircall

Aircall is a cloud-based call center software that integrates with CRM, productivity, and helpdesk tools.

20. kontainer

Kontainer is a marketing platform for secure & professional organization & sharing of your images, video, logos and other files both internally and externally.

Conclusion

I hope you enjoyed this list Vue.js examples and inspiration. If you’re aware of more rad websites built using Vue.js please feel free to share them below.

35+ Free React templates and themes

Davide Pacilio — Tue, 02 Jun 2020 10:44:43 +0000

Free React resources are very difficult to find when searching for templates and themes on the Internet.

Even if you don’t care about the quality, they seem pretty undiscoverable, so moved by curiosity, I spent hours digging around on Google and Github, and the result is this nice collection of 35+ free React templates and themes. I wouldn't have bet on it, but they are also high-quality resources.

So, in this list will you find a vast variety of templates and themes to build pretty much anything you can imagine. For example:

Admin dashboards
Websites
Landing pages
Online portfolios
Blogs
Design systems

I’ve not distributed the resources into sections (e.g. website templates) because not everything in this list falls under a specific category (e.g. component libraries, UI Kits, etc..), so I would suggest you browse the entire article and bookmark your favorite ones.

A last point: Even although we can't consider component libraries and UI Kits as templates and themes, they are amazing starting points to kickstart new projects, so I thought it was worth mentioning a few of them in this collection.