Good-looking text from the plain HTML that Markdown, MDX or a CMS produces.
$ pnpm dlx shadcn@latest add @dashral/proseGetting paid on time
Most late payments aren't refusals: the invoice went to the wrong person, or nobody knew it was due. Three habits fix most of it. Read the full guide for the details.
Send it to the right person
- Ask who approves payments before you start the work.
- Put a purchase order number on every invoice.
- Copy the person who signed the contract.
We stopped chasing invoices the month we added the PO number. — A design studio in BandungRemind before it's late
- Three days before the due date.
- On the day, with a
Pay nowlink. - A week after, with the late fee written out.
reminders: [-3, 0, 7] // days from the due date| Reminder | Paid within a week |
|---|---|
| None | 41% |
| On the day | 63% |
| Three reminders | 88% |
Installation
$ pnpm dlx shadcn@latest add @dashral/proseAdds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/prose.json
Usage
import { Prose } from "@/components/dashral/prose"
<Prose as="article" className="max-w-prose" dangerouslySetInnerHTML={{ __html: post.html }} />Using the npm package? Import from @dashral/ui/components/prose instead, here and in the examples; the rest is the same.
Examples
Sizes
sm for a card or a sidebar, lg for a page made for reading.
Version 1.1
Fifteen new components, among them a Color Picker, a Phone Input and a Lightbox. Press ⌘K to find them.
Version 1.1
Fifteen new components, among them a Color Picker, a Phone Input and a Lightbox. Press ⌘K to find them.
Version 1.1
Fifteen new components, among them a Color Picker, a Phone Input and a Lightbox. Press ⌘K to find them.
API reference
Prose
Also takes every prop of <div>(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
size | "sm" | "default" | "lg"The text size, and the spacing with it. | "default" |
as | "div" | "article" | "section" | "main"The element it renders. | "div" |
className | stringE.g. a width for comfortable lines: max-w-prose. | — |
Accessibility
- It only styles: headings, lists and tables keep their meaning, so write them as real elements.
- Kit components inside (anything with data-slot) keep their own looks.
- Uses logical sides, so lists and quotes sit on the right in Arabic; code blocks stay left to right.