Next.js

Install the base WebTUI package with your preferred package manager

bun i @webtui/css
npm i @webtui/css
yarn add @webtui/css
pnpm install @webtui/css

Define the order of layers and import the base stylesheet in globals.css

@layer base, utils, components;

@import "@webtui/css/base.css";

Import additional utilities, components, and themes in globals.css

@layer base, utils, components;

@import "@webtui/css/base.css";

/* Utils */
@import "@webtui/css/utils/box.css";

/* Components */
@import "@webtui/css/components/button.css";
@import "@webtui/css/components/typography.css";

ESM imports can be used to scope styles to specific components

import "@webtui/css/components/button.css";

type Props = {
  /* ... */
};

export default function Button(props: Props) {
  return <button>{props.children}</button>;
}