Introduction

Caesar provides a library of components that you can use to build your web app. These components are built using Templ (the recommended template engine), HTMX (a small JS lib for AJAX requests), and Tailwind CSS (for styling).

Installation

Create a web application

If not already done, create a new web application using the Caesar CLI.

caesar new

# And then, go to the newly created directory
cd <my_web_app>

Installing the Caesar UI package in your applications

To install the Caesar UI package in your application, run the following command:

go get -u github.com/caesar-rocks/ui

caesar new

Add Font Awesome

Caesar makes use of Font Awesome for its icons.

There are various ways to add Font Awesome to your project. For example, you can add this link in the head of your views/layouts/shared_layout.templ file:

<head>
  <!-- ... -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js"></script>
  <!-- ... -->
</head>

Add AlpineJS

Caesar makes use of AlpineJS for its interactive components.

There are various ways to add AlpineJS to your project. For example, you can add this link in the head of your views/layouts/shared_layout.templ file:

<head>
  <!-- ... -->
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <!-- ... -->
</head>

Add the Inter font

While you are free to use any font you like, we recommend using the Inter font for your web app.

Add the Inter font to your project by adding the following line to your views/app.css file:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

Then, register it in your tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
};

Set up the TailwindCSS Animate plugin

CaesarUI makes use of the TailwindCSS Animate plugin to provide animations for its components.

Install it by running the following command:

npm install -D tailwindcss-animate

Then, add it to your tailwind.config.js file:

module.exports = {
  // ...
  plugins: [
    require('tailwindcss-animate'),
  ],
};

Add your first Caesar component

Now, you can start adding components to your web app.

For example, to add a button component, you can use the following code:

caesar ui:add button

This will add a new button component to your views/ui directory, and append some styles in your views/app.css file.

Use your Caesar component

You can now use the button component in your views.

For example, to use the button component in your views/welcome.tmpl file, you can add the following code:

package pages

import (
    "starter_kit/views/layouts"
    "starter_kit/views/ui"
)

templ WelcomePage() {
    @layouts.SharedLayout() {
        @ui.Button(ui.ButtonProps{
            Variant: ui.ButtonVariantDanger,
        }) {
            Danger
        }
    }
}

FAQ

Why providing UI components?

Templ and HTMX are still relatively new in the Go ecosystem, and there are not many resources available to help developers build web apps using these tools. By providing a library of components, we aim to make it easier for developers to build web apps using Caesar.

Can I customize the components?

Yes, you can customize the components to fit your needs. You can modify the component files in the views/ui directory, and the styles in the views/app.css file.

Are these components free to use?

Yes, these components are free to use (for personal and commercial use) in your web app. You can modify them, distribute them, and use them in any way you like.

Moreover, feel free to share what you are building with these UI components.