Styling your components

There are a few tools to style your components in Examplary. The platform uses Tailwind CSS for utility-first styling, and you can also use the Examplary UI kit for pre-built components and styles.

Using Tailwind CSS

When you use Tailwind CSS utility classes, these will automatically be bundled in with your code.

import React from "react";
 
export default function MyComponent() {
  return <div className="p-4 bg-blue-500 text-white">Hello, Tailwind!</div>;
}

Read more about Tailwind CSS to learn how to use its utility classes effectively.

Examplary UI kit

The package @examplary/ui provides a set of pre-built components and styles that you can use in your components. When building question types, this package is available at runtime and can be imported directly; you don't need to install it separately in your question type folder.

You can use the components from the UI kit like this:

import React from "react";
import { RichTextField } from "@examplary/ui";
 
export default function MyComponent() {
  return <RichTextField />;
}

Common components from the UI kit include:

`<Input />`

Styled HTML input field.

import { Input } from "@examplary/ui";
 
export default function MyComponent() {
  return <Input type="email" placeholder="Email" />;
}

`<Select />`

Styled HTML select dropdown.

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@examplary/ui";
 
export default function MyComponent() {
  return (
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Fruits</SelectLabel>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
          <SelectItem value="blueberry">Blueberry</SelectItem>
          <SelectItem value="grapes">Grapes</SelectItem>
          <SelectItem value="pineapple">Pineapple</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}

`<AnswerBox />`

Component that displays print answer boxes.

import { AnswerBox, FrontendPrintComponent } from "@examplary/ui";
 
const PrintComponent: FrontendPrintComponent = ({ answerBoxes }) => {
  if (!answerBoxes) return null;
 
  return <AnswerBox />;
};
 
export default PrintComponent;

`<RichTextField />`

Component that displays a rich text field for user input. Allows HTML formatting and is useful for text-based questions.

Props:

Prop	Type	Default	Description
`value`	string	`""`	The current value of the rich text field (HTML string).
`defaultValue`	string	—	Initial value for uncontrolled usage. Changes to this prop reset the editor content.
`onChange`	`(value: string) => void`	—	Called with the new HTML string whenever the content changes.
`onBlur`	`(value: string) => void`	—	Called with the current HTML string when the editor loses focus.
`placeholder`	string	`""`	Placeholder text shown when the field is empty.
`className`	string	`""`	Additional CSS classes for the editor element.
`singleLine`	boolean	`false`	Restricts the editor to a single line, preventing newlines.
`autoFocus`	boolean	`false`	Automatically focuses the field when it mounts.
`showFormattingMenu`	boolean	`false`	Shows a floating formatting toolbar when text is selected.
`id`	string	—	Gives the editor a stable ID, accessible via `getEditorById(id)` from `@examplary/ui`.
`slotBefore`	`(editor: Editor) => React.ReactNode`	—	Render callback called with the Tiptap `Editor` instance; return a React node to render before the editor.
`uploadFile`	`(file: File) => Promise<{ url: string; name: string }>`	—	Enables image pasting and drag-and-drop. Called with the dropped/pasted file; return the hosted URL.

Example:

import { useState } from "react";
import { RichTextField, RichTextToolbar } from "@examplary/ui";
 
export default function MyComponent() {
  const [value, setValue] = useState("");
 
  return (
    <RichTextField
      value={value}
      onChange={(value) => setValue(value)}
      placeholder="Type your answer here..."
      className="border p-2 rounded"
      slotBefore={(editor) => <RichTextToolbar editor={editor} />}
    />
  );
}

`<RichTextDisplay />`

Component that displays rich text content. It is useful for showing formatted HTML in a read-only format, with the appropriate styles, similar to how it would appear in a rich text editor.

Props:

children: The rich text content to display, which should be a string containing HTML.
as: The HTML element to render (default is div).

import { RichTextDisplay } from "@examplary/ui";
 
export default function MyComponent() {
  const content = "<p>This is <strong>rich text</strong> content.</p>";
 
  return <RichTextDisplay>{content}</RichTextDisplay>;
}