FivUI
DocsFeaturedTheme

Featured Themes

Beautiful themes crafted by FivUI Team.

All themes inspired by the beautiful cities of Pakistan 🇵🇰

August 2025

S
M
T
W
T
F
S

Area Chart

Showing total visitors for the last 6 months

Bar Chart

Desktop vs Mobile usage comparison

Islamabad

A cool cyan blue theme representing the modern capital

@layer base {
    :root {
        --background: oklch(1 0 0);
        --foreground: oklch(0.000 0.100 0.0);
        --card: oklch(1 0 0);
        --card-foreground: oklch(0.145 0 0);
        --popover: oklch(1 0 0);
        --popover-foreground: oklch(0.145 0 0);
        --primary: oklch(0.697 0.139 197.1);
        --primary-foreground: oklch(0.000 0.100 0.0);
        --secondary: oklch(0.550 0.120 240.0);
        --secondary-foreground: oklch(1.000 0.000 0.0);
        --muted: oklch(0.97 0 0);
        --muted-foreground: oklch(0.556 0 0);
        --accent: oklch(0.97 0 0);
        --accent-foreground: oklch(0.205 0 0);
        --destructive: oklch(0.656 0.191 22.2);
        --destructive-foreground: oklch(0.985 0 0);
        --border: oklch(0.922 0 0);
        --input: oklch(0.942 0.005 0.0);
        --ring: oklch(0.708 0 0);
        --chart-1: oklch(0.697 0.139 197.1);
    }

    .dark {
        --background: oklch(0.145 0 0);
        --foreground: oklch(0.985 0 0);
        --card: oklch(0.205 0 0);
        --card-foreground: oklch(0.985 0 0);
        --popover: oklch(0.269 0 0);
        --popover-foreground: oklch(0.985 0 0);
        --primary: oklch(0.820 0.139 197.1);
        --primary-foreground: oklch(0.205 0 0);
        --secondary: oklch(0.720 0.120 240.0);
        --secondary-foreground: oklch(0.985 0 0);
        --muted: oklch(0.269 0 0);
        --muted-foreground: oklch(0.708 0 0);
        --accent: oklch(0.371 0 0);
        --accent-foreground: oklch(0.985 0 0);
        --destructive: oklch(0.510 0.191 22.2);
        --destructive-foreground: oklch(0.985 0 0);
        --border: oklch(0.312 0.000 0.0);
        --input: oklch(0.275 0.005 0.0);
        --ring: oklch(0.820 0.139 197.1);
        --chart-1: oklch(0.697 0.139 197.1);
        --chart-2: oklch(0.550 0.120 240.0);
    }
}

August 2025

S
M
T
W
T
F
S

Area Chart

Showing total visitors for the last 6 months

Bar Chart

Desktop vs Mobile usage comparison

Lahore

A vibrant green theme inspired by the gardens of Lahore

@layer base {
    :root {
        --background: oklch(1 0 0);
        --foreground: oklch(0.000 0.100 0.0);
        --card: oklch(1 0 0);
        --card-foreground: oklch(0.145 0 0);
        --popover: oklch(1 0 0);
        --popover-foreground: oklch(0.145 0 0);
        --primary: oklch(0.745 0.222 119.3);
        --primary-foreground: oklch(0.000 0.100 0.0);
        --secondary: oklch(0.438 0.164 305.0);
        --secondary-foreground: oklch(1.000 0.000 0.0);
        --muted: oklch(0.97 0 0);
        --muted-foreground: oklch(0.556 0 0);
        --accent: oklch(0.97 0 0);
        --accent-foreground: oklch(0.205 0 0);
        --destructive: oklch(0.656 0.191 22.2);
        --destructive-foreground: oklch(0.985 0 0);
        --border: oklch(0.922 0 0);
        --input: oklch(0.942 0.005 0.0);
        --ring: oklch(0.708 0 0);
        --chart-1: oklch(0.745 0.222 119.3);
        --chart-2: oklch(0.438 0.164 305.0);
    }

    .dark {
        --background: oklch(0.145 0 0);
        --foreground: oklch(0.985 0 0);
        --card: oklch(0.205 0 0);
        --card-foreground: oklch(0.985 0 0);
        --popover: oklch(0.269 0 0);
        --popover-foreground: oklch(0.985 0 0);
        --primary: oklch(0.942 0.222 119.3);
        --primary-foreground: oklch(0.205 0 0);
        --secondary: oklch(0.746 0.164 305.0);
        --secondary-foreground: oklch(0.985 0 0);
        --muted: oklch(0.269 0 0);
        --muted-foreground: oklch(0.708 0 0);
        --accent: oklch(0.371 0 0);
        --accent-foreground: oklch(0.985 0 0);
        --destructive: oklch(0.510 0.191 22.2);
        --destructive-foreground: oklch(0.985 0 0);
        --border: oklch(0.312 0.000 0.0);
        --input: oklch(0.275 0.005 0.0);
        --ring: oklch(0.942 0.222 119.3);
        --chart-1: oklch(0.745 0.222 119.3);
        --chart-2: oklch(0.746 0.164 305.0);
    }
}

August 2025

S
M
T
W
T
F
S

Area Chart

Showing total visitors for the last 6 months

Bar Chart

Desktop vs Mobile usage comparison

Karachi

A vibrant purple theme inspired by the dynamic port city

@layer base {
    :root {
        --background: oklch(1 0 0);
        --foreground: oklch(0.000 0.100 0.0);
        --card: oklch(1 0 0);
        --card-foreground: oklch(0.145 0 0);
        --popover: oklch(1 0 0);
        --popover-foreground: oklch(0.145 0 0);
        --primary: oklch(0.672 0.191 308.0);
        --primary-foreground: oklch(1.000 0.000 0.0);
        --secondary: oklch(0.742 0.155 265.0);
        --secondary-foreground: oklch(0.000 0.100 0.0);
        --muted: oklch(0.97 0 0);
        --muted-foreground: oklch(0.556 0 0);
        --accent: oklch(0.97 0 0);
        --accent-foreground: oklch(0.205 0 0);
        --destructive: oklch(0.656 0.191 22.2);
        --destructive-foreground: oklch(0.985 0 0);
        --border: oklch(0.922 0 0);
        --input: oklch(0.942 0.005 0.0);
        --ring: oklch(0.708 0 0);
        --chart-1: oklch(0.672 0.191 308.0);
        --chart-2: oklch(0.742 0.155 265.0);
    }

    .dark {
        --background: oklch(0.145 0 0);
        --foreground: oklch(0.985 0 0);
        --card: oklch(0.205 0 0);
        --card-foreground: oklch(0.985 0 0);
        --popover: oklch(0.269 0 0);
        --popover-foreground: oklch(0.985 0 0);
        --primary: oklch(0.820 0.191 308.0);
        --primary-foreground: oklch(0.205 0 0);
        --secondary: oklch(0.850 0.155 265.0);
        --secondary-foreground: oklch(0.205 0 0);
        --muted: oklch(0.269 0 0);
        --muted-foreground: oklch(0.708 0 0);
        --accent: oklch(0.371 0 0);
        --accent-foreground: oklch(0.985 0 0);
        --destructive: oklch(0.510 0.191 22.2);
        --destructive-foreground: oklch(0.985 0 0);
        --border: oklch(0.312 0.000 0.0);
        --input: oklch(0.275 0.005 0.0);
        --ring: oklch(0.820 0.191 308.0);
        --chart-1: oklch(0.672 0.191 308.0);
        --chart-2: oklch(0.742 0.155 265.0);
    }
}

August 2025

S
M
T
W
T
F
S

Area Chart

Showing total visitors for the last 6 months

Bar Chart

Desktop vs Mobile usage comparison

Quetta

A deep burgundy theme inspired by Quetta's famous pomegranates and highland orchards

@layer base {
    :root {
        --background: oklch(1 0 0);
        --foreground: oklch(0.000 0.100 0.0);
        --card: oklch(1 0 0);
        --card-foreground: oklch(0.145 0 0);
        --popover: oklch(1 0 0);
        --popover-foreground: oklch(0.145 0 0);
        --primary: oklch(0.542 0.178 15.8);
        --primary-foreground: oklch(1.000 0.000 0.0);
        --secondary: oklch(0.398 0.089 342.5);
        --secondary-foreground: oklch(1.000 0.000 0.0);
        --muted: oklch(0.97 0 0);
        --muted-foreground: oklch(0.556 0 0);
        --accent: oklch(0.97 0 0);
        --accent-foreground: oklch(0.205 0 0);
        --destructive: oklch(0.656 0.191 22.2);
        --destructive-foreground: oklch(0.985 0 0);
        --border: oklch(0.922 0 0);
        --input: oklch(0.942 0.005 0.0);
        --ring: oklch(0.708 0 0);
        --chart-1: oklch(0.542 0.178 15.8);
        --chart-2: oklch(0.398 0.089 342.5);
    }

    .dark {
        --background: oklch(0.145 0 0);
        --foreground: oklch(0.985 0 0);
        --card: oklch(0.205 0 0);
        --card-foreground: oklch(0.985 0 0);
        --popover: oklch(0.269 0 0);
        --popover-foreground: oklch(0.985 0 0);
        --primary: oklch(0.692 0.178 15.8);
        --primary-foreground: oklch(1.000 0.000 0.0);
        --secondary: oklch(0.548 0.089 342.5);
        --secondary-foreground: oklch(1.000 0.000 0.0);
        --muted: oklch(0.269 0 0);
        --muted-foreground: oklch(0.708 0 0);
        --accent: oklch(0.371 0 0);
        --accent-foreground: oklch(0.985 0 0);
        --destructive: oklch(0.510 0.191 22.2);
        --destructive-foreground: oklch(0.985 0 0);
        --border: oklch(0.312 0.000 0.0);
        --input: oklch(0.275 0.005 0.0);
        --ring: oklch(0.692 0.178 15.8);
        --chart-1: oklch(0.542 0.178 15.8);
        --chart-2: oklch(0.398 0.089 342.5);
    }
}

August 2025

S
M
T
W
T
F
S

Area Chart

Showing total visitors for the last 6 months

Bar Chart

Desktop vs Mobile usage comparison

Peshawar

An earthy terracotta theme inspired by the historic architecture and cultural heritage of Peshawar

@layer base {
    :root {
        --background: oklch(1 0 0);
        --foreground: oklch(0.000 0.100 0.0);
        --card: oklch(1 0 0);
        --card-foreground: oklch(0.145 0 0);
        --popover: oklch(1 0 0);
        --popover-foreground: oklch(0.145 0 0);
        --primary: oklch(0.678 0.158 35.2);
        --primary-foreground: oklch(1.000 0.000 0.0);
        --secondary: oklch(0.589 0.089 68.5);
        --secondary-foreground: oklch(0.000 0.100 0.0);
        --muted: oklch(0.97 0 0);
        --muted-foreground: oklch(0.556 0 0);
        --accent: oklch(0.97 0 0);
        --accent-foreground: oklch(0.205 0 0);
        --destructive: oklch(0.656 0.191 22.2);
        --destructive-foreground: oklch(0.985 0 0);
        --border: oklch(0.922 0 0);
        --input: oklch(0.942 0.005 0.0);
        --ring: oklch(0.708 0 0);
        --chart-1: oklch(0.678 0.158 35.2);
        --chart-2: oklch(0.589 0.089 68.5);
    }

    .dark {
        --background: oklch(0.145 0 0);
        --foreground: oklch(0.985 0 0);
        --card: oklch(0.205 0 0);
        --card-foreground: oklch(0.985 0 0);
        --popover: oklch(0.269 0 0);
        --popover-foreground: oklch(0.985 0 0);
        --primary: oklch(0.798 0.158 35.2);
        --primary-foreground: oklch(0.205 0 0);
        --secondary: oklch(0.729 0.089 68.5);
        --secondary-foreground: oklch(0.205 0 0);
        --muted: oklch(0.269 0 0);
        --muted-foreground: oklch(0.708 0 0);
        --accent: oklch(0.371 0 0);
        --accent-foreground: oklch(0.985 0 0);
        --destructive: oklch(0.510 0.191 22.2);
        --destructive-foreground: oklch(0.985 0 0);
        --border: oklch(0.312 0.000 0.0);
        --input: oklch(0.275 0.005 0.0);
        --ring: oklch(0.798 0.158 35.2);
        --chart-1: oklch(0.678 0.158 35.2);
        --chart-2: oklch(0.589 0.089 68.5);
    }
}