Styling

​

Theme

There are several predefined shadcn themes included: resources/css/theme-{color}.css.

To use one of the themes, update this line: @import url(theme-neutral.css) in app.css.

To update default border radius, change the --radius value in your theme css file.

For example, if you want sharp borders, use this --radius: 0rem and if you want round borders, use this --radius: 1rem. Default is --radius: 0.5rem. You can set any value and see what works best for you.

​

Custom themes

If you need completely custom themes to stand out you can generate custom themes.

There an example of custom generated theme theme-custom.css using shadcn-custom-theme.

This generator works only with Tailwind colors and you can customize it as you like. If you want to create unique theme with completely custom colors, this generator could be a good start.

Custom theme has been generated using this code:

npx shadcn-custom-theme primary=orange secondary=green accent=pink gray=neutral

Of course, you can always override default colors with your custom colors on specific places. For example, Card background color bg-red-100 dark:bg-red-900 or Button bg-indigo-600, etc.

​

TailwindCSS

uses TailwindCSS for styling.

To update default configuration, open tailwind.config.js and do the updates.

theme: {
  container: {
    center: true,
    padding: "2rem",
    screens: {
      "2xl": "1536px",
    },
  },
}

theme: {
  extend: {
    screens: {
      "phone-xs": { raw: "(max-width: 389px)" },
      phone: { raw: "(max-width: 639px)" },
    },
  },
}

​

Defaults

For some properties you can set the default value to shorten your classes. Just name them as DEFAULT in your config.

// text-primary, bg-primary, border-primary, etc. will use the primary color
// text-primary-foreground, bg-primary-foreground, etc. will use the foreground color
colors: {
  primary: {
    DEFAULT: "hsl(var(--primary))",
    foreground: "hsl(var(--primary-foreground))",
  },
}

​

Safelist

Safelist contains list of classes that should always be included with the build. But don’t just safelist any class, use it in situations where classes are dynamically generated and can’t be auto-recognized.

safelist: ["dark", "backdrop-blur"];

​

Logo

Recommended way is to update resources/js/Components/ApplicationLogo.vue with your own SVG logo.

You can also upload PNG or SVG image to the public folder and use img tag instead.

​

Favicon

Generate your favicon files and replace them inside public folder.

• android-chrome-192x192.png
• android-chrome-512x512.png
• apple-touch-icon.png
• favicon-16x16.png
• favicon-32x32.png
• favicon.ico

​

Fonts

By default there are two font families included: Figtree and Inter.

Default font family is Figtree. Class for default font family is font-body.

If you want to use Inter instead, or any other custom font family, update the tailwind.config.js file:

fontFamily: {
    body: ["Inter", ...defaultTheme.fontFamily.sans],
}

If you want to add more fonts, check the official Tailwind docs.

​

bunny.net fonts

By default, bunny.net is used to provide the included fonts.

<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700|inter:400,500,600,700" rel="stylesheet" />

​

Google fonts

To include Google fonts, go to resources/views/app.blade.php and similar example instead of the current fonts. Make sure to copy embed code provided by Google, and not the one in example.

<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

Then update the tailwind.config.js accordingly.

​

Custom fonts

To use fonts from other providers like Typekit, jsDelivr or Unpkg, just follow their docs and update app.blade.php and tailwind.config.js accordingly.

If you need help to include custom fonts which are not hosted on any CDN, please, create Helpdesk ticket in your dashboard.

​

Typography

To style HTML coming from editor uses @tailwindcss/typography package and its prose classes.

You can style it under typography in tailwind.config.js configuration file and in resources/css/app.css using .prose class (there are already some custom styles included).

​

Links

There are two predefined styles for anchor tags (links).

.inline-link {
  @apply underline underline-offset-4 transition hover:text-primary;
}

.inline-link-v2 {
  @apply underline underline-offset-4 transition hover:no-underline;
}

<template>
  <a href="#link" class="inline-link">Link</a>
  <Link href="#link" class="inline-link-v2">Link</Link>
</template>

​

Text highlight

By default, text highlight will be in combination of background and foreground colors.

To update this, go to resources/css/app.css and update selection:bg-foreground and selection:text-background.

body {
  @apply selection:bg-foreground selection:text-background;
}

​

Icons

Default icons used across the application are Lucide icons.

You can import them like this in your script setup:

import {
  CrownIcon,
  SwordsIcon,
  GemIcon,
  PackageIcon,
  CreditCardIcon,
  UsersIcon,
  ShieldCheckIcon,
  MessageSquareMoreIcon,
  BotIcon,
} from "lucide-vue-next";

And use them like this in your template:

<CrownIcon class="size-4" />
<SwordsIcon class="size-6 text-primary" />

​

Social icons

Since Lucide doesn’t provide icons for social media providers, they are custom-generated using Simple Icons.

To check which icons are available with , how to use them and how to add new icons, go to this page.