A modern, responsive account management interface built for Keycloak, featuring a clean design with mock data for development and testing. Built with React, TypeScript, Tailwind CSS, and shadcn/ui components.

• Personal Information Management - Update profile details, avatar, and basic account information
• Security Settings - Manage passwords, two-factor authentication, and security preferences
• Linked Accounts - Connect and manage third-party account integrations
• Device Activity - Monitor and manage active sessions across devices
• Applications - View and manage authorized applications
• Groups & Organizations - Manage group memberships and organizational affiliations
• Theme Support - Light and dark mode with system preference detection
• Responsive Design - Optimized for desktop and mobile devices
• Mock Data Integration - Pre-populated with sample data for development

• Framework: React 19 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS 4.x
• UI Components: shadcn/ui (Radix UI primitives)
• Routing: React Router DOM
• Icons: Lucide React
• Form Handling: React Hook Form
• State Management: React hooks with local state
• Development: ESLint, TypeScript ESLint

1. Clone the repository

   git clone <repository-url>
   cd keycloak-account-ui

2. Install dependencies

   pnpm install

3. Start development server

   pnpm run dev

4. Build for production

   pnpm run build

5. Preview production build

   pnpm run preview

src/
├── components/          # Reusable UI components
│   ├── ui/             # shadcn/ui components
│   ├── layout.tsx      # Main layout wrapper
│   ├── sidebar.tsx     # Navigation sidebar
│   ├── theme-provider.tsx
│   └── theme-toggle.tsx
├── pages/              # Page components
│   ├── personal-info/
│   ├── security/
│   ├── linked-accounts/
│   ├── device-activity/
│   ├── applications/
│   ├── groups/
│   └── organizations/
├── hooks/              # Custom React hooks
├── lib/                # Utilities and mock data
│   ├── mock-data.ts    # Sample user/org data
│   └── utils.ts        # Helper functions
├── types/              # TypeScript type definitions
└── App.tsx            # Main application component

This project uses shadcn/ui components built on Radix UI primitives, providing:

• Accessible form controls
• Modal dialogs and overlays
• Navigation components
• Data display components
• Layout primitives
• Theme-aware styling

The application supports multiple themes:

• Light Mode: Clean, bright interface
• Dark Mode: Easy on the eyes for extended use
• System: Automatically matches your OS preference

Toggle themes using the theme switcher in the top navigation.

The application includes comprehensive mock data for development:

• Users: Sample user profiles with different roles
• Organizations: Mock company/organization data
• Groups: User group memberships and permissions
• Settings: Theme and notification preferences

Mock data is located in src/lib/mock-data.ts and can be easily replaced with real API integration.

• pnpm run dev - Start development server with hot reload
• pnpm run build - Build for production
• pnpm run preview - Preview production build locally
• pnpm run lint - Run ESLint for code quality checks

The project uses ESLint with TypeScript support for maintaining code quality. Run linting with:

pnpm run lint

This UI is designed to work with Keycloak's account management APIs. The mock data structure aligns with typical Keycloak data models:

• User profiles and attributes
• Group memberships
• Organization/tenant management
• Session management
• Application/client authorizations

The interface is fully responsive and optimized for:

• Desktop: Full-featured layout with sidebar navigation
• Tablet: Collapsible navigation with touch-friendly controls
• Mobile: Mobile-first design with drawer navigation

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

This project is licensed under the MIT License. See LICENSE file for details.