Package Exports

slidev-theme-trustedai
slidev-theme-trustedai/example.md

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (slidev-theme-trustedai) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

slidev-theme-trustedai

A TrustedAI theme for Slidev presentations, optimized for technical discussions and RAG content.

Features

HSMW Cetacean Blue color palette - Professional blue-based theme
Automatic h1/h2 subtitle reordering - Subtitles appear above titles for better hierarchy
Smart table styling - Automatic bold headers without manual markdown
Section backgrounds - Color-coded chapters with image blends and solid colors
Optimized for technical content - Built for RAG, AI, and technical presentations
White-based layouts - Clean, professional appearance

Install

Add the following frontmatter to your slides.md. Start Slidev then it will prompt you to install the theme automatically.

---
theme: trustedai
---

Learn more about how to use a theme.

Settings

Next to the available frontmatter customizations, this theme provides a few additional ones.

Name	Type	Default	Use	Description
footer	`boolean`	`true`	First Slide	Display the footer on each slide (except for layouts `cover`, `intro` & `end`)

Transitions

The default transition behavior is handled based on the sections. Overriding the default is possible by adding the transition property to the frontmatter.

---
transition: slide-up
---

Layouts

This theme provides the following layouts:

Default

This layout will probably be most used for content slides. You can put anything in for content. Whether it be text, an image, a list, an iframe. Just make sure it fits the slide.

Note: Subtitles (h2) will automatically appear above the main title (h1) for better visual hierarchy.

Usage

---
layout: default # optional
---

# Slide title first
## Optional subtitle

Amazing content which can be anything, as long as it fits the slide. Just be aware that the subtitle will be show above the title. Both are on the left side.

Cover

The first slide of your presentation with a white background and image on the right side. Features the TrustedAI logo.

Usage

---
layout: cover
image: ./background-image.jpg
---

**Subtitle or Organization**
# Main Title

Date or additional info

Full

A full size layout. Title on top. Content can be anything you want. If you want to separate your content into columns, have floating images or a large video player, you can do so in your markdown. Just use HTML to create your own layout.

Usage

---
layout: full
---

# My Amazing title

Some content

Iframe / Iframe-left / Iframe-right

This is the default sli.dev way to display an Iframe inside a slide. Make sure that you use the embed URL if it is provided.

Usage

---
layout: iframe / iframe-left / iframe-right
url: https://www.youtube.com/embed/dQw4w9WgXcQ
---

Image

A large image as background with only a title. The title is either displayed as an overlay on the image or in a black box.

Screenshot of the box variant for the image layout

Usage

---
layout: image
image: path/to/my/image.jpg
variant: default|box
---

# Image layout in the [variant] variant

Intro

Speaker introduction slide with white background and circular profile image (80% container size).

Usage

---
layout: intro
image: ./profile.jpg
imageSide: left|right
---

# Speaker Name

Speaker description, role, and background information.

- Key achievement 1
- Key achievement 2
- Interests or fun fact

Quote

Use a single slide per quote or statement

Usage

---
layout: quote
author: Walter Landor
source: 16-04-1992
cite: https://en.wikipedia.org/wiki/Brand
---

Products are made in a factory but brands are created in the mind

Section

Section divider slides with colored backgrounds. Level 1 uses image blend backgrounds, level 2 uses lighter solid colors.

Usage

---
layout: section
chapter: introduction|story|conclusion
level: 1|2|3
---

# Section Title
## Optional subtitle

Background colors are automatically determined by chapter:

introduction: Blue theme
story: Green theme
conclusion: Purple theme

Agenda

A layout for agenda/table of contents slides with image on the right side.

Usage

---
layout: agenda
image: ./image.jpg
---

# Agenda
<Toc />

Two-cols

As the name suggest, this layout divides the page in two columns (left / right). By default the content is placed in the left column and with the ::right:: slot you're able to place content in the right column.

Usage

---
layout: two-cols
division: 70/30
---

# Left side title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec nunc orci. Donec sit amet tincidunt ipsum. Maecenas tristique ornare nisi a ullamcorper.

::right::

# Right side title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- First item
- Second item
- Third item

Components

This theme provides the following components:

SocialLink

Mainly used in (but not limited to) the layout layout. It creates an anchor to a known social network. Only provide the name of the network and the speaker's handle. Currently, the following networks are supported:

iO Techhub
LinkedIn
Twitter
Github

Usage

<SocialLink handle="some-handle" network="io" />

ProfileCard

This component can be used to create a profile card displaying the firstName and lastName and optionally the functionTitle, email, telephone and profile picture (image).

Usage

<ProfileCard
  firstName="John"
  lastName="Doe"
  functionTitle="Front-end developer"
  email="john.doe@iodigital.com"
  telephone="06-12345678"
  image="https://picsum.photos/200/200"
  />

Facts

This component can be used to display facts. It accepts an array of facts [{ fact: '30%', description: 'Fact description' }] and optionally a direction row | column with a default of row.

Usage

<Facts
    :facts="[{
        stat: '30%',
        description: 'Short description - maximum three lines'
    }, {
        stat: '130%',
        description: 'Short description - maximum three lines'
    }, {
        stat: '10.000',
        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla mollitia ad, laborum ipsum odit asperiores quo optio perspiciatis sequi quasi voluptate natus aperiam molestias ullam perferendis esse doloremque unde consequuntur.'
    }]"
/>

Icons

This theme supports Material Design Icons (MDI) out of the box. The TrustedAI "T" logo is available as a custom icon. Each icon has its own (self-closing) element and can be written in both CamelCase and kebab-case.

Usage

<IconMdiAccount />
<icon-mdi-account />
<IconIoLogo />  <!-- TrustedAI T logo -->

This component can be used to create a table of contents based on the headings from every level 1 section slide.

Usage

---
layout: image-right (this can be any layout)
image: 'https://source.unsplash.com/collection/94734566/1920x1080'
---
# Table of contents
<Toc />

Quick Example

---
theme: trustedai
layout: cover
image: ./background.jpg
---

**Advanced RAG Techniques**
# Technical Discussion

2025/08/18

---
layout: intro
image: ./profile.jpg
imageSide: right
---

# John Doe

Senior AI Engineer

- PhD in Computer Science
- 10+ years in NLP/RAG
- Open source contributor

---
layout: section
chapter: introduction
level: 1
---

# Introduction
## Setting the Stage

---
layout: full
---

# What is RAG?
## Retrieval-Augmented Generation

RAG combines LLMs with external knowledge retrieval...

Contributing

For more information about contributing to this project see the CONTRIBUTING.md.

npm install
npm run dev to start theme preview of example.md
Edit the example.md and style to see the changes
npm run export to generate the preview PDF
npm run screenshot to generate the preview PNG