Preline UI + Gowebly CLI = ❤️
Tags: css, webdev, go, news
Published: 2024-04-25 14:13:20

## Introduction

Hey, DEV friends! 👋

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

Yep, let's take a closer look 👇

<a name="toc"></a>
### 📝 Table of contents

- [What is Preline UI?](#what-is-preline-ui)
- [How to use Preline UI with Gowebly CLI?](#how-to-use-preline-ui-with-gowebly-cli)

<a name="#what-is-preline-ui"></a>
## What is Preline UI?

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

{% github https://github.com/htmlstreamofficial/preline %}

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tf4dwhiicascjty92qsy.png)

[↑ Table of contents](#toc)

<a name="#how-to-use-preline-ui-with-gowebly-cli"></a>
## 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:

```console
gowebly create
```

And [Gowebly CLI][gowebly_url] created a new project with the **Preline UI**.

Yeah, it's just working! 🎉

[↑ Table of contents](#toc)

<a name=""></a>
## Photos and videos by

- Vic Shóstak https://github.com/koddr
- Preline UI authors https://preline.co

<!-- Article links -->

[prelineui_url]: https://preline.co

<a name=""></a>
## P.S.

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

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][gowebly_url]: 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][cgapp_url]: Create a new production-ready project with Go backend, frontend and deploy automation by running one CLI command.

Other my small projects: [yatr][yatr_url], [gosl][gosl_url], [json2csv][json2csv_url], [csv2api][csv2api_url].

<!-- Footer links -->

[gowebly_url]: https://github.com/gowebly/gowebly
[cgapp_url]: https://github.com/create-go-app
[yatr_url]: https://github.com/koddr/yatr
[gosl_url]: https://github.com/koddr/gosl
[csv2api_url]: https://github.com/koddr/csv2api
[json2csv_url]: https://github.com/koddr/json2csv