iTranslated by AI
Created a shadcn/ui theme for dim-light reading
About @gymnopedies
The shadcn/ui-based UI I created is called gymnopedies. The name is taken directly from the compositions by Erik Satie.
gymnopedies logo
I have created an official sample in the repository that mimics a blog. Please feel free to try it out.
Installation
Following the Quick Start will launch a Vite App locally and prepare it to use the gymnopedies UI.
$ npx shadcn@latest init -b base -t vite -p nova
$ npx shadcn@latest add @gymnopedies/gymnopedies
If you already have a project using shadcn, you can also use the shadcn cli to install components individually.
# only theme
$ npx shadcn@latest add @gymnopedies/theme
# install specific component
$ npx shadcn@latest add @gymnopedies/hero
$ npx shadcn@latest add @gymnopedies/article
You can see what components are available on the Storybook site.
Concept
Busy days at work.
I cherish the time spent reading in the quiet dead of night after my family has fallen asleep. Those brief moments spent listening to quiet music, with a glass of whiskey in hand, reading by nothing but the light of the display.
I created this with the desire to make a gentle, quiet UI that accompanies that time.
In principle, I have placed "UI for reading materials" at the center of the experience, with the intention of using it for blogs and similar platforms. Therefore, I have tuned it to prioritize "immersion" over mere "readability." Since blogs often generate HTML from Markdown, I have included global styles to support that as well.
Also, I have not created components for form input elements at this time. It might look decent by applying the global styles (though this is unverified).
shadcn/ui Theme
Motivation
I build my blog using an SSG based on Next.js.
When I first introduced it, I changed the design using a React UI library, but I wanted to build my own UI. Initially, I built a UI library for the blog from scratch using emotion, but it takes time to create and maintain various components in my spare time.
So, I rewrote everything into a design system based on shadcn/ui, using the design tokens I had created for this UI library.
The rewriting process was not that difficult. Since I already had the UI design concept and the tokens for it, I repeatedly checked the details in Storybook while negotiating the UI design of shadcn/ui with Claude Code.
Registry Registration
It is possible to officially register design systems based on shadcn.
If you are not officially registered, you need to host a JSON file that the shadcn CLI can identify and provide that URL, but if you are officially registered, it will be recognized by the CLI by name.
- npx shadcn@latest add https://gymnopedies.shoota.work/r/gymnopedies.json
+ npx shadcn@latest add @gymnopedies/gymnopedies
There are several preparations required for registry registration.
- Prepare an SVG icon (code) for display on the official website
- Edit registries.json to include icons and descriptions
- Commit the execution results of
pnpm registry:build
The SVG icon was particularly difficult. I hadn't created a concrete logo image when I was coding the components, so I drew it from scratch, converted it to SVG in Figma, and made adjustments. It had been a long time since I last edited vectors using Bezier curves.
Also, the icons need to be able to display using shadcn's CSS vars. This is to ensure they can be displayed in accordance with the tone of the official site's theme, as it supports dark themes.
The Ease of Building a shadcn Theme
This time, I mainly built a UI I wanted based on shadcn, officially registered it, and made it public, but if you just want to create your own theme, you can realize it with just one hosting server (though you will need to acquire a domain).
Vercel, Netlify, AWS S3, or Cloudflare Pages should be fine.
By combining various design tokens, it seems like you could easily give your website a makeover with npx shadcn add.
Discussion