diff --git a/.gitignore b/.gitignore
index f51a8a8..9672d0a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -119,4 +119,90 @@ gradle-app.setting
 # End of https://www.toptal.com/developers/gitignore/api/intellij+all,gradle
 
 # run-paper
-run/**
\ No newline at end of file
+run/**
+
+# Bun
+bun.lock
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# database
+*.sqlite
+
+# package-json
+bun.lock
+
+# bun deploy file
+node_modules.bun
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
\ No newline at end of file
diff --git a/docs/.gitignore b/docs/.gitignore
new file mode 100644
index 0000000..6dc972e
--- /dev/null
+++ b/docs/.gitignore
@@ -0,0 +1 @@
+.vitepress/cache
\ No newline at end of file
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
new file mode 100644
index 0000000..b589772
--- /dev/null
+++ b/docs/.vitepress/config.mts
@@ -0,0 +1,42 @@
+import {defineConfig} from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+    title: "KikoAPI docs",
+    description: "KikoAPI is a lightweight helper library for our Paper plugins that speeds up development.",
+    vite: {
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    api: "modern-compiler"
+                }
+            }
+        }
+    },
+    srcDir: './pages',
+    appearance: 'force-dark',
+    themeConfig: {
+        search: {
+            provider: 'local'
+        },
+        // https://vitepress.dev/reference/default-theme-config
+        nav: [
+            {text: 'Home', link: '/'},
+            {text: 'Examples', link: '/markdown-examples'}
+        ],
+
+        sidebar: [
+            {
+                text: 'Examples',
+                items: [
+                    {text: 'Markdown Examples', link: '/markdown-examples'},
+                    {text: 'Runtime API Examples', link: '/api-examples'}
+                ]
+            }
+        ],
+
+        socialLinks: [
+            {icon: 'github', link: 'https://github.com/KikoPlugins/KikoAPI'}
+        ]
+    }
+})
diff --git a/docs/.vitepress/theme/components/CachedImage.vue b/docs/.vitepress/theme/components/CachedImage.vue
new file mode 100644
index 0000000..531d362
--- /dev/null
+++ b/docs/.vitepress/theme/components/CachedImage.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+
+const props = defineProps<{
+    src?: string;
+    placeholder?: string;
+    alt?: string;
+}>();
+
+const imgSrc = ref<string>('');
+const isLoading = ref(true);
+const hasError = ref(false);
+
+const CACHE_PREFIX = 'cached_image_';
+const CACHE_EXPIRY = 7 * 24 * 60 * 60 * 1000;
+
+interface CachedImageData {
+    data: string;
+    timestamp: number;
+}
+
+const getCachedImage = (url: string): string | null => {
+    try {
+        const key = CACHE_PREFIX + btoa(url);
+        const cached = localStorage.getItem(key);
+        if (cached) {
+            const data: CachedImageData = JSON.parse(cached);
+            if (Date.now() - data.timestamp < CACHE_EXPIRY) {
+                return data.data;
+            } else {
+                localStorage.removeItem(key);
+            }
+        }
+    } catch (e) {
+        console.warn('Failed to get cached image:', e);
+    }
+    return null;
+};
+
+const setCachedImage = (url: string, dataUrl: string): void => {
+    try {
+        if (dataUrl.length > 5 * 1024 * 1024) { // 5MB limit
+            console.warn('Image is too large to cache:', url);
+            return;
+        }
+        const key = CACHE_PREFIX + btoa(url);
+        const data: CachedImageData = {
+            data: dataUrl,
+            timestamp: Date.now()
+        };
+        localStorage.setItem(key, JSON.stringify(data));
+    } catch (e) {
+        if (e instanceof DOMException && e.name === 'QuotaExceededError') {
+            console.warn('LocalStorage quota exceeded, cannot cache image:', e);
+        } else {
+            console.warn('Failed to retrieve cached image:', e);
+        }
+    }
+};
+
+const loadImage = (url: string): void => {
+    if (!url) {
+        imgSrc.value = props.placeholder || '';
+        isLoading.value = false;
+        return;
+    }
+
+    const cached = getCachedImage(url);
+    if (cached) {
+        imgSrc.value = cached;
+        isLoading.value = false;
+        hasError.value = false;
+        return;
+    }
+
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+
+    img.onload = () => {
+        try {
+            const canvas = document.createElement('canvas');
+            canvas.width = img.naturalWidth;
+            canvas.height = img.naturalHeight;
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                ctx.drawImage(img, 0, 0);
+                const dataUrl = canvas.toDataURL('image/png');
+                setCachedImage(url, dataUrl);
+                imgSrc.value = dataUrl;
+            } else {
+                imgSrc.value = url;
+            }
+        } catch (e) {
+            console.warn('Failed to cache image, using original URL:', e);
+            imgSrc.value = url;
+        }
+        isLoading.value = false;
+        hasError.value = false;
+    };
+
+    img.onerror = () => {
+        hasError.value = true;
+        isLoading.value = false;
+        imgSrc.value = props.placeholder || '';
+    };
+
+    img.src = url;
+};
+
+onMounted(() => {
+    if (props.src) {
+        loadImage(props.src);
+    } else if (props.placeholder) {
+        imgSrc.value = props.placeholder;
+        isLoading.value = false;
+    } else {
+        isLoading.value = false;
+    }
+});
+});
+
+watch(() => props.src, (newSrc) => {
+    if (newSrc) {
+        isLoading.value = true;
+        hasError.value = false;
+        loadImage(newSrc);
+    }
+});
+</script>
+
+<template>
+    <div class="cached-image-wrapper">
+        <img
+            v-if="imgSrc"
+            :src="imgSrc"
+            :alt="alt || ''"
+            :class="{ loading: isLoading, error: hasError }"
+            v-bind="$attrs"
+        />
+        <div v-else-if="isLoading" class="loading-placeholder">
+            <span>Loading...</span>
+        </div>
+        <div v-else-if="hasError" class="error-placeholder">
+            <span>Failed to load image</span>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.cached-image-wrapper {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    transition: opacity 0.3s ease;
+}
+
+img.loading {
+    opacity: 0.5;
+}
+
+img.error {
+    opacity: 0.3;
+}
+
+.loading-placeholder,
+.error-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+    background: rgba(128, 128, 128, 0.1);
+    border-radius: 8px;
+}
+
+.loading-placeholder span {
+    color: var(--vp-c-text-2);
+    font-size: 14px;
+}
+
+.error-placeholder span {
+    color: var(--vp-c-danger);
+    font-size: 14px;
+}
+</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/KikoFeature.vue b/docs/.vitepress/theme/components/KikoFeature.vue
new file mode 100644
index 0000000..102c5bd
--- /dev/null
+++ b/docs/.vitepress/theme/components/KikoFeature.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+export interface Feature {
+    icon?: string
+    title: string
+    details: string
+    link?: string
+}
+
+defineProps<{
+    features?: Feature[]
+}>()
+</script>
+
+<template>
+    <div class="KikoFeature">
+        <div class="container">
+            <div class="items">
+                <div
+                        v-for="(feature, index) in features"
+                        :key="index"
+                        class="item animate-feature"
+                        :style="{ animationDelay: `${1.2 + index * 0.15}s` }"
+                >
+                    <article class="box">
+                        <div v-if="feature.icon" class="icon" v-html="feature.icon"></div>
+                        <h2 class="title" v-html="feature.title"></h2>
+                        <p class="details" v-html="feature.details"></p>
+                        <a v-if="feature.link" :href="feature.link" class="link">
+                            Learn More &gt;
+                        </a>
+                    </article>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(40px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-feature {
+    opacity: 0;
+    animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.KikoFeature {
+    position: relative;
+    padding: 48px 24px;
+}
+
+@media (min-width: 640px) {
+    .KikoFeature {
+        padding: 64px 48px;
+    }
+}
+
+@media (min-width: 960px) {
+    .KikoFeature {
+        padding: 96px 64px;
+    }
+}
+
+.container {
+    margin: 0 auto;
+    max-width: 1152px;
+}
+
+.items {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 16px;
+}
+
+@media (min-width: 640px) {
+    .items {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 24px;
+    }
+}
+
+@media (min-width: 960px) {
+    .items {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 32px;
+    }
+}
+
+.item {
+    transition: transform 0.3s ease;
+}
+
+.item:hover {
+    transform: translateY(-4px);
+}
+
+.box {
+    position: relative;
+    height: 100%;
+    padding: 28px;
+    background-color: var(--vp-c-bg-soft);
+    border: 1px solid var(--vp-c-divider);
+    border-radius: 12px;
+    transition: all 0.3s ease;
+}
+
+.box:hover {
+    border-color: var(--vp-c-brand-1);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
+}
+
+.icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 48px;
+    height: 48px;
+    margin-bottom: 20px;
+    font-size: 24px;
+    background: var(--vp-c-brand-soft);
+    border-radius: 10px;
+    transition: transform 0.3s ease;
+}
+
+.box:hover .icon {
+    transform: scale(1.1) rotate(5deg);
+}
+
+.title {
+    margin: 0 0 12px;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 28px;
+    color: var(--vp-c-text-1);
+}
+
+.details {
+    margin: 0;
+    font-size: 15px;
+    line-height: 1.2;
+    color: var(--vp-c-text-2);
+}
+
+.link {
+    display: inline-block;
+    margin-top: 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--vp-c-brand-1);
+    text-decoration: none;
+    transition: all 0.2s ease;
+}
+
+.link:hover {
+    color: var(--vp-c-brand-2);
+    transform: translateX(4px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .animate-feature {
+        animation: none;
+        opacity: 1;
+    }
+
+    .item:hover {
+        transform: none;
+    }
+
+    .box:hover .icon {
+        transform: scale(1.05);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/KikoHero.vue b/docs/.vitepress/theme/components/KikoHero.vue
new file mode 100644
index 0000000..5fa8e93
--- /dev/null
+++ b/docs/.vitepress/theme/components/KikoHero.vue
@@ -0,0 +1,451 @@
+<script setup lang="ts">
+import type {DefaultTheme} from 'vitepress/theme'
+import {VPButton} from "vitepress/theme";
+import CachedImage from "./CachedImage.vue";
+
+export interface HeroAction {
+    theme?: 'brand' | 'alt'
+    text: string
+    link: string
+    target?: string
+    rel?: string
+}
+
+defineProps<{
+    name?: string
+    text?: string
+    tagline?: string
+    image?: DefaultTheme.ThemeableImage
+    actions?: HeroAction[]
+}>()
+
+</script>
+
+<template>
+    <div class="KikoHero" :class="{ 'has-image': image }">
+        <div class="container">
+            <div class="main">
+                <slot name="home-hero-info-before"/>
+                <slot name="home-hero-info">
+                    <h1 class="heading">
+                        <span v-if="name" v-html="name" class="name clip animate-name"></span>
+                        <span v-if="text" v-html="text" class="text animate-text"></span>
+                    </h1>
+                    <p v-if="tagline" v-html="tagline" class="tagline animate-tagline"></p>
+                </slot>
+                <slot name="home-hero-info-after"/>
+
+                <div v-if="actions" class="actions animate-actions">
+                    <div v-for="(action, index) in actions" :key="action.link" class="action"
+                         :style="{ animationDelay: `${0.8 + index * 0.1}s` }">
+                        <VPButton
+                                tag="a"
+                                size="medium"
+                                :theme="action.theme"
+                                :text="action.text"
+                                :href="action.link"
+                                :target="action.target"
+                                :rel="action.rel"
+                        />
+                    </div>
+                </div>
+                <slot name="home-hero-actions-after"/>
+            </div>
+
+            <div v-if="image" class="image">
+                <div class="image-container">
+                    <div class="image-bg animate-image-bg"/>
+                    <slot name="home-hero-image">
+                        <CachedImage
+                            v-if="image"
+                            class="image-src animate-image"
+                            :src="typeof image === 'string' ? image : image.src"
+                            :alt="typeof image === 'string' ? 'Hero Image' : (image.alt || 'Hero Image')"
+                        />
+                    </slot>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+/* Animations */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeInScale {
+    from {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes fadeInRotate {
+    from {
+        opacity: 0;
+        transform: rotate(-10deg) scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: rotate(0deg) scale(1);
+    }
+}
+
+@keyframes pulseGlow {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(0.8);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+.animate-name {
+    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
+}
+
+.animate-text {
+    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
+}
+
+.animate-tagline {
+    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s backwards;
+}
+
+.animate-actions {
+    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s backwards;
+}
+
+.action {
+    flex-shrink: 0;
+    padding: 6px;
+    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+}
+
+.animate-image {
+    animation: fadeInRotate 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s backwards;
+}
+
+.animate-image-bg {
+    animation: pulseGlow 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
+}
+
+.KikoHero {
+    margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
+}
+
+@media (min-width: 640px) {
+    .KikoHero {
+        padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
+    }
+}
+
+@media (min-width: 960px) {
+    .KikoHero {
+        padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
+    }
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    max-width: 1152px;
+}
+
+@media (min-width: 960px) {
+    .container {
+        flex-direction: row;
+    }
+}
+
+.main {
+    position: relative;
+    z-index: 10;
+    order: 2;
+    flex-grow: 1;
+    flex-shrink: 0;
+}
+
+.KikoHero.has-image .container {
+    text-align: center;
+}
+
+@media (min-width: 960px) {
+    .KikoHero.has-image .container {
+        text-align: left;
+    }
+}
+
+@media (min-width: 960px) {
+    .main {
+        order: 1;
+        width: calc((100% / 3) * 2);
+    }
+
+    .KikoHero.has-image .main {
+        max-width: 592px;
+    }
+}
+
+.heading {
+    display: flex;
+    flex-direction: column;
+}
+
+.name,
+.text {
+    width: fit-content;
+    max-width: 392px;
+    letter-spacing: -0.4px;
+    line-height: 40px;
+    font-size: 32px;
+    font-weight: 700;
+    white-space: pre-wrap;
+}
+
+.KikoHero.has-image .name,
+.KikoHero.has-image .text {
+    margin: 0 auto;
+}
+
+.name {
+    color: var(--vp-home-hero-name-color);
+}
+
+.clip {
+    background: var(--vp-home-hero-name-background);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: var(--vp-home-hero-name-color);
+}
+
+@media (min-width: 640px) {
+    .name,
+    .text {
+        max-width: 576px;
+        line-height: 56px;
+        font-size: 48px;
+    }
+}
+
+@media (min-width: 960px) {
+    .name,
+    .text {
+        line-height: 64px;
+        font-size: 56px;
+    }
+
+    .KikoHero.has-image .name,
+    .KikoHero.has-image .text {
+        margin: 0;
+    }
+}
+
+.tagline {
+    padding-top: 8px;
+    max-width: 392px;
+    line-height: 28px;
+    font-size: 18px;
+    font-weight: 500;
+    white-space: pre-wrap;
+    color: var(--vp-c-text-2);
+}
+
+.KikoHero.has-image .tagline {
+    margin: 0 auto;
+}
+
+@media (min-width: 640px) {
+    .tagline {
+        padding-top: 12px;
+        max-width: 576px;
+        line-height: 32px;
+        font-size: 20px;
+    }
+}
+
+@media (min-width: 960px) {
+    .tagline {
+        line-height: 36px;
+        font-size: 24px;
+    }
+
+    .KikoHero.has-image .tagline {
+        margin: 0;
+    }
+}
+
+.actions {
+    display: flex;
+    flex-wrap: wrap;
+    margin: -6px;
+    padding-top: 24px;
+}
+
+.KikoHero.has-image .actions {
+    justify-content: center;
+}
+
+@media (min-width: 640px) {
+    .actions {
+        padding-top: 32px;
+    }
+}
+
+@media (min-width: 960px) {
+    .KikoHero.has-image .actions {
+        justify-content: flex-start;
+    }
+}
+
+.action {
+    flex-shrink: 0;
+    padding: 6px;
+}
+
+.image {
+    order: 1;
+    margin: -76px -24px -48px;
+}
+
+@media (min-width: 640px) {
+    .image {
+        margin: -108px -24px -48px;
+    }
+}
+
+@media (min-width: 960px) {
+    .image {
+        flex-grow: 1;
+        order: 2;
+        margin: 0;
+        min-height: 100%;
+    }
+}
+
+.KikoHero .image-container {
+    opacity: 0;
+    animation: fadeIn 0.8s ease-out forwards;
+    animation-delay: 0.3s;
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+:deep(.image-src) {
+    transform: translate(-50%, -60%);
+    animation: slideIn 0.8s ease-out forwards;
+    animation-delay: 0.3s;
+}
+
+@keyframes slideIn {
+    0% {
+        transform: translate(-50%, -40%);
+        opacity: 0;
+    }
+    100% {
+        transform: translate(-50%, -50%);
+        opacity: 1;
+    }
+}
+
+@media (min-width: 640px) {
+    .image-container {
+        width: 392px;
+        height: 392px;
+    }
+}
+
+@media (min-width: 960px) {
+    .image-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        /*rtl:ignore*/
+        transform: translate(-32px, -32px);
+    }
+}
+
+.image-bg {
+    position: absolute;
+    top: 50%;
+    /*rtl:ignore*/
+    left: 50%;
+    border-radius: 50%;
+    width: 192px;
+    height: 192px;
+    background-image: var(--vp-home-hero-image-background-image);
+    filter: var(--vp-home-hero-image-filter);
+    /*rtl:ignore*/
+    transform: translate(-50%, -50%);
+}
+
+@media (min-width: 640px) {
+    .image-bg {
+        width: 256px;
+        height: 256px;
+    }
+}
+
+@media (min-width: 960px) {
+    .image-bg {
+        width: 320px;
+        height: 320px;
+    }
+}
+
+:deep(.image-src) {
+    position: absolute;
+    top: 50%;
+    /*rtl:ignore*/
+    left: 50%;
+    max-width: 192px;
+    max-height: 192px;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    /*rtl:ignore*/
+    transform: translate(-50%, -50%);
+    animation: slideIn 0.8s ease-out forwards;
+    animation-delay: 0.3s;
+}
+
+@media (min-width: 640px) {
+    :deep(.image-src) {
+        max-width: 256px;
+        max-height: 256px;
+    }
+}
+
+@media (min-width: 960px) {
+    :deep(.image-src) {
+        max-width: 320px;
+        max-height: 320px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
new file mode 100644
index 0000000..79429dc
--- /dev/null
+++ b/docs/.vitepress/theme/index.ts
@@ -0,0 +1,13 @@
+import {Theme} from 'vitepress';
+import DefaultTheme from "vitepress/theme";
+import './style/index.css';
+import CachedImage from './components/CachedImage.vue';
+
+export default {
+    extends: DefaultTheme,
+    enhanceApp({ app }) {
+        // Register global components
+        app.component('CachedImage', CachedImage);
+    }
+} satisfies Theme;
+
diff --git a/docs/.vitepress/theme/style/blocks.css b/docs/.vitepress/theme/style/blocks.css
new file mode 100644
index 0000000..90c4257
--- /dev/null
+++ b/docs/.vitepress/theme/style/blocks.css
@@ -0,0 +1,92 @@
+.VPDoc .custom-block {
+    margin: 28px 0;
+    padding: 20px 24px 12px 42px;
+    border-radius: 8px;
+    overflow-x: auto;
+    transition:
+            color 0.5s,
+            background-color 0.5s;
+    position: relative;
+    font-size: 14px;
+    line-height: 1.6;
+    font-weight: 500;
+    color: var(--vp-c-text-2);
+    background-color: var(--vp-c-bg-soft);
+
+    &:before {
+        content: "ℹ️";
+        position: absolute;
+        font-weight: 600;
+        font-size: 15px;
+        top: 20px;
+        left: 16px;
+    }
+
+    .custom-block-title {
+        margin-bottom: 8px;
+        font-size: 15px;
+        font-weight: 500;
+        color: var(--vp-c-text-1);
+        transition: color 0.5s;
+    }
+
+    &.warning {
+        border: 1px solid var(--vp-c-yellow-2);
+        code,
+        a {
+            color: var(--vp-c-yellow-2);
+        }
+        &:before {
+            color: var(--vp-c-yellow-2);
+            content: "⚠️";
+            font-size: 16px;
+            top: 19px;
+            left: 16px;
+        }
+    }
+
+    &.info {
+        border: 1px solid var(--vp-c-info-2);
+        code,
+        a {
+            color: var(--vp-c-info-1);
+        }
+        &:before {
+            color: var(--vp-c-info-2);
+        }
+    }
+
+    &.danger {
+        border: 1px solid var(--vp-c-red-2);
+        &:before {
+            color: var(--vp-c-red-2);
+            content: "⛔";
+        }
+    }
+
+    &.tip {
+        border: 1px solid var(--vp-c-green-2);
+        code,
+        a {
+            color: var(--vp-c-green-1);
+        }
+        &:before {
+            color: var(--vp-c-green-2);
+            content: "💡";
+        }
+    }
+
+    ul li:before {
+        top: 0.55rem;
+    }
+
+    ol li:before {
+        top: 1px;
+        font-size: 13px;
+    }
+
+    :not(pre) > code {
+        font-size: 13px;
+        background-color: rgba(0, 0, 0, 0.2);
+    }
+}
\ No newline at end of file
diff --git a/docs/.vitepress/theme/style/colors.css b/docs/.vitepress/theme/style/colors.css
new file mode 100644
index 0000000..2f3b97f
--- /dev/null
+++ b/docs/.vitepress/theme/style/colors.css
@@ -0,0 +1,26 @@
+:root {
+    --vp-c-bg: #16161a;
+    --vp-c-bg-alt: #101013;
+    --vp-c-bg-elv: #202127;
+    --vp-c-bg-soft: #1d1d23;
+
+    --vp-c-brand-1: #FC67FA;
+    --vp-c-brand-2: #FC67FA;
+    --vp-c-brand-3: #FC67FA;
+    --vp-c-brand-soft: rgba(252, 103, 250, 0.27);
+
+    --vp-c-tip-1: var(--vp-c-brand-1);
+    --vp-c-tip-2: var(--vp-c-brand-2);
+    --vp-c-tip-3: var(--vp-c-brand-3);
+    --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+    --vp-c-warning-1: #f5d86f;
+    --vp-c-warning-2: #eac048;
+    --vp-c-warning-3: #d4a92a;
+    --vp-c-warning-soft: #d4a92a44;
+
+    --vp-c-danger-1: #e066f0;
+    --vp-c-danger-2: #c050d4;
+    --vp-c-danger-3: #a038b8;
+    --vp-c-danger-soft: rgba(190, 49, 112, 0.27);
+}
diff --git a/docs/.vitepress/theme/style/index.css b/docs/.vitepress/theme/style/index.css
new file mode 100644
index 0000000..ecde99e
--- /dev/null
+++ b/docs/.vitepress/theme/style/index.css
@@ -0,0 +1,3 @@
+@import "./colors.css";
+@import './style.scss';
+@import "./navbar.css";
\ No newline at end of file
diff --git a/docs/.vitepress/theme/style/navbar.css b/docs/.vitepress/theme/style/navbar.css
new file mode 100644
index 0000000..0628991
--- /dev/null
+++ b/docs/.vitepress/theme/style/navbar.css
@@ -0,0 +1,60 @@
+:root {
+    --vp-nav-bg-color: rgba(22, 22, 26, 0.7);
+    --vp-nav-border-color: rgba(255, 255, 255, 0.08);
+}
+
+.VPNav {
+    background-color: var(--vp-nav-bg-color) !important;
+    backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--vp-nav-border-color);
+    transition: background-color 0.5s, border-color 0.5s;
+}
+
+.VPNavBar,
+.VPLocalNav,
+.VPNavBar:not(.home.top) .content-body {
+    background-color: transparent !important;
+    backdrop-filter: none !important;
+    border-bottom: none !important;
+}
+
+.VPNavBarSearchButton {
+    border-radius: 8px !important;
+    background-color: rgba(255, 255, 255, 0.05) !important;
+    border: 1px solid var(--vp-nav-border-color) !important;
+    transition: all 0.2s ease;
+}
+
+.VPNavBarSearchButton:hover {
+    background-color: rgba(255, 255, 255, 0.1) !important;
+    border-color: var(--vp-c-brand-1) !important;
+}
+
+.VPNavBarMenuLink {
+    font-weight: 500;
+    font-size: 14px;
+    color: var(--vp-c-text-2);
+    transition: color 0.25s;
+}
+
+.VPNavBarMenuLink:hover {
+    color: var(--vp-c-brand-1) !important;
+}
+
+.VPNav .divider-line {
+    background-color: var(--vp-nav-border-color) !important;
+    width: 1px !important;
+}
+
+.curtain {
+    background-color: rgba(0, 0, 0, 0.4) !important;
+    backdrop-filter: blur(4px);
+}
+
+@media (max-width: 959px) {
+    .VPLocalNav {
+        background-color: var(--vp-nav-bg-color) !important;
+        backdrop-filter: blur(20px);
+        border-bottom: 1px solid var(--vp-nav-border-color);
+    }
+}
\ No newline at end of file
diff --git a/docs/.vitepress/theme/style/style.scss b/docs/.vitepress/theme/style/style.scss
new file mode 100644
index 0000000..f119072
--- /dev/null
+++ b/docs/.vitepress/theme/style/style.scss
@@ -0,0 +1,75 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attached to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+:root {
+    --vp-home-hero-name-color: transparent;
+    --vp-home-hero-name-background: linear-gradient(30deg, rgba(252, 103, 250) 10%, rgba(244, 196, 243));
+
+    --vp-home-hero-image-background-image: linear-gradient(-45deg, rgba(252, 103, 250, 0.5) 50%, rgba(225, 117, 223, 0.5) 50%);
+    --vp-home-hero-image-filter: blur(50px);
+
+    --vp-custom-block-tip-border: transparent;
+    --vp-custom-block-tip-text: var(--vp-c-text-1);
+    --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+    --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+    --vp-border-radius: 0.5rem;
+    --vp-anim-dur: 150ms;
+}
+
+.brand-button {
+    outline: var(--vp-c-brand-2) 2px solid;
+    box-sizing: border-box !important;
+    background: var(--vp-c-brand-soft);
+    transition: 160ms ease-in-out all !important;
+
+    &:hover {
+        outline-offset: 2px;
+        background: var(--vp-c-brand-3);
+    }
+
+    &:active {
+        background: var(--vp-c-brand-1);
+    }
+}
\ No newline at end of file
diff --git a/docs/pages/api-examples.md b/docs/pages/api-examples.md
new file mode 100644
index 0000000..6bd8bb5
--- /dev/null
+++ b/docs/pages/api-examples.md
@@ -0,0 +1,49 @@
+---
+outline: deep
+---
+
+# Runtime API Examples
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+<script setup>
+import { useData } from 'vitepress'
+
+const { theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+```
+
+<script setup>
+import { useData } from 'vitepress'
+
+const { site, theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
diff --git a/docs/pages/index.md b/docs/pages/index.md
new file mode 100644
index 0000000..43eb348
--- /dev/null
+++ b/docs/pages/index.md
@@ -0,0 +1,35 @@
+---
+layout: page
+navbar: true
+sidebar: false
+aside: false
+outline: false
+---
+
+<script setup>
+import KikoHero from '../.vitepress/theme/components/KikoHero.vue';
+import KikoFeature from '../.vitepress/theme/components/KikoFeature.vue';
+
+const features = [
+    { title: "Feature A", details: "Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" },
+    { title: "Feature B", details: "Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" },
+    { title: "Feature C", details: "Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" }
+]
+</script>
+
+<KikoHero
+name="KikoAPI docs"
+text="A lightweight library for our plugins."
+tagline="My great project tagline"
+:image="{
+src: 'https://raw.githubusercontent.com/KikoPlugins/.github/master/assets/logos/kikologo_transparent.png',
+alt: 'KikoAPI Logo'
+}"
+:actions="[
+{ theme: 'brand-button', text: 'Download', link: 'https://modrinth.com/plugins/kikoapi' },
+{ theme: 'brand-button', text: 'Docs', link: '/markdown-examples' },
+{ theme: 'alt', text: 'Test', link: '/api-examples' }
+]"
+/>
+
+<KikoFeature :features="features" />
\ No newline at end of file
diff --git a/docs/pages/markdown-examples.md b/docs/pages/markdown-examples.md
new file mode 100644
index 0000000..f9258a5
--- /dev/null
+++ b/docs/pages/markdown-examples.md
@@ -0,0 +1,85 @@
+# Markdown Extension Examples
+
+This page demonstrates some of the built-in markdown extensions provided by VitePress.
+
+## Syntax Highlighting
+
+VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
+
+**Input**
+
+````md
+```js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+````
+
+**Output**
+
+```js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+
+## Custom Containers
+
+**Input**
+
+```md
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+```
+
+**Output**
+
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+
+## More
+
+Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..0c8c9a6
--- /dev/null
+++ b/package.json
@@ -0,0 +1,14 @@
+{
+  "dependencies": {
+    "@theojs/lumen": "^6.4.5"
+  },
+  "devDependencies": {
+    "sass": "^1.97.3",
+    "vitepress": "^2.0.0-alpha.16"
+  },
+  "scripts": {
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  }
+}
\ No newline at end of file