Koala UI

Prose

Pro

The reading type. Wrap a document, CMS rich text, rendered Markdown or plain JSX, and its bare headings, lists, quotes, code and tables are typeset on Koala's tokens, with one size prop.

Constraints first

We started with constraints instead of components: four themes, one spacing scale and a fixed set of color roles. Read the color foundations for the full map.

  • Components never hard-code a value, they read tokens.
  • A theme change is one file, not a hundred.
A component is only shared if it is easier to use than to rebuild.

Constraints feel limiting for about a week. After that they are the reason a new component takes an afternoon.

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Activate your Pro license (once per machine)npx koalaui-cli@latest login <key># Add this component (its dependencies come along)npx koalaui-cli@latest add prose

Usage#

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

Sizes#

The size picks the type and the rhythm together. sm is the 14px body of the product UI (a comment, a task description, what a RichTextEditor wrote); md is docs and release notes; lg is long-form reading at 17px, for an article at a ~42rem measure.

Release notes

Unified spacing across buttons, inputs and selects, so forms line up in dense dashboards.

Themes

The Moonlight theme gains contrast, and the branded focus ring follows it.

Release notes

Unified spacing across buttons, inputs and selects, so forms line up in dense dashboards.

Themes

The Moonlight theme gains contrast, and the branded focus ring follows it.

Release notes

Unified spacing across buttons, inputs and selects, so forms line up in dense dashboards.

Themes

The Moonlight theme gains contrast, and the branded focus ring follows it.

Rich text from a CMS#

A CMS, a Markdown renderer or a Tiptap export hands you a string of bare HTML. Set it on Prose and it is typeset as it is: no class to add to the content.

Koala UI v11

A major update focused on design system consistency and a fully responsive component library.

Core components

  • Buttons, Inputs, Selects: unified heights and paddings across every control.
  • Chips: a new component for filters and quick actions.
  • Tabs: clearer states for multi-step flows.
One design system, every surface, one payment.

Elements#

Ordered lists carry tabular markers, inline code keeps the global chip, a pre is a muted block that scrolls on its own, a table scrolls inside the column instead of the page, and a picture gets the corner radius and the image outline. Media take a wider step than copy, so they read as breaks.

Install

  1. Add the package.
  2. Import globals.css once, at the root.
npx koalaui-cli@latest add prose
A laptop on a desk, a code editor open
The token map is the contract.
SizeBodyBlock step
sm14 / 2416px
md16 / 2820px
lg17 / 2824px

Still stuck?

Every size shares these rules; only the scale and the spacing change.

Components inside#

Prose styles bare elements. An anchor or image that carries a class is a component, so it keeps its own look: a Link or a Button dropped into the copy is never underlined or restyled.

A bare anchor wears the prose link; a Link is the same treatment, as a component.

As child#

Pass asChild to put the styling on your own element, an article or a section, instead of a wrapping div.

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

API reference#

Prose

Typesets the bare elements under it (headings, lists, quotes, code, tables, media). Renders a <div> and forwards all native <div> props; accepts className, merged last, so a descendant utility like [&_h2]:text-brand wins over the recipe.

PropTypeDefaultDescription
size"sm" | "md" | "lg""md"Type scale and rhythm: sm 14/24 for product UI, md 16/28 for docs and release notes, lg 17/28 for long-form articles.
asChildbooleanfalseRender the styling onto your own child element (<article>, <section>) instead of a div.
Data attributeDescription
data-sizeThe resolved size: "sm", "md" or "lg".
CSS variableDescription
--prose-flowGap between top-level blocks. Set by size.
--prose-h2Space above an h1 or h2.
--prose-h3Space above an h3 or h4.
--prose-after-headingSpace between a heading and the block it opens.
--prose-mediaSpace around figure, pre, table, hr, blockquote, video and iframe.
--prose-itemGap between list items and before a nested list.

FAQ#

No. Prose is one tv recipe on Koala's own tokens: the body is the `--body` reading ink, headings and bold lift to `--foreground`, list markers step down to `--muted-foreground`, links turn `--link` on hover. It re-themes across light, cream, dark and moonlight with no plugin.