Installation
Install GlobUI packages and set up Tailwind so the components are styled.
Versions
All @glob-ui/* packages share one version (currently 0.1.0). Install the same version of every package you use, or install @glob-ui/all, which brings in every component at the matching version.
Install one package per component, or everything at once. Pick your package manager:
pnpm add @glob-ui/button
# or every component
pnpm add @glob-ui/allThen set up Tailwind v4 once, in the global stylesheet. The first line brings in the design tokens. The @source line makes Tailwind generate the classes the packages use. Tailwind skips node_modules by default, so this line is required.
@import "tailwindcss";
@import "@glob-ui/styles";
@source "../node_modules/@glob-ui/*/dist/**/*.{js,mjs}";Adjust the @source path to where node_modules is relative to this CSS file.
Use a component
import { Button } from "@glob-ui/button"
export default function Page() {
return <Button variant="primary">Save</Button>
}Why the @source line works
Tailwind scans the files it is told about and generates a CSS rule for every class it finds. The packages ship compiled JavaScript in dist/, and that output contains the class strings (bg-glob-primary, rounded-glob-md). The glob node_modules/@glob-ui/*/dist matches each package's built output, so every class a component uses is generated. This site uses the same line in its own app/global.css.