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

pnpm

bun

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

pnpm

bun

3

Initialize Keycloakify

npm

npx keycloakify init

yarn

pnpm

bun

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"
        })
    ],
    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.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
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

pnpm

bun

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