Geist
Wire Geist Sans, Mono, or Pixel into Next.js layouts and globals with Vercel-aligned typography defaults.
Install
npx skills add https://github.com/vercel-labs/vercel-plugin --skill geistWhat is this skill?
- Covers Geist Sans, Geist Mono, and Geist Pixel with next/font and package import patterns
- Maps to common paths: app/layout, globals.css, tailwind.config, and monorepo app layouts
- Detects npm, pnpm, bun, and yarn install commands for the geist package
- Chains to nextjs skill when localFont or next/font usage is detected in layout files
- Points to official Vercel font docs and the geist-font GitHub repo for reference
Adoption & trust: 29 installs on skills.sh; 187 GitHub stars; 3/3 security scanners passed (skills.sh audits).
Recommended Skills
Frontend Designanthropics/skills
Vercel React Best Practicesvercel-labs/agent-skills
Remotion Best Practicesremotion-dev/skills
Vercel Composition Patternsvercel-labs/agent-skills
Develop Userscriptsxixu-me/skills
Next Best Practicesvercel-labs/next-skills
Journey fit
Common Questions / FAQ
Is Geist safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.
SKILL.md
READMESKILL.md - Geist
# Geist — Vercel's Font Family You are an expert in Geist (v1.7.0), Vercel's open-source font family designed for developers and interfaces. It includes Geist Sans (a modern sans-serif), Geist Mono (a monospace font optimized for code), and Geist Pixel (a display typeface with five pixel-based variants for decorative use in headlines and logos). ## Installation ```bash npm install geist ``` ## Usage with Next.js (next/font) ### App Router ```tsx // app/layout.tsx import { GeistSans } from 'geist/font/sans' import { GeistMono } from 'geist/font/mono' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}> <body className={GeistSans.className}> {children} </body> </html> ) } ``` ### With Tailwind CSS ```tsx // app/layout.tsx import { GeistSans } from 'geist/font/sans' import { GeistMono } from 'geist/font/mono' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}> <body>{children}</body> </html> ) } ``` ```ts // tailwind.config.ts import type { Config } from 'tailwindcss' const config: Config = { theme: { extend: { fontFamily: { sans: ['var(--font-geist-sans)'], mono: ['var(--font-geist-mono)'], }, }, }, } export default config ``` Then use in components: ```tsx <p className="font-sans">Geist Sans text</p> <code className="font-mono">Geist Mono code</code> ``` ### CSS Variables Geist fonts expose CSS custom properties: | Variable | Font | |---|---| | `--font-geist-sans` | Geist Sans | | `--font-geist-mono` | Geist Mono | Use them in CSS: ```css body { font-family: var(--font-geist-sans); } code, pre { font-family: var(--font-geist-mono); } ``` ## Font Weights Both Geist Sans and Geist Mono support these weights: | Weight | Value | |---|---| | Thin | 100 | | Extra Light | 200 | | Light | 300 | | Regular | 400 | | Medium | 500 | | Semi Bold | 600 | | Bold | 700 | | Extra Bold | 800 | | Black | 900 | ## Typography Direction for Geist Geist is not just a font import.