Markdown

Markdown component from @bungas/ui

On This Page

Your open-source, proactive personal AI assistant with 200+ integrations. Bungas combines todos, goals, calendar, and email into one system, turns tasks into automated workflows, and completes work instead of just tracking it. Open-source and self-hostable with support for custom automations and multi-step workflows.

Markdown

Markdown component from @bungas/ui

Markdown

The Markdown component from Bungas UI.

Default

Heading 1

This is a paragraph with some bold text and italic text. It also contains a link to somewhere.

Heading 2

Here's another paragraph with more content to show the typography styles.

Heading 3

First unordered list item
Second unordered list item
Third unordered list item

Heading 4

First ordered list item
Second ordered list item
Third ordered list item

Here's some inline code in a paragraph.

function hello() {
  console.log("Hello, world!");
}

Heading 5

Nama	Kelas	Nilai
Budi	10A	85
Ani	10B	92

Small Size

Heading 1

This is a paragraph with some bold text and italic text. It also contains a link to somewhere.

Heading 2

Here's another paragraph with more content to show the typography styles.

Heading 3

First unordered list item
Second unordered list item
Third unordered list item

Heading 4

First ordered list item
Second ordered list item
Third ordered list item

Here's some inline code in a paragraph.

function hello() {
  console.log("Hello, world!");
}

Heading 5

Nama	Kelas	Nilai
Budi	10A	85
Ani	10B	92

Large Size

Heading 1

This is a paragraph with some bold text and italic text. It also contains a link to somewhere.

Heading 2

Here's another paragraph with more content to show the typography styles.

Heading 3

First unordered list item
Second unordered list item
Third unordered list item

Heading 4

First ordered list item
Second ordered list item
Third ordered list item

Here's some inline code in a paragraph.

function hello() {
  console.log("Hello, world!");
}

Heading 5

Nama	Kelas	Nilai
Budi	10A	85
Ani	10B	92

Inline

This is inline markdown with emphasis and code.

Prose Alias

Using Prose Component

The Prose component is an alias for Markdown. Use whichever name fits your use case better.

Both have the same styling
Both accept the same props
Prose is a common name in Tailwind ecosystem

Article With Meta

Panduan Penggunaan Sistem Akademik

Ditulis oleh Admin·15 Januari 2024·5 menit baca

Sistem akademik Skola dirancang untuk memudahkan pengelolaan data siswa, guru, dan administrasi sekolah. Berikut adalah panduan lengkap penggunaan sistem.

Fitur Utama

Manajemen data siswa
Manajemen data guru
Penjadwalan kelas
Laporan akademik

Cara Memulai

Login ke sistem menggunakan kredensial yang diberikan
Pilih menu yang ingin diakses dari sidebar
Ikuti petunjuk pada setiap halaman

Blog Post

Meningkatkan Kualitas Pembelajaran dengan Teknologi

5 Januari 2024 · Pendidikan

Di era digital ini, teknologi memainkan peran penting dalam dunia pendidikan. Berbagai platform pembelajaran online telah mengubah cara siswa belajar dan guru mengajar.

Manfaat Teknologi dalam Pendidikan

Penggunaan teknologi di kelas membawa berbagai manfaat, antara lain:

Akses yang lebih luas - Materi pembelajaran dapat diakses kapan saja
Interaktivitas - Pembelajaran menjadi lebih menarik
Personalisasi - Setiap siswa dapat belajar sesuai kecepatannya

Documentation

API Documentation

This document describes the REST API endpoints available in the Skola platform.

Authentication

All API requests require authentication using Bearer token:

Authorization: Bearer <your-token>

Endpoints

GET /api/students

Returns a list of all students.

Parameter	Type	Description
`page`	number	Page number (default: 1)
`limit`	number	Items per page (default: 20)
`class_id`	string	Filter by class ID

All Sizes Comparison

Small (size="sm")

Small Heading

This is small sized prose content with bold and italic.

List item one
List item two

Medium (size="md", default)

Medium Heading

This is medium sized prose content with bold and italic.

List item one
List item two

Large (size="lg")

Large Heading

This is large sized prose content with bold and italic.

List item one
List item two

Installation

npm install @bungas/ui

Import

import { Markdown } from "@bungas/ui"

Usage

import { Markdown } from "@bungas/ui"
 
export function Example() {
  return <Markdown />
}

Props

Examples

Default

Heading 1

This is a paragraph with some bold text and italic text. It also contains a link to somewhere.

Heading 2

Here's another paragraph with more content to show the typography styles.

Heading 3

First unordered list item
Second unordered list item
Third unordered list item

Heading 4

First ordered list item
Second ordered list item
Third ordered list item

Here's some inline code in a paragraph.

function hello() {
  console.log("Hello, world!");
}

Heading 5

Nama	Kelas	Nilai
Budi	10A	85
Ani	10B	92

Small Size

Heading 1

This is a paragraph with some bold text and italic text. It also contains a link to somewhere.

Heading 2

Here's another paragraph with more content to show the typography styles.

Heading 3

First unordered list item
Second unordered list item
Third unordered list item

Heading 4

First ordered list item
Second ordered list item
Third ordered list item

Here's some inline code in a paragraph.

function hello() {
  console.log("Hello, world!");
}

Heading 5

Nama	Kelas	Nilai
Budi	10A	85
Ani	10B	92

Large Size

Heading 1

This is a paragraph with some bold text and italic text. It also contains a link to somewhere.

Heading 2

Here's another paragraph with more content to show the typography styles.

Heading 3

First unordered list item
Second unordered list item
Third unordered list item

Heading 4

First ordered list item
Second ordered list item
Third ordered list item

Here's some inline code in a paragraph.

function hello() {
  console.log("Hello, world!");
}

Heading 5

Nama	Kelas	Nilai
Budi	10A	85
Ani	10B	92

Inline

This is inline markdown with emphasis and code.

Prose Alias

Using Prose Component

The Prose component is an alias for Markdown. Use whichever name fits your use case better.

Both have the same styling
Both accept the same props
Prose is a common name in Tailwind ecosystem

Article With Meta

Panduan Penggunaan Sistem Akademik

Ditulis oleh Admin·15 Januari 2024·5 menit baca

Sistem akademik Skola dirancang untuk memudahkan pengelolaan data siswa, guru, dan administrasi sekolah. Berikut adalah panduan lengkap penggunaan sistem.

Fitur Utama

Manajemen data siswa
Manajemen data guru
Penjadwalan kelas
Laporan akademik

Cara Memulai

Login ke sistem menggunakan kredensial yang diberikan
Pilih menu yang ingin diakses dari sidebar
Ikuti petunjuk pada setiap halaman

Blog Post

Meningkatkan Kualitas Pembelajaran dengan Teknologi

5 Januari 2024 · Pendidikan

Di era digital ini, teknologi memainkan peran penting dalam dunia pendidikan. Berbagai platform pembelajaran online telah mengubah cara siswa belajar dan guru mengajar.

Manfaat Teknologi dalam Pendidikan

Penggunaan teknologi di kelas membawa berbagai manfaat, antara lain:

Akses yang lebih luas - Materi pembelajaran dapat diakses kapan saja
Interaktivitas - Pembelajaran menjadi lebih menarik
Personalisasi - Setiap siswa dapat belajar sesuai kecepatannya

Documentation

API Documentation

This document describes the REST API endpoints available in the Skola platform.

Authentication

All API requests require authentication using Bearer token:

Authorization: Bearer <your-token>

Endpoints

GET /api/students

Returns a list of all students.

Parameter	Type	Description
`page`	number	Page number (default: 1)
`limit`	number	Items per page (default: 20)
`class_id`	string	Filter by class ID

All Sizes Comparison

Small (size="sm")

Small Heading

This is small sized prose content with bold and italic.

List item one
List item two

Medium (size="md", default)

Medium Heading

This is medium sized prose content with bold and italic.

List item one
List item two

Large (size="lg")

Large Heading

This is large sized prose content with bold and italic.

List item one
List item two

On This Page

Meet Bungas

Markdown

The Markdown component from Bungas UI.

Default

Heading 1

This is a paragraph with some bold text and italic text. It also contains a link to somewhere.

Heading 2

Here's another paragraph with more content to show the typography styles.

Heading 3

First unordered list item
Second unordered list item
Third unordered list item

Heading 4

First ordered list item
Second ordered list item
Third ordered list item

Here's some inline code in a paragraph.

function hello() {
  console.log("Hello, world!");
}

Heading 5

Nama	Kelas	Nilai
Budi	10A	85
Ani	10B	92

Small Size

Heading 1

This is a paragraph with some bold text and italic text. It also contains a link to somewhere.

Heading 2

Here's another paragraph with more content to show the typography styles.

Heading 3

First unordered list item
Second unordered list item
Third unordered list item

Heading 4

First ordered list item
Second ordered list item
Third ordered list item

Here's some inline code in a paragraph.

function hello() {
  console.log("Hello, world!");
}

Heading 5

Nama	Kelas	Nilai
Budi	10A	85
Ani	10B	92

Large Size

Heading 1

This is a paragraph with some bold text and italic text. It also contains a link to somewhere.

Heading 2

Here's another paragraph with more content to show the typography styles.

Heading 3

First unordered list item
Second unordered list item
Third unordered list item

Heading 4

First ordered list item
Second ordered list item
Third ordered list item

Here's some inline code in a paragraph.

function hello() {
  console.log("Hello, world!");
}

Heading 5

Nama	Kelas	Nilai
Budi	10A	85
Ani	10B	92

Inline

This is inline markdown with emphasis and code.

Prose Alias

Using Prose Component

The Prose component is an alias for Markdown. Use whichever name fits your use case better.

Both have the same styling
Both accept the same props
Prose is a common name in Tailwind ecosystem

Article With Meta

Panduan Penggunaan Sistem Akademik

Ditulis oleh Admin·15 Januari 2024·5 menit baca

Sistem akademik Skola dirancang untuk memudahkan pengelolaan data siswa, guru, dan administrasi sekolah. Berikut adalah panduan lengkap penggunaan sistem.

Fitur Utama

Manajemen data siswa
Manajemen data guru
Penjadwalan kelas
Laporan akademik

Cara Memulai

Login ke sistem menggunakan kredensial yang diberikan
Pilih menu yang ingin diakses dari sidebar
Ikuti petunjuk pada setiap halaman

Blog Post

Meningkatkan Kualitas Pembelajaran dengan Teknologi

5 Januari 2024 · Pendidikan

Di era digital ini, teknologi memainkan peran penting dalam dunia pendidikan. Berbagai platform pembelajaran online telah mengubah cara siswa belajar dan guru mengajar.

Manfaat Teknologi dalam Pendidikan

Penggunaan teknologi di kelas membawa berbagai manfaat, antara lain:

Akses yang lebih luas - Materi pembelajaran dapat diakses kapan saja
Interaktivitas - Pembelajaran menjadi lebih menarik
Personalisasi - Setiap siswa dapat belajar sesuai kecepatannya

Documentation

API Documentation

This document describes the REST API endpoints available in the Skola platform.

Authentication

All API requests require authentication using Bearer token:

Authorization: Bearer <your-token>

Endpoints

GET /api/students

Returns a list of all students.

Parameter	Type	Description
`page`	number	Page number (default: 1)
`limit`	number	Items per page (default: 20)
`class_id`	string	Filter by class ID

All Sizes Comparison

Small (size="sm")

Small Heading

This is small sized prose content with bold and italic.

List item one
List item two

Medium (size="md", default)

Medium Heading

This is medium sized prose content with bold and italic.

List item one
List item two

Large (size="lg")

Large Heading

This is large sized prose content with bold and italic.

List item one
List item two

Installation

npm install @bungas/ui

Import

import { Markdown } from "@bungas/ui"

Usage

import { Markdown } from "@bungas/ui"
 
export function Example() {
  return <Markdown />
}

Props

Examples

Default

Heading 1

This is a paragraph with some bold text and italic text. It also contains a link to somewhere.

Heading 2

Here's another paragraph with more content to show the typography styles.

Heading 3

First unordered list item
Second unordered list item
Third unordered list item

Heading 4

First ordered list item
Second ordered list item
Third ordered list item

Here's some inline code in a paragraph.

function hello() {
  console.log("Hello, world!");
}

Heading 5

Nama	Kelas	Nilai
Budi	10A	85
Ani	10B	92

Small Size

Heading 1

This is a paragraph with some bold text and italic text. It also contains a link to somewhere.

Heading 2

Here's another paragraph with more content to show the typography styles.

Heading 3

First unordered list item
Second unordered list item
Third unordered list item

Heading 4

First ordered list item
Second ordered list item
Third ordered list item

Here's some inline code in a paragraph.

function hello() {
  console.log("Hello, world!");
}

Heading 5

Nama	Kelas	Nilai
Budi	10A	85
Ani	10B	92

Large Size

Heading 1

This is a paragraph with some bold text and italic text. It also contains a link to somewhere.

Heading 2

Here's another paragraph with more content to show the typography styles.

Heading 3

First unordered list item
Second unordered list item
Third unordered list item

Heading 4

First ordered list item
Second ordered list item
Third ordered list item

Here's some inline code in a paragraph.

function hello() {
  console.log("Hello, world!");
}

Heading 5

Nama	Kelas	Nilai
Budi	10A	85
Ani	10B	92

Inline

This is inline markdown with emphasis and code.

Prose Alias

Using Prose Component

The Prose component is an alias for Markdown. Use whichever name fits your use case better.

Both have the same styling
Both accept the same props
Prose is a common name in Tailwind ecosystem

Article With Meta

Panduan Penggunaan Sistem Akademik

Ditulis oleh Admin·15 Januari 2024·5 menit baca

Sistem akademik Skola dirancang untuk memudahkan pengelolaan data siswa, guru, dan administrasi sekolah. Berikut adalah panduan lengkap penggunaan sistem.

Fitur Utama

Manajemen data siswa
Manajemen data guru
Penjadwalan kelas
Laporan akademik

Cara Memulai

Login ke sistem menggunakan kredensial yang diberikan
Pilih menu yang ingin diakses dari sidebar
Ikuti petunjuk pada setiap halaman

Blog Post

Meningkatkan Kualitas Pembelajaran dengan Teknologi

5 Januari 2024 · Pendidikan

Di era digital ini, teknologi memainkan peran penting dalam dunia pendidikan. Berbagai platform pembelajaran online telah mengubah cara siswa belajar dan guru mengajar.

Manfaat Teknologi dalam Pendidikan

Penggunaan teknologi di kelas membawa berbagai manfaat, antara lain:

Akses yang lebih luas - Materi pembelajaran dapat diakses kapan saja
Interaktivitas - Pembelajaran menjadi lebih menarik
Personalisasi - Setiap siswa dapat belajar sesuai kecepatannya

Documentation

API Documentation

This document describes the REST API endpoints available in the Skola platform.

Authentication

All API requests require authentication using Bearer token:

Authorization: Bearer <your-token>

Endpoints

GET /api/students

Returns a list of all students.

Parameter	Type	Description
`page`	number	Page number (default: 1)
`limit`	number	Items per page (default: 20)
`class_id`	string	Filter by class ID

All Sizes Comparison

Small (size="sm")

Small Heading

This is small sized prose content with bold and italic.

List item one
List item two

Medium (size="md", default)

Medium Heading

This is medium sized prose content with bold and italic.

List item one
List item two

Large (size="lg")

Large Heading

This is large sized prose content with bold and italic.

List item one
List item two

Markdown

Markdown

Markdown

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Using Prose Component

Fitur Utama

Cara Memulai

Manfaat Teknologi dalam Pendidikan

API Documentation

Authentication

Endpoints

GET /api/students

Small (size="sm")

Small Heading

Medium (size="md", default)

Medium Heading

Large (size="lg")

Large Heading

Installation

Usage

Props

Examples

Default

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Using Prose Component

Fitur Utama

Cara Memulai

Manfaat Teknologi dalam Pendidikan

API Documentation

Authentication

Endpoints

GET /api/students

Small (size="sm")

Small Heading

Medium (size="md", default)

Medium Heading

Large (size="lg")

Large Heading

Related Components

Markdown

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 1

Heading 2