If you use shadcn/ui or BasecoatUI, you know the friction of manual theming. Mapping complex color schemes onto semantic CSS variables (--primary, --background) for light and dark modes is a major chore.

To automate this, I built base24-to-shadcn. It instantly translates any Base24 terminal configuration into ready-to-use Tailwind CSS tokens. In fact, the theme switcher right here on this blog is powered by this exact utility!

---

What is Base24?

Base24 is a popular ecosystem standard (built on top of Base16) used to define themes across terminal emulators and editors like Vim or Alacritty. It uses a structured 24-color YAML layout:

• base00–base07: Structural shades (backgrounds, borders, text, and comments).
• base08–base17: Standard and bright ANSI colors for code syntax.

Because Base24 explicitly isolates structural layers from accent colors, it maps beautifully onto the design tokens required by modern web frameworks.

---

Get Your Theme Instantly

You can integrate this setup into your workflow in two ways:

1. The Easy Way (Copy-Paste or AI)

Head over to base24css.so7o.app/gallery. Browse the pre-converted themes, copy-paste the CSS directly into your project, and you're done.

💡 AI Tip: Don't want to copy it manually? Just paste the URL of your favorite theme from the gallery straight into your AI assistant prompt and say: "Apply these shadcn variables to my globals.css"

2. The CLI Way

Convert a custom local Base24 YAML file directly in your terminal. Visit the project on GitHub: jan5o7o/base24-to-shadcn for details. The tool handles the heavy lifting, outputting contrast-validated CSS variables.