Installation

Follow these steps to get your project up and running in minutes.

npm install

yarn install

npm run dev

npm run build

File Structure

Overview of the project structure and key files.

kora-admin/
├── public/              # Static assets (images, fonts, etc.)
├── src/
│   ├── components/      # Reusable UI components
│   │   ├── Layout/      # Main layout components (Sidebar, Header)
│   │   └── ...
│   ├── contexts/        # React Contexts (Theme, Auth, etc.)
│   ├── hooks/           # Custom React Hooks
│   ├── pages/           # Application Pages
│   │   ├── apps/        # Functional App Pages (Chat, Kanban)
│   │   ├── auth/        # Authentication Pages
│   │   └── ...
│   ├── styles/          # Global styles and Tailwind directives
│   ├── App.tsx          # Main Application Component & Routing
│   └── main.tsx         # Entry point
├── index.html           # HTML entry point
├── package.json         # Project dependencies and scripts
├── tailwind.config.cjs  # Tailwind CSS configuration
├── tsconfig.json        # TypeScript configuration
└── vite.config.ts       # Vite configuration

Configuration

Customize the template to fit your brand.

Tailwind Configuration

You can customize colors, fonts, and other design tokens in tailwind.config.cjs.

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eef2ff',
          500: '#6366f1', // Change your primary color here
          600: '#4f46e5',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'], // Change font family
      },
    },
  },
}

Logo & Branding

To change the logo, edit the src/components/Logo.tsx file. You can replace the SVG with your own or use an image tag.

Sidebar Menu

The sidebar menu is defined in src/components/Sidebar.tsx. You can add, remove, or reorder menu items there.

Components

KORA comes with 60+ pre-built components.

Example Usage

Here is how you can use a Button component:

import Button from '../components/Button';

const MyComponent = () => {
  return (
    <Button variant="primary" size="md" onClick={() => alert('Clicked!')}>
      Click Me
    </Button>
  );
};

Theming & Dark Mode

Built-in support for light and dark modes.

How it works

We use a ThemeContext to manage the current theme state. The theme is persisted in localStorage.

To toggle the theme programmatically:

import { useTheme } from '../contexts/ThemeContext';

const MyComponent = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme}>
      Switch to {theme === 'dark' ? 'Light' : 'Dark'} Mode
    </button>
  );
};

Customizing Dark Mode

We use Tailwind's dark: modifier. To style an element for dark mode, simply add the class:

<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">...</div>

Routing

Managing pages and navigation.

We use React Router v6 for client-side routing. All routes are defined in src/App.tsx.

Adding a New Page

import React from 'react';

const NewPage = () => {
  return <div>My New Page</div>;
};

export default NewPage;

import NewPage from './pages/NewPage';

// ... inside Routes
<Route path="/new-page" element={<NewPage />} />

Deployment

Ready to launch? Here is how to deploy.

Building for Production

Run the build command to generate static files:

npm run build

This will create a dist folder containing your compiled application.

Deploying to Vercel

1. Install Vercel CLI: npm i -g vercel
2. Run vercel in the project root.
3. Follow the prompts. Vercel will automatically detect Vite and configure the settings.

Deploying to Netlify

1. Drag and drop the dist folder to Netlify Drop.
2. Or connect your Git repository and set the build command to npm run build and publish directory to dist.

Credits

We used the following open-source libraries to build KORA.

Support

We are here to help!

Changelog

Keep track of updates and improvements.