Components

Zenith comes with a set of predefined components you can use to build your resume. You will usually import them directly within pages when using the component approach or within templates in template approach. Components can be:

• context agnostic - work within any page or template. Located in src/components.
• context specific - work only within the context (web or pdf) they’re made for. Located in src/components/web or src/components/pdf.

All components have their props described directly in the component file using TypeScript types and JSDoc comments. However to gain a better understanding of how to use them, you can find a list of all Zenith components below. Click badges next to component names, to see their implementation in the repository.

Presentation components

Used directly within pages and templates to display UI not related to content collections.

Main layout

<BaseLayout /> 🤷 agnostic

Used as a base for creating context-specific layout components. It renders the basic HTML structure and sets up a base for theme customization.

<Layout /> 🌐 web 📄 pdf

Used to wrap the whole content of each page. It provides the base layout, sets up global styles, renders page metadata, and contains components responsible for some additional features like theme switcher or analytics.

Sections

<Section /> 🌐 web 📄 pdf

Used to group all elements belonging to one section. We recommend to build section content using <SectionTitle /> as the first child and <Subsection /> or list components described above as the rest of the children.

<SectionTitle /> 🌐 web 📄 pdf

Displays provided text using styles defined for section titles. We recommend to use it as the first child of <Section /> component.

<Subsection /> 🌐 web 📄 pdf

Used to group all elements belonging to one subsection. We recommend to place it within <Section /> component and build its content using <SubsectionTitle /> as the first child and list components described above as the rest of the children.

<SubsectionTitle /> 🌐 web 📄 pdf

Displays provided text using styles defined for subsection titles. We recommend to use it as the first child of <Subsection /> component.

Section layout

<GridList /> 🤷 agnostic

Displays children in a grid layout. Use grit-template-column class to specify the number of columns or pass minColWidth prop to determine it automatically. Use gap classes to customize the space between items.

<HorizontalList /> 🤷 agnostic

Displays children in a horizontal list. Use gap classes to customize the space between items.

<VerticalList /> 🤷 agnostic

Displays children in a vertical list. Use gap classes to customize the space between items.

UI enhancements

<Separator /> 🤷 agnostic

Displays a horizontal separator line. Use border-width, border-style, and border-color classes to customize the line style.

<Footer /> 📄 pdf

Displays the footer with the provided text. Use it to provide data required law regulations but not important from the resume content perspective (e.g. GDPR notice).

Sidebar

<Sidebar /> 🌐 web

Displays a sidebar on the right side of the resume. Use <SidebarItem /> components as children to specify which items should be displayed in the sidebar.

<SidebarItem /> 🌐 web

Displays a single item in the sidebar. To work properly you need to pass an sectionId property that matches the id of the section you want to link to. It also requires a icon and title properties that will be displayed in the sidebar and accompanying tooltip.

Content components

Used directly within pages and templates to display content collection entries. Always receive an entry property.

<Achievement /> 🌐 web 📄 pdf

Displays entries from the achievements collection.

<Basics /> 🌐 web 📄 pdf

Displays entries from the basics collection.

<BasicsLargeImage /> 🌐 web

Displays entries from the basics collection. Entry must have an image property to be displayed by this component.

<Education /> 🌐 web 📄 pdf

Displays entries from the education collection.

<Favorite /> 🌐 web 📄 pdf

Displays entries from the favorites collection.

<Interest /> 🌐 web 📄 pdf

Displays entries from the interests collection.

<Job /> 🌐 web 📄 pdf

Displays entries from the jobs collection.

<Metadata /> 🌐 web

Uses entries from the metadata collection to configure the page metadata.

<Project /> 🌐 web 📄 pdf

Displays entries from the projects collection.

<Reference /> 🌐 web 📄 pdf

Displays entries from the references collection.

<Skill /> 🌐 web 📄 pdf

Displays entries from the skills collection.

Style components

Used directly within pages and templates to customize global styles. The import names are arbitrary, so we document ones used by default.

<Font /> 🤷 agnostic

Downloads and sets up fonts for headers and body text. We recommend to use Fontsource if you want to add your own fonts.

<DuskColors /> 🤷 agnostic

Sets up CSS variables for dusk (grayscale) colors. By default you can choose from 5 presets based on Tailwind grayscale shades.

<AccentColors /> 🤷 agnostic

Sets up CSS variables for accent colors. By default you can choose from 17 presets based on Tailwind color shades.

<ElementColors /> 🤷 agnostic

Sets up CSS variables that are actually used to style the components. As it is based on the dusk and accent colors, you need to set them up before this element.

Utility components

Used within other components to provide a particular functionality.

<Analytics /> 🌐 web

Sets up analytics services based on the provided environment variables.

<DateRange /> 🤷 agnostic

Displays date range in a human-readable format. Its result depends on the translations and dateFormat props from the global context;

<Details /> 🌐 web 📄 pdf

Displays sets of label-value pairs. Used in some content components to display additional information about the entry.

<Icon /> 🤷 agnostic

Fetches and displays icons from Iconify or local icons stored at src/icons. Always requires a name property that should have an set:name format for Iconify icons or be a filename for local icons.

<Img /> 🤷 agnostic

Displays an image based on the provided src property. You can pass an imported image, path to the /public directory (starting with /), or an authorized external URL.

<Linkable /> 🤷 agnostic

Used for elements that may be a link. It wraps the provided children with an <a> tag if the href property is provided or with a <span> otherwise.

<Popover /> 🌐 web

Creates a popover that displays provided content when the element passed to the trigger slot is clicked.

<RenderedContent /> 🌐 web 📄 pdf

Renders content collection entries’ content (markdown below the frontmatter) as HTML and provides its styles.

<ThemeSwitcher /> 🌐 web

Contains theme setup logic and (if configured through global context) displays a button that allows users to switch between light and dark themes.

Special components

<OpenGraph />

The default template used in src/pages/og files to provide a base for Open Graph image generation. It shouldn’t be used anywhere else.