Shadcn UI (Tailwind)

Theme type:

Login

Framework:

React

Base UI Toolkit:

Tailwind + ShadCN UI

storybook - Storybookoussemasahbeni.github.io

Storybook Preview

Setup Guide

1

Create a new Vite Project

npm

npm create vite@latest

yarn

yarn create vite

pnpm

pnpm create vite

bun

bun create vite

When prompted:

• Project name: keycloak-theme (or your preferred name)

• Select a framework: Choose React

• Select a variant: Choose TypeScript

cd keycloak-theme

2

Add the Dependencies

npm

npm install keycloakify @oussemasahbeni/keycloakify-login-shadcn

yarn

yarn add keycloakify @oussemasahbeni/keycloakify-login-shadcn

pnpm

pnpm add keycloakify @oussemasahbeni/keycloakify-login-shadcn

bun

bun add keycloakify @oussemasahbeni/keycloakify-login-shadcn

3

Initialize Keycloakify

npm

npx keycloakify init

yarn

npx keycloakify init

pnpm

pnpm exec keycloakify init

bun

bunx keycloakify init

When prompted:

• Which theme type would you like to initialize? Select (x) login

• Do you want to install the Stories? Select (x) Yes (Recommended)

4

Update the Vite Configuration

Changes that need to be made to your Vite config to enable Tailwind and Shadcn to work.

vite.config.ts

import react from "@vitejs/plugin-react";
import { keycloakify } from "keycloakify/vite-plugin";
import { defineConfig } from "vite";
import path from "node:path";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
    plugins: [
        react(),
        tailwindcss(),
        keycloakify({
            accountThemeImplementation: "none",
            environmentVariables: [
                {
                  name: "SHADCN_THEME_LOGO_WHITE_URL",
                  default: "",
                },
                {
                  name: "SHADCN_THEME_LOGO_DARK_URL",
                  default: "",
                },
                { name: "SHADCN_THEME_APP_NAME", default: "Acme Inc." },
                { name: "SHADCN_THEME_LAYOUT", default: "two-column" },
                { name: "SHADCN_THEME_SIDE_IMAGE_URL", default: "" },
                { name: "SHADCN_THEME_PRESET", default: "neutral" },
                { name: "SHADCN_THEME_BASE", default: "neutral" },
                { name: "SHADCN_THEME_RADIUS", default: "default" },
                { name: "SHADCN_THEME_FONT", default: "geist" },
                { name: "SHADCN_THEME_PLACEHOLDER", default: "true" },
              ],
        })
    ],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src")
        }
    }
});

5

Update TypeScript Paths

This is to make sure that you can import relative to the source with "@/components/..."

tsconfig.json

{
    // ...
    "compilerOptions": {
        // ...
        "paths": {
            "@/*": ["./src/*"]
        }
    }
}

tsconfig.app.json

{
    "compilerOptions": {
        // ...
        "paths": {
            "@/*": ["./src/*"]
        }
    },
    "include": ["src"]
}

6

Initializing Git

Using Git is a requirement. It enables Keycloakify to track the files you have customized vs the files that you're just inheriting from the keycloakify-login-shadcn NPM package.

git init .
git add -A
git commit -m "Initial commit"

7

Know the key commands

npm

# Run Storybook for component development and testing
# IMPORTANT! Must be run at least once.
npm run storybook

# Build the JAR file to import in Keycloak, see https://docs.keycloakify.dev/deploying-your-theme
npm run build-keycloak-theme

# Test in a local Keycloak. More info: https://docs.keycloakify.dev/testing-your-theme/inside-of-keycloak
npx keycloakify start-keycloak

yarn

# Run Storybook for component development and testing
yarn storybook

# Build the JAR file to import in Keycloak, see https://docs.keycloakify.dev/deploying-your-theme
yarn build-keycloak-theme

# Test in a local Keycloak. More info: https://docs.keycloakify.dev/testing-your-theme/inside-of-keycloak
npx keycloakify start-keycloak

pnpm

# Run Storybook for component development and testing
pnpm storybook

# Build the JAR file to import in Keycloak, see https://docs.keycloakify.dev/deploying-your-theme
pnpm build-keycloak-theme

# Test in a local Keycloak. More info: https://docs.keycloakify.dev/testing-your-theme/inside-of-keycloak
pnpm exec keycloakify start-keycloak

bun

# Run Storybook for component development and testing
bun run storybook

# Build the JAR file to import in Keycloak, see https://docs.keycloakify.dev/deploying-your-theme
bun run build-keycloak-theme

# Test in a local Keycloak. More info: https://docs.keycloakify.dev/testing-your-theme/inside-of-keycloak
bunx keycloakify start-keycloak

8

Understanding how to Apply Your Changes

We highly recommend, before you start, to give this video a quick watch. It will tell you the key info you need to know to understand the Keycloakify Framework.

NOTE: In this video, the demo is made with @keycloakify/login-ui, the default base UI that mirrors the Keycloak built-in theme. But here you are using @oussemasahbeni/keycloakify-login-shadcn.

As a consequence, you can skip the part of the talk that addresses CSS level customization. It doesn't really apply here. The important part to understand is how to own the file that you want to modify.

Source Code

Source code of @oussemasahbeni/keycloakify-login-shadcn, the NPM package that powers this theme. Give it a star ⭐️!

GitHub - Oussemasahbeni/keycloakify-shadcn-starterGitHub