25 мест, где можно найти бесплатные компоненты Tailwind CSS

Photo by ANTONI SHKRABA from Pexels

Экосистема Tailwind CSS неуклонно растет. Адам Ватан, основатель Tailwind, недавно сообщил, что его детище преодолело отметку в 2 миллиона загрузок в неделю.

А по мере роста экосистемы все больше и больше людей создают вспомогательные ресурсы для этого замечательного фреймворка.

Одним из самых популярных ресурсов для Tailwind CSS являются библиотеки компонентов (например, Tailwind UI). Они помогают ускорить процесс разработки, предоставляя готовые элементы, которые можно добавлять в свои проекты.

Библиотеки компонентов экономят время разработчика, но при этом могут быть довольно дорогими. Чтобы помочь вам найти альтернативные варианты, я составил список моих любимых бесплатных ресурсов. Я все их пробовал и тестировал, а некоторые даже использую в своих проектах.

Cruip Free Components

Cruip Free Components — это библиотека бесплатных шаблонов Tailwind CSS и экспериментов с кодом, созданная командой разработчиков Cruip.com. Галерея включает в себя набор фрагментов из различных премиальных шаблонов, таких как информационные панели приложений, лэндинги и сайты. Это полностью функциональные фрагменты кода, которые можно использовать в любом проекте или приложении.

Tailwind Design

Великолепный пакет, включающий в себя настраиваемые компоненты и элементы для создания адаптивных веб-приложений. Tailwind Design уникален, потому что он масштабируемый, простой в использовании, соответствует принципам Tailwind, имеет красивый макет и создан с учетом передового опыта современной разработки.

Ghost UI

Не можете найти идеальный набор стилей для своего следующего веб-приложения? Создайте его сами с помощью Gust UI! Это галерея Tailwind CSS, в которой представлены адаптивные компоненты, элементы и примеры страниц. Вы можете быстро применить готовые стили к своему приложению, не перегружая его огромным количеством несвязанных стилей. Удалите то, что вам не нужно, измените то, что нужно, и создайте приложение, которое подходит именно вам.

FloatUI

Набор интерактивных компонентов и UI-элементов, которые позволяют быстро разрабатывать сайты и веб-приложения с помощью React. Float UI написан с нуля с использованием чистого React, React Router и Tailwind CSS, чтобы предоставить все необходимое для создания красивого сайта. Применение jQuery или сторонних плагинов не требуется.

Tailwind Awesome

Ищете самые крутые новые шаблоны и наборы UI-компонентов для сайта или веб-приложения? Tailwind Awesome — это тщательно подобранная коллекция лучших бесплатных ресурсов в Интернете. Команда этого проекта постоянно ищет новые темы, шаблоны, модули и наборы компонентов для использования с Tailwind CSS.

HyperUI

HyperUI — это бесплатная библиотека компонентов Tailwind CSS с открытым исходным кодом. Все компоненты настраиваются и готовы к использованию прямо из коробки. Вы можете скопировать исходный код или загрузить понравившиеся компоненты для простой интеграции в своем проекте. Цвета, размеры шрифта, контент и многое другое можно изменять.

a17t

a17t был создан как расширяемый, атомарный и независимый от дизайна способ создания UI-компонентов. Этот плагин является кульминацией нескольких месяцев работы и результатом многих дискуссий между двумя увлеченными людьми, которые спорят об идеальном подходе к CSS. Вы увидите, как сильно этот плагин упрощает создание служебных классов Tailwind.

Kometa UI Kit

Набор компонентов пользовательского интерфейса на основе Tailwind CSS. Вы можете использовать их как разделы Tailwind или просто как удобный набор элементов. Неважно, создаете ли вы панель администратора, SPA или просто сайт — эти разделы станут неотъемлемой частью вашего набора инструментов и существенно улучшат ваш рабочий процесс.

Tailwind Toolbox

Набор полезных базовых шаблонов с открытым исходным кодом, компонентов, удобных наборов для сборки, генераторов, плагинов и инструментов, которые помогут начать любой проект Tailwind CSS. Почти все на этом сайте имеет открытый исходный код и доступно для использования в ваших проектах.

Headless UI

Нужно что-то простое, быстрое и плоское? Headless UI — это коллекция совершенно не стилизованных, полностью доступных компонентов пользовательского интерфейса, которые вы можете использовать как угодно. Здесь есть все: от кнопок и заголовков до меню и переходов. Компоненты не связаны между собой.

Tailwind UI Kit

Tailwind UI Kit — это мощная библиотека доступных, полностью адаптивных и готовых к установке компонентов Tailwind CSS. С ее помощью вы сможете ускорить рабочий процесс и обеспечить красивый вид своего проекта на всех устройствах.

Благодаря простым в реализации стилям, функциональной анимации и удобным утилитам вы сможете начать работу буквально с нескольких строк кода.

DaisyUI

DaisyUI — это коллекция популярных компонентов Tailwind CSS. Репозиторий набрал больше 7 тысяч звезд на GitHub и тысячи подписчиков в Twitter. Здесь вы найдете гибкий набор виджетов, которые можно использовать с компонентным подходом Tailwind к стилизации.

Tailwind Components

Этот популярный сайт представляет собой репозиторий бесплатных UI-компонентов, созданных для фреймворка Tailwind CSS. Он включает в себя шаблоны, демо и документацию, которые помогут вам начать ваш следующий веб-проект, предоставив отправную точку для вашего нового сайта или приложения.

Treact

Treact — это современная галерея шаблонов и UI-компонентов React, созданных с использованием Tailwind CSS.

Этот продукт поставляется с кучей крутых CSS-анимаций и множеством полезных структур, позволяющих очень просто настроить ваш следующий проект.

Все компоненты являются модульными и полностью адаптируются к работе как на мобильных устройствах, так и на больших экранах компьютеров.

Все ресурсы в Treact постоянно обновляются и на 100% бесплатны для личного и коммерческого использования.

Tail-Kit

Tail-Kit — это набор из 250+ наиболее распространенных компонентов и самых популярных шаблонов компонентов с подробным руководством по настройке.

Цель проекта — ускорить процесс разработки и помочь вам добиться наилучших результатов при использовании Tailwind CSS.

Lofi UI

Lofi UI был создан как забавная (но все же функциональная) галерея красивых компонентов Tailwind CSS, пригодных к многократному использованию и переделке.

Авторы этого продукта хотели создать пространство, которое позволило бы как опытным, так и начинающим фронтенд-разработчикам учиться у других, экспериментировать с различными компонентами и создавать что-то потрясающее в кратчайшие сроки. Не нужно делать форк этого кода, просто создайте свой собственный!

Meraki UI

Набор красивых, созданных и составленных вручную компонентов Tailwind CSS. Эти компоненты поддерживают языки с письмом справа налево и полностью адаптивны, имеют элегантный темный режим. Meraki UI — это множество доступных элементов пользовательского интерфейса, контекстная иконографика и разумная веб-типографика.

VechaiUI

CSS-библиотека, работающая «из коробки» с create-react-app (включая TypeScript-версию), Preact cli, Next.js, Gatsby и любой другой средой.

VechaiUI была создана для людей, которым нравится писать стили для своего приложения, а не полагаться на уже созданную тему.

Используя эту библиотеку, вы можете сделать свое приложение красивым и доступным.

Mamba UI

Это библиотека компонентов и шаблонов, совместимых с Tailwind CSS. Она охватывает широкий спектр стилей интерфейса — от более простого дизайна на основе компонентов до сложных макетов таблиц данных, работающих «из коробки».

Mamba UI была создана, чтобы помочь вам в разработке красивых пользовательских интерфейсов, которые будут отлично смотреться на экранах любого размера.

Flowbite

Развивающаяся библиотека из более чем 400 бесплатных веб-компонентов и интерактивных элементов, созданных с помощью служебных классов из Tailwind CSS. Каждый элемент можно легко вставить в любой проект Tailwind, чтобы добавить новый и фирменный стиль. Эта библиотека — бесценный ресурс для быстрого создания любого приложения или сайта.

Tailwind Starter Kit

Бесплатное решение для пользователей Tailwind, которые хотят начать использовать этот фрейворк для комплексного оформления своих проектов, но не хотят устанавливать не выпущенный официально CSS.

Tailwind Starter Kit поставляется с несколькими компонентами, которые можно использовать в любом HTML-документе, и готов к использованию в проектах на основе React, Angular и Vue. Каждый может взять эти CSS-файлы из репозитория GitHub и начать использовать Tailwind в своих проектах.

Kutty

Kutty — это плагин Tailwind для создания современных и отзывчивых веб-приложений. Он имеет набор доступных компонентов, которые часто используются в веб-приложениях. Например — раскрывающийся список, группы input и вкладки. Все эти компоненты пригодны для многократного использования.

Kutty также предоставляет распространенные шаблоны интерфейса. Например, фиксированный заголовок, липкий футер, центрированную навигацию и полноэкранные макеты без навигации.

PostSrc

Это набор компонентов Tailwind CSS, в котором каждый найдет что-нибудь подходящее. Вы можете использовать поиск, чтобы отфильтровать то, что ищете. Обратите внимание, что страница обновляется ежедневно, поэтому вам, возможно, придется перезагрузить ее, чтобы увидеть новые посты.

Tailblocks

Tailblocks — это мощный конструктор страниц. Он сочетает в себе лучшее из Tailwind CSS и заготовленные шаблоны с разделами, которые вы можете использовать для создания всего сайта. Имея на выбор более 120 готовых к использованию блоков и более 10 шаблонов, вы можете создать любой сайт или лэндинг без необходимости писать что-либо с нуля.

Components Collection

Ищете редкие и необычные компоненты Tailwind CSS? Этот репозиторий включает в себя все лучшие компоненты и элементы, найденные в Интернете. Все они распределены по разделам, чтобы вы могли легко найти то, что вам нужно. Вам не понадобится обыскивать несколько разных библиотек компонентов, вы все сможете взять здесь.

Перевод статьи «25 Places Where You Can Get Free Tailwind CSS Components».

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх