Lara Blade

How to use

LaraBlade Components

If you just want to use the functionality of the components, you can copy paste directly into your project and tweak the colors as you would in other libraries. We wanted to take it a step futher and create these with tailwind theming in mind. This allows you to alter the primary & neutral colors in the config and update all the components at once. Customize to your heart's content!

tailwind.config.js

This configuration file includes the color schemes and fonts used in our components. You can easily replicate this by copying and pasting it into your own Tailwind configuration, then adjusting the colors as per your preferences in the app.css file.

The colors can be accessed using the standard Tailwind CSS syntax you're familiar with. The only difference is that instead of using `bg-indigo-500`, you would use `bg-primary-500` or 'text-primary-500'. 

import defaultTheme from "tailwindcss/defaultTheme";
import forms from "@tailwindcss/forms";
import typography from "@tailwindcss/typography";
 
/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./vendor/laravel/jetstream/**/*.blade.php",
        "./storage/framework/views/*.php",
        "./resources/views/**/*.blade.php",
    ],
 
    theme: {
        extend: {
            fontFamily: {
                jakarta: [
                    "Plus Jakarta Sans",
                    ...defaultTheme.fontFamily.serif,
                ],
            },
            colors: {
                primary: {
                    50: "var(--color-primary-50)",
                    100: "var(--color-primary-100)",
                    200: "var(--color-primary-200)",
                    300: "var(--color-primary-300)",
                    400: "var(--color-primary-400)",
                    500: "var(--color-primary-500)",
                    600: "var(--color-primary-600)",
                    700: "var(--color-primary-700)",
                    800: "var(--color-primary-800)",
                    900: "var(--color-primary-900)",
                },
                neutral: {
                    50: "var(--color-neutral-50)",
                    100: "var(--color-neutral-100)",
                    200: "var(--color-neutral-200)",
                    300: "var(--color-neutral-300)",
                    400: "var(--color-neutral-400)",
                    500: "var(--color-neutral-500)",
                    600: "var(--color-neutral-600)",
                    700: "var(--color-neutral-700)",
                    800: "var(--color-neutral-800)",
                    900: "var(--color-neutral-900)",
                },
                base: {
                    white: "var(--color-base-white)",
                    black: "var(--color-base-black)",
                },
            },
        },
    },
 
    plugins: [forms, typography],
};

Sometimes I might forget to update this post with the latest config. So please just use the LaraBlade UI repo for the latest version.

app.css

The app.css file is where we determine the actual theme colors. At the start of the file, you'll notice that we import the fonts we utilize, sourced directly from Google.

The `:root` is responsible for setting the default style of the components, which is applied when no custom theme is used. The design you see on this website reflects the default style.

Creating a new theme is a breeze. You simply duplicate the root colors and integrate them into your custom theme. Take a look at `.laraBlade-theme-dark` in the example provided for a practical reference. To implement the theme, you need to incorporate it in the parent class, just like you would add any other custom class to a component. This allows for multiple themes to be displayed on a single page. We suggest assigning a theme class to the body tag in your layouts file for the best results.

This means you can also do `class="larablade-light-theme dark:larablade-dark-theme"` and use the standard tailwind dark mode approach. Learn more about it here https://tailwindcss.com/docs/dark-mode 

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
    :root {
        --color-primary-50: #eef2ff;
        --color-primary-100: #e0e7ff;
        --color-primary-200: #c7d2fe;
        --color-primary-300: #a5b4fc;
        --color-primary-400: #818cf8;
        --color-primary-500: #6366f1;
        --color-primary-600: #4f46e5;
        --color-primary-700: #4338ca;
        --color-primary-800: #3730a3;
        --color-primary-900: #312e81;
 
        --color-neutral-50: #f9fafb;
        --color-neutral-100: #f3f4f6;
        --color-neutral-200: #e5e7eb;
        --color-neutral-300: #d1d5db;
        --color-neutral-400: #9ca3af;
        --color-neutral-500: #666A74;
        --color-neutral-600: #4b5563;
        --color-neutral-700: #30333B;
        --color-neutral-800: #262830;
        --color-neutral-900: #1E2127;
 
        --color-base-white: #ffffff;
        --color-base-black: #000000;
    }
 
    .laraBlade-theme-dark {
        --color-primary-0: #ffffff;
        --color-primary-50: #ecf0ff;
        --color-primary-100: #dde4ff;
        --color-primary-200: #c2cdff;
        --color-primary-300: #9cafff;
        --color-primary-400: #757dff;
        --color-primary-500: #5754ff;
        --color-primary-600: #4836f5;
        --color-primary-700: #382ad6;
        --color-primary-800: #2335ae;
        --color-primary-900: #121155;
 
        --color-neutral-0: #000000;
        --color-neutral-50: #f8fafc;
        --color-neutral-100: #f1f5f9;
        --color-neutral-200: #e2e8f0;
        --color-neutral-300: #cbd5e1;
        --color-neutral-400: #94a3b8;
        --color-neutral-500: #64748b;
        --color-neutral-600: #475569;
        --color-neutral-700: #334155;
        --color-neutral-800: #1e293b;
        --color-neutral-900: #0f172a;
    }
 
    .laraBlade-theme-light {
        --color-primary-0: #ffffff;
        --color-primary-50: #ecf0ff;
        --color-primary-100: #dde4ff;
        --color-primary-200: #c2cdff;
        --color-primary-300: #9cafff;
        --color-primary-400: #757dff;
        --color-primary-500: #5754ff;
        --color-primary-600: #4836f5;
        --color-primary-700: #382ad6;
        --color-primary-800: #2335ae;
        --color-primary-900: #121155;
 
        --color-neutral-0: #ffffff;
        --color-neutral-50: #f4f6fb;
        --color-neutral-100: #e8eef8;
        --color-neutral-200: #e1e7f1;
        --color-neutral-300: #c9d2e0;
        --color-neutral-400: #96a3ba;
        --color-neutral-500: #697690;
        --color-neutral-600: #545e73;
        --color-neutral-700: #151e2d;
        --color-neutral-800: #0f1623;
        --color-neutral-900: #090e17;
    }
 
}

Once more please just use the LaraBlade UI repo for the latest version of this file.

x-lb syntax

To keep things simple, and not mess up any existing components you might have, we decided to create a new folder in `/components/lb/` which results with a default laravel prefix all the components with `x-lb.` This way you can easily identify which components are from LaraBlade and which are your custom ones.

For example, you will be able to access a primary button with `x-lb.button.primary` or modals with `x-lb.modal`. Some more advanced things like the `x-lb.table` have multiple components that are used such as cells, rows, headings and more.

Where is the composer package?

I'm definitely interested in creating a Composer package for this, but I haven't yet ventured into that domain. At present, my primary focus is enhancing the components to be more robust and comprehensive. While I'm looking forward to understanding how packages work, I would appreciate any assistance or guidance in this respect. As always, I'm open to learning new things.