---
name: "@gymnopedies"
slug: "gymnopedies"
description: "A dark, serif, glow-leaning shadcn registry of read-only React components for blogs, essays, and long-form reading — inspired by Erik Satie's Gymnopedies. Ships 35 non-form shadcn primitives (all standard overlays, navigation, and data components) plus 5 bespoke blog components: Hero (full-bleed cover with lighting animation), Picture (grayscale/reveal figure), Content (article paragraph container), DateTime (date-fns formatted time), and Header Navigation (gradient glow header). Built with Tailwind CSS v4 and Base UI; Merriweather serif font. Use for: building editorial sites or personal blogs that want a moody, candlelit dark aesthetic out of the box."
category: "Personal/portfolio registry"
tags: ["aesthetic", "animation", "backgrounds", "blocks", "buttons", "cards", "charts", "cms", "dashboard", "design-system", "editor", "forms", "hooks", "loaders", "media", "mobile", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: "MIT"
author: "shoota"
website: "https://gymnopedies.shoota.work"
github: "https://github.com/shoota/gymnopedies"
registry: "https://gymnopedies.shoota.work/r/registry.json"
pro: false
pro_url: null
github_stars: 5
component_count: 49
generated_at: "2026-07-28T08:59:05.895Z"
---

# @gymnopedies

A dark, serif, glow-leaning shadcn registry of read-only React components for blogs, essays, and long-form reading — inspired by Erik Satie's Gymnopedies. Ships 35 non-form shadcn primitives (all standard overlays, navigation, and data components) plus 5 bespoke blog components: Hero (full-bleed cover with lighting animation), Picture (grayscale/reveal figure), Content (article paragraph container), DateTime (date-fns formatted time), and Header Navigation (gradient glow header). Built with Tailwind CSS v4 and Base UI; Merriweather serif font. Use for: building editorial sites or personal blogs that want a moody, candlelit dark aesthetic out of the box.

## Links

- Website: https://gymnopedies.shoota.work
- GitHub: https://github.com/shoota/gymnopedies
- Registry JSON: https://gymnopedies.shoota.work/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/gymnopedies
- This file: https://sh4dcn.vercel.app/md/gymnopedies.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://gymnopedies.shoota.work/r/registry.json
pnpm dlx shadcn@latest add https://gymnopedies.shoota.work/r/registry.json
bunx shadcn@latest add https://gymnopedies.shoota.work/r/registry.json
# clone the source repo
git clone https://github.com/shoota/gymnopedies.git
# fetch the raw registry index
curl -s https://gymnopedies.shoota.work/r/registry.json
```

## Components (49)

| name | type | description | install |
| --- | --- | --- | --- |
| utils | registry:lib | Class-name merging helper (clsx + tailwind-merge). | `npx shadcn@latest add https://gymnopedies.shoota.work/r/utils.json` |
| theme | registry:style | Dark, serif, glow-leaning theme tokens — the gymnopédies identity layer. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/theme.json` |
| accordion | registry:ui | Accordion — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/accordion.json` |
| alert | registry:ui | Alert — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/alert.json` |
| alert-dialog | registry:ui | Alert Dialog — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/alert-dialog.json` |
| aspect-ratio | registry:ui | Aspect Ratio — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/aspect-ratio.json` |
| avatar | registry:ui | Avatar — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/avatar.json` |
| badge | registry:ui | Badge — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/badge.json` |
| breadcrumb | registry:ui | Breadcrumb — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/breadcrumb.json` |
| button | registry:ui | Button — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/button.json` |
| card | registry:ui | Card — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/card.json` |
| carousel | registry:ui | Carousel — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/carousel.json` |
| chart | registry:ui | Chart — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/chart.json` |
| collapsible | registry:ui | Collapsible — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/collapsible.json` |
| command | registry:ui | Command — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/command.json` |
| context-menu | registry:ui | Context Menu — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/context-menu.json` |
| dialog | registry:ui | Dialog — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/dialog.json` |
| drawer | registry:ui | Drawer — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/drawer.json` |
| dropdown-menu | registry:ui | Dropdown Menu — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/dropdown-menu.json` |
| hover-card | registry:ui | Hover Card — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/hover-card.json` |
| input | registry:ui | Input — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/input.json` |
| input-group | registry:ui | Input Group — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/input-group.json` |
| menubar | registry:ui | Menubar — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/menubar.json` |
| navigation-menu | registry:ui | Navigation Menu — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/navigation-menu.json` |
| pagination | registry:ui | Pagination — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/pagination.json` |
| popover | registry:ui | Popover — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/popover.json` |
| progress | registry:ui | Progress — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/progress.json` |
| resizable | registry:ui | Resizable — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/resizable.json` |
| scroll-area | registry:ui | Scroll Area — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/scroll-area.json` |
| separator | registry:ui | Separator — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/separator.json` |
| sheet | registry:ui | Sheet — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/sheet.json` |
| sidebar | registry:ui | Sidebar — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/sidebar.json` |
| skeleton | registry:ui | Skeleton — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/skeleton.json` |
| sonner | registry:ui | Sonner — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/sonner.json` |
| table | registry:ui | Table — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/table.json` |
| tabs | registry:ui | Tabs — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/tabs.json` |
| textarea | registry:ui | Textarea — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/textarea.json` |
| toggle | registry:ui | Toggle — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/toggle.json` |
| toggle-group | registry:ui | Toggle Group — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/toggle-group.json` |
| tooltip | registry:ui | Tooltip — gymnopédies-themed shadcn primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/tooltip.json` |
| article | registry:component | Article — gymnopédies blog reading primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/article.json` |
| content | registry:component | Content — gymnopédies blog reading primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/content.json` |
| date-time | registry:component | Date Time — gymnopédies blog reading primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/date-time.json` |
| global-styles | registry:component | Global Styles — gymnopédies blog reading primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/global-styles.json` |
| header-navigation | registry:component | Header Navigation — gymnopédies blog reading primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/header-navigation.json` |
| hero | registry:component | Hero — gymnopédies blog reading primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/hero.json` |
| picture | registry:component | Picture — gymnopédies blog reading primitive. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/picture.json` |
| use-mobile | registry:hook | Use Mobile — gymnopédies hook. | `npx shadcn@latest add https://gymnopedies.shoota.work/r/use-mobile.json` |
| gymnopedies | registry:style | A dark, serif, glow-leaning shadcn registry preset for long-form reading experiences. Installs the theme tokens, every non-form shadcn primitive, and the bespo… | `npx shadcn@latest add https://gymnopedies.shoota.work/r/gymnopedies.json` |

## For AI agents

```text
You are adding components from @gymnopedies to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/gymnopedies.md) for the component list.
2. Fetch the machine-readable index: https://gymnopedies.shoota.work/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: gymnopedies).
```