b44ui

minimal dark-mode react components, via tailwind

npm add b44ui

@import "b44ui/tailwind.css";

if your app already has @import "tailwindcss";, replace that line with the one above.

the host app still needs tailwind v4 processing. with vite:

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import tailwindcss from "@tailwindcss/vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

| Component | Props | Description | |-----------|-------|-------------| | App | center, width, cn | Root layout, dark background, wraps strings in Md | | Centered | width, cn, grow | Centered max-width container | | D | cn, style, grow, wd | Plain div with cn | | Row | align, ratio, cn, grow, wd | Flex row, align: start \| mid \| end | | Col | cn, grow, wd | Flex column | | Code | highlight | Code block | | Grid | cols, cn, grow | CSS grid, defaults to one column per child | | Card | cn, grow | Bordered zinc-900 card | | Block | label, row, dashed, cn, grow | Padded container with optional label | | BlockSm | dashed, cn, grow | Smaller padded container | | TabList | gap, p, wd | Simple tab row wrapper | | Tab | title, active, click, wd | String-first tab primitive | | Hr | vertical, color, wd | Horizontal or vertical divider | | Progress | value, color, dot, wd | Progress bar or dot | | Dropzone | onFiles, multiple, accept | Hidden file input wrapper for click/drop | | Btn | click, color, ghost, cn, grow | Button, supports Color and ghost style | | A | href, click, cn, grow | Link-styled anchor, works with onClick or href | | Chip | click, cn | Small inline badge, clickable if click provided | | Tint | color, cn, grow | Tinted background block | | Muted | cn, grow | Small muted text | | Input | cn, grow, ...input attrs | Styled text input | | Textarea | cn, grow, ...textarea attrs | Styled textarea | | Select | cn, grow, ...select attrs | Styled select | | Modal | open, cn | Fixed overlay modal | | Popover | text, color, cn | Hover popover | | Md | className | Markdown renderer with syntax highlighting |

Color: red \| blue \| orange \| purple \| yellow \| green

All components accept cn for additional Tailwind classes (merged via tailwind-merge).