#Usage

Introduction to BarefootJS

A signal-based reactivity framework that compiles JSX to lightweight marked templates, bringing modern DX to any backend.

BarefootJS takes a fundamentally different approach to frontend development. Instead of shipping a full runtime to the browser, it compiles your components at build time into minimal client JavaScript.

The compilation happens in two phases: first, your JSX is transformed into an intermediate representation (IR), then the IR is compiled into marked templates and client-side JavaScript.

"The best JavaScript is the JavaScript you never ship."

Key Features

Signal-based reactivity with fine-grained updates
Two-phase compilation for minimal client bundle
Works with any backend (Hono, Go templates, etc.)
shadcn/ui-compatible component library

To get started, install the CLI with bun add @barefootjs/cli and scaffold your first project.

1import {2  TypographyH1,3  TypographyH2,4  TypographyH3,5  TypographyP,6  TypographyBlockquote,7  TypographyList,8  TypographyInlineCode,9  TypographyLead,10  TypographyLarge,11  TypographySmall,12  TypographyMuted,13} from "@/components/ui/typography"1415function TypographyDemo() {16  return (17    <div>18      <TypographyH1>Heading 1</TypographyH1>19      <TypographyH2>Heading 2</TypographyH2>20      <TypographyH3>Heading 3</TypographyH3>21      <TypographyP>A paragraph of body text.</TypographyP>22      <TypographyLead>A lead paragraph.</TypographyLead>23      <TypographyBlockquote>A blockquote.</TypographyBlockquote>24      <TypographyList>25        <li>List item one</li>26        <li>List item two</li>27      </TypographyList>28      <TypographyInlineCode>code</TypographyInlineCode>29      <TypographyLarge>Large text</TypographyLarge>30      <TypographySmall>Small text</TypographySmall>31      <TypographyMuted>Muted text</TypographyMuted>32    </div>33  )34}

#Examples

#Headings

This is H1

This is H2

This is H3

This is H4

<TypographyH1>This is H1</TypographyH1>
<TypographyH2>This is H2</TypographyH2>
<TypographyH3>This is H3</TypographyH3>
<TypographyH4>This is H4</TypographyH4>

#Paragraph

The king, seeing how the people of his kingdom were suffering, decided to repeal the joke tax and allow laughter to flourish once more.

<TypographyP>
  The king, seeing how the people of his kingdom were suffering,
  decided to repeal the joke tax and allow laughter to flourish
  once more.
</TypographyP>

#Blockquote

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."

<TypographyBlockquote>
  "After all," he said, "everyone enjoys a good joke, so it's
  only fair that they should pay for the privilege."
</TypographyBlockquote>

#List

1st level of puns: 5 gold coins
2nd level of jokes: 10 gold coins
3rd level of one-liners: 20 gold coins

<TypographyList>
  <li>1st level of puns: 5 gold coins</li>
  <li>2nd level of jokes: 10 gold coins</li>
  <li>3rd level of one-liners: 20 gold coins</li>
</TypographyList>

#Inline Code

Install the package with bun add @barefootjs/client.

<TypographyP>
  Install the package with{" "}
  <TypographyInlineCode>bun add @barefootjs/client</TypographyInlineCode>.
</TypographyP>

#Lead

A modal dialog that interrupts the user with important content and expects a response.

<TypographyLead>
  A modal dialog that interrupts the user with important content
  and expects a response.
</TypographyLead>

#Text Styles

Are you absolutely sure?

Email address

Enter your email address.

<TypographyLarge>Are you absolutely sure?</TypographyLarge>
<TypographySmall>Email address</TypographySmall>
<TypographyMuted>Enter your email address.</TypographyMuted>

#API Reference

All typography components share the same props interface. Each renders a semantic HTML element with appropriate styling.

Component	Element	Description
TypographyH1	h1	Page title, largest heading
TypographyH2	h2	Section heading with bottom border
TypographyH3	h3	Sub-section heading
TypographyH4	h4	Minor heading
TypographyP	p	Body text paragraph
TypographyBlockquote	blockquote	Quoted text with left border
TypographyList	ul	Bulleted list
TypographyInlineCode	code	Inline code snippet
TypographyLead	p	Larger introductory text
TypographyLarge	div	Large emphasis text
TypographySmall	small	Small caption text
TypographyMuted	p	Muted secondary text

Shared Props

Prop	Type	Default	Description
children	Child	-	The text content to render.
className	string	-	Additional CSS classes.

Typography

The Joke Tax Chronicles

#Installation