Pengenalan

Lokio adalah framework web komprehensif yang menawarkan tools dan komponen modern untuk membangun aplikasi yang indah dan mudah diakses dengan Next.js, React, dan TypeScript.

Apa itu Lokio?##

Lokio adalah framework web modern yang dibangun di atas Next.js, React, dan Tailwind CSS untuk membuat aplikasi yang indah dan mudah diakses dengan komponen siap produksi. Bekerja dengan mulus dengan Next.js App Router dan mendukung Server serta Client Components.

Jika Anda sedang membangun proyek Next.js dengan TypeScript, Lokio adalah pilihan default yang bagus. Ini menyediakan komponen tingkat tinggi yang siap digunakan (tabel data, formulir, overlay, navigasi) sambil tetap memungkinkan kustomisasi lanjutan saat diperlukan.

Fitur Utama##

Developer Experience First##

API yang intuitif, dukungan TypeScript yang sangat baik, auto-completion, dan dokumentasi komprehensif.

Beautiful by Default##

Desain modern dan bersih langsung dari kotak dengan tema yang dapat Anda adaptasi dalam hitungan menit.

Accessible by Default##

Sesuai dengan WAI-ARIA dengan navigasi keyboard, manajemen fokus, dan dukungan screen reader.

Production Ready##

Komponen yang telah teruji termasuk tabel data, formulir, overlay, dan navigasi yang digunakan oleh ribuan developer.

Teknologi Inti##

Next.js##

Dibangun di atas Next.js 16 dengan App Router untuk performa dan pengalaman developer yang optimal.

React##

Memanfaatkan React 19 dengan Server Components dan pola React modern.

Tailwind CSS##

Menggunakan Tailwind CSS untuk styling dengan sistem desain yang komprehensif.

TypeScript##

Dukungan TypeScript penuh dengan inferensi tipe yang sangat baik dan auto-completion.

Memulai##

Untuk memulai dengan Lokio, ikuti langkah-langkah sederhana ini:

1. Install dependencies

bun add lokio

1. Konfigurasi proyek Anda

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

1. Mulai membangun

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

Persamaan Matematika##

Lokio mendukung persamaan matematika menggunakan KaTeX:

Contoh inline math:

• Kesetaraan massa-energi Einstein: $E = mc^2$
• Teorema Pythagoras: $a^2 + b^2 = c^2$
• Persamaan sederhana: $x + y = z$

Untuk persamaan yang kompleks, Anda dapat menggunakan code block dengan sintaks LaTeX yang akan diproses oleh KaTeX.

Highlighting Kode##

Syntax highlighting didukung langsung:

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

Tabel##

Langkah Selanjutnya##

• Panduan Instalasi - Pelajari cara menginstall Lokio
• Memulai - Bangun aplikasi pertama Anda
• Komponen - Jelajahi komponen yang tersedia
• Tema - Kustomisasi sistem desain Anda