DEV Community

Cover image for Preline UI + Gowebly CLI = ❤️
Vic Shóstak
Vic Shóstak

Posted on • Edited on

Preline UI + Gowebly CLI = ❤️

Introduction

Hey, DEV friends! 👋

Today, I've released the Gowebly CLI v2.4.0 which includes Preline UI components library support for the frontend.

Yep, let's take a closer look 👇

📝 Table of contents

What is Preline UI?

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

GitHub logo htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

Hero Image

Logo

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

License: MIT

Why use Preline UI?

Based on the Tailwind CSS utility classes, Preline UI's prebuilt components and UI elements help you quickly design and customize responsive mobile-first websites with the components a website needs, including buttons, dropdowns, navigation bars, modals, and more.

What's in the box?

Components are grouped by visual usability criteria (components, navigation, forms, etc.) and styled directly on top of Tailwind CSS, making them easy to extend and customize. This is a lifesaver for developers looking to create a unique and eye-catching design system without the hassle of creating each component by hand.

Getting Started

Quick Setup

This guide will help you get started with Preline UI, including how to run, customize, update, and integrate your project!

First, you need to make sure that you have a working Tailwind CSS project…

Most awesome features:

  • 750+ Free Components & Examples. Hundreds of component examples for all your website needs that meet accessibility criteria.
  • Universal Framework Compatibility. Preline UI is fully compatible wherever Tailwind CSS is in action, from React to Vue and beyond.
  • Tailwind CSS Plugins. Completely unstyled, fully accessible UI plugins for popular features that for one reason or another don't belong in core.
  • Dark Mode. All components include a dark variant that lets you style your site differently when dark mode is enabled.
  • World's largest free Figma design system. Preline UI Figma is the largest free design system for Figma, crafted with Tailwind CSS styles and Preline UI components with extra top-notch additions.
  • Bring your ideas to life in no time. Preline UI provides all the essential components you need to convert your vision into thriving start-ups.

preline ui

↑ Table of contents

How to use Preline UI with Gowebly CLI?

The first thing you should do is verify that you are using Gowebly CLI version v2.4.0 or higher.

Next, when you start creating a new project, just switch the CSS framework selector to the Tailwind CSS with Preline UI components option:



gowebly create


Enter fullscreen mode Exit fullscreen mode

And Gowebly CLI created a new project with the Preline UI.

Yeah, it's just working! 🎉

↑ Table of contents

Photos and videos by

P.S.

If you want more articles (like this) on this blog, then post a comment below and subscribe to me. Thanks! 😻

❗️ You can support me on Boosty, both on a permanent and on a one-time basis. All proceeds from this way will go to support my OSS projects and will energize me to create new products and articles for the community.

support me on Boosty

And of course, you can help me make developers' lives even better! Just connect to one of my projects as a contributor. It's easy!

My main projects that need your help (and stars) 👇

  • 🔥 gowebly: A next-generation CLI tool that makes it easy to create amazing web applications with Go on the backend, using htmx, hyperscript or Alpine.js and the most popular CSS frameworks on the frontend.
  • create-go-app: Create a new production-ready project with Go backend, frontend and deploy automation by running one CLI command.

Other my small projects: yatr, gosl, json2csv, csv2api.

Top comments (0)