Frappe Style

The Inter dependency and shared global base and sidebar rules, layered on the Frappe Theme.

registry:style Registry JSON

Global CSS behavior

Inter typography and application surfaces

The style installs the Frappe Theme, loads the Inter dependency, applies the font and base colors, and defines shared sidebar states.

Inherited Inter Variable body text

Workspace

Overview

Active project

Content surface

The global rules apply border, outline, body, typography, and selected-navigation behavior.

Installation

pnpm dlx shadcn-svelte@latest add https://shadcn.cptckp.com/r/frappe-style.json

The CLI merges these global rules and their theme dependencies into your configured CSS entrypoint.

This item installs frappe-theme, then adds application-wide CSS behavior. Add @import '@fontsource-variable/inter'; to the consuming application's global Tailwind CSS entrypoint if it is not already present.

CSS rules

These rules are merged into the consuming project's configured Tailwind CSS entrypoint.

registry CSS

json

{
  "@layer base": {
    "*": {
      "border-color": "var(--color-border)",
      "outline-color": "color-mix(in oklab, var(--color-ring) 50%, transparent)"
    },
    "html": {
      "font-family": "var(--font-sans)"
    },
    "body": {
      "background-color": "var(--color-background)",
      "color": "var(--color-foreground)"
    }
  },
  "@layer components": {
    "[data-slot='sidebar-menu-button'][data-active='true']": {
      "box-shadow": "0 0 0 1px var(--sidebar-border), 0 1px 2px oklch(0 0 0 / 6%)"
    },
    "[data-slot='sidebar-menu-button'], [data-slot='sidebar-group-label']": {
      "font-size": "0.8125rem"
    }
  }
}

Files & dependencies

This item merges CSS rules and theme dependencies; no source files are copied into your project.

npm dependencies

@fontsource-variable/inter@^5.3.0

Registry dependencies

frappe-theme