Skip to the content
12 themes

One word changes the whole look

A theme sets how cards, labels and captions are drawn, the fonts, the colours, the backdrop, how things move and how it sounds. Every picture below is a frame from a real render.

A frame from a video in the minimal thememinimalMinimalism. Business software, finance, anything that must feel calm and exact.
A frame from a video in the glass themeglassGlassmorphism. Modern apps, AI products, launch videos.
A frame from a video in the liquid themeliquidLiquid glass. Consumer apps, products that want to look current.
A frame from a video in the soft themesoftNeumorphism. Calm dashboards, health and wellness, hardware controls.
A frame from a video in the clay themeclayClaymorphism. Consumer apps, education, friendly brands.
A frame from a video in the brutal themebrutalBrutalism. Developer tools, creative studios, brands that want attitude.
A frame from a video in the maximal thememaximalMaximalism. Entertainment, fashion, events, short social video.
A frame from a video in the bento themebentoBento grid. Feature overviews, "everything it does" videos.
A frame from a video in the real themerealSkeuomorphism. Music and audio tools, products about a physical thing, deliberate nostalgia.
A frame from a video in the spatial themespatialSpatial UI. Hardware, 3D and AR products, premium technology.
A frame from a video in the editorial themeeditorialEditorial. Finance, law, publishing, reports.
A frame from a video in the terminal themeterminalTerminal. Developer tools, APIs, security products.

Use a theme

Try two or three on your own video without changing the config. Each run writes files named after the theme, so you can compare them.

Try
bunx showcase themes
bunx showcase make --theme glass --draft
bunx showcase make --theme clay --draft
Then keep one, in showcase.config.json
{ "url": "http://localhost:3000", "theme": "glass" }
Guide 15: Themes

Make your own

A theme for your brand is one small file in your project. Start from the built-in theme closest to your brand, with your colours. It is checked for readability before it can be used.

By hand
showcase theme new acme --from glass --accent "#FF5A1F" --ink "#0B1D35"
From a description, in Claude Code, with no API key
/showcase-theme-new orange and dark blue, rounded and friendly, a food delivery app
Guide 16: Your own theme
A theme of your own, for real

This site has its own theme

It is called lavender. It starts from the built-in clay theme and takes this site's colours and fonts, so a video sits on the page as if it were part of it. The video here, and the tour in the guide, were rendered in it.

extends clayOutfit, DM Sanspasses every readability check
0:00 / 0:00
themes/lavender.json (the start of it)
{
  "description": "The look of the Showcase website",
  "extends": "clay",
  "colors": {
    "ink": "#1E1B3A",
    "accent": "#6A4BEA",
    "paper": "#F7F5FF"
  },
  "fonts": {
    "display": "Outfit",
    "text": "DM Sans",
    "mono": "JetBrains Mono"
  },
  "backdrop": ["#BBA9F7", "#DDD4FE", "#F7F5FF"],
  "radius": 0.06
}
Use it
{ "url": "http://localhost:3000", "theme": "lavender" }
The whole file Make your own

From an empty folder to a first video.

Ten steps, each with the command to type and what you should see. Every tool in the pipeline is free.

Start the guide Read the docs