Components

Return JSX from ordinary functions. Put layout, typography, and color in style.

#Defining components

function Greeting(props: { name: string }) {
  return <Text>Hello, {props.name}</Text>;
}

function Example() {
  const [name] = createSignal("Ada");
  return <Greeting name={name()} />;
}

<View> accepts text directly. <div> and <span> are aliases for View and Text. There is no class or className; everything visual goes in style.

<div style={{ flexCol: true, gap2: true }}>
  some text
  <span style={{ textLg: true, fontSemibold: true }}>Styled text</span>
</div>

#Primitives

View, Text, Button, Input, TextArea, Image, Svg, Shader, and VirtualList are the building blocks. TextInput is the same as Input. Terminal is available when you add the terminal package.

bun add @quickgui/extension-editor adds Editor, CodeBlock, and DiffView.

bun add @quickgui/extension-markdown adds Markdown.

#Compound components

<Checkbox.Root checked={checked()} onCheckedChange={setChecked}>
  <Checkbox.Indicator>
    <Text>✓</Text>
  </Checkbox.Indicator>
  <Text>Remember this device</Text>
</Checkbox.Root>

Keep parts under the root they belong to so focus and values stay connected.

#Controlled state

Pass the current value and a change callback, or use defaultValue, defaultChecked, and defaultOpen when the component can own its state.

const [name, setName] = createSignal("");
<Input value={name()} onInput={(event) => setName(event.value ?? "")} />;

#Component families

The component reference covers forms, overlays, menus, tables, trees, and more. This repository includes examples/components-typescript as a gallery.

#Styling parts

Apply style on each visible part. Parts ship unstyled so colors and layout belong to your app. Hooks such as useTabsState and useSelectState expose the current state for custom presentation.