Introduction

Lokio is a comprehensive web framework offering modern tools and components for building beautiful and accessible applications with Next.js, React, and TypeScript.

What is Lokio?##

Lokio is a modern web framework built on Next.js, React, and Tailwind CSS to ship beautiful and accessible applications with production-ready components. Works seamlessly with Next.js App Router and supports both Server and Client Components.

If you're building a Next.js project with TypeScript, Lokio is a great default choice. It provides high-level, ready-to-use components (data tables, forms, overlays, navigation) while still allowing advanced customization when needed.

Key Features##

Developer Experience First##

Intuitive APIs, excellent TypeScript support, auto-completion, and comprehensive documentation.

Beautiful by Default##

A modern, clean design out of the box with a theme you can adapt in minutes.

Accessible by Default##

WAI-ARIA compliant with keyboard navigation, focus management, and screen reader support.

Production Ready##

Battle-tested components including data tables, forms, overlays, and navigation used by thousands of developers.

Core Technologies##

Next.js##

Built on Next.js 16 with App Router for optimal performance and developer experience.

React##

Leverages React 19 with Server Components and modern React patterns.

Tailwind CSS##

Uses Tailwind CSS for styling with a comprehensive design system.

TypeScript##

Full TypeScript support with excellent type inference and auto-completion.

Getting Started##

To get started with Lokio, follow these simple steps:

1. Install dependencies

bun add lokio

1. Configure your project

// next.config.ts
import { withLokio } from 'lokio/next'
 
export default withLokio({
  // Your Next.js config
})

1. Start building

import { Button } from 'lokio/components'
 
export default function Page() {
  return <Button>Hello Lokio!</Button>
}

Math Equations##

Lokio supports math equations using KaTeX:

Inline math examples:

• Einstein's mass-energy equivalence: $E = mc^2$
• Pythagorean theorem: $a^2 + b^2 = c^2$
• Simple equation: $x + y = z$

For complex equations, you can use code blocks with LaTeX syntax that will be processed by KaTeX.

Code Highlighting##

Syntax highlighting is supported out of the box:

function greet(name: string): string {
  return `Hello, ${name}!`;
}
 
const message = greet("Lokio");
console.log(message);

Tables##

Next Steps##

• Installation Guide - Learn how to install Lokio
• Getting Started - Build your first app
• Components - Browse available components
• Theme - Customize your design system