htsx

Quickstart

3 steps to getting started. Easy setup and minimal dependencies.

1. Add Tailwind

htsx uses Tailwind CSS and its utilities only.

bun add -D tailwindcss clsx tailwind-merge

2. Add helper

Create class helper in ui folder (e.g. src/components/ui).

ui/c.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function c(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

3. Add theme

Fully compatible with shadcn/ui. You can customize it or apply dark mode anytime.

src/style.css
@import "tailwindcss" source("../src");
 
@theme inline {
  --color-background: oklch(100% 0 0);
  --color-foreground: oklch(14.5% 0 0);
  --color-card: oklch(98.5% 0 0);
  --color-card-foreground: oklch(20.5% 0 0);
  --color-popover: oklch(100% 0 0);
  --color-popover-foreground: oklch(14.5% 0 0);
  --color-primary: oklch(70.5% 0.213 47.604);
  --color-primary-foreground: oklch(98.5% 0 0);
  --color-secondary: oklch(76.9% 0.188 70.08);
  --color-secondary-foreground: oklch(98.5% 0 0);
  --color-muted: oklch(98.5% 0 0);
  --color-muted-foreground: oklch(43.9% 0 0);
  --color-accent: oklch(97% 0 0);
  --color-accent-foreground: oklch(14.5% 0 0);
  --color-destructive: oklch(63.7% 0.237 25.331);
  --color-border: oklch(92.2% 0 0);
  --color-input: oklch(92.2% 0 0);
  --color-ring: oklch(92.2% 0 0);
}

4. Copy and paste

Find a component. Copy the code and paste it in ui/hoge.tsx.

ui/button.tsx
import type { JSX, Child } from "hono/jsx";
import { c } from "./c";
 
export function Button({...props}: Props}) {
  return <button {...props}>{children}</button>;
}

5. Use it

Import the component and use it.

menu.tsx
import { Button } from "./ui/button";
import { Popover } from "./ui/popover";
 
export default function Menu() {
  return (
    <div>
      <Button popovertarget="menu">Open</Button>
      <Popover id="menu">Menu</Popover>
    </div>
  );
}