Installation
The Stevenoumi components, ready to copy into a Next.js or Astro project with Tailwind CSS v4 and shadcn/ui.
Every component is an item of the brand's shadcn registry. The CLI copies its code into your project, under components/brand/: you own it and can adapt it. Run the same command again to pull an update.
Prepare the project
A Next.js project (or Astro with React) with Tailwind CSS v4 and shadcn initialized.
npx shadcn@latest initAdd the theme
The tokens and the Tailwind theme land in styles/stevenoumi/.
npx shadcn@latest add https://brand.stevenoumi.com/r/stevenoumi-theme.jsonImport it right after Tailwind, and remove the color variables generated by shadcn init (the :root block, the .dark block and the @theme inline block): the brand theme replaces them, dark mode included.
@import "tailwindcss";
@import "../styles/stevenoumi/theme.css";
@layer base {
* { @apply border-border; }
body { @apply bg-background font-sans text-foreground antialiased; }
}Load the fonts
IBM Plex Sans for text, IBM Plex Sans Condensed for titles.
npm i @fontsource/ibm-plex-sans @fontsource/ibm-plex-sans-condensedimport "@fontsource/ibm-plex-sans/400.css"
import "@fontsource/ibm-plex-sans/500.css"
import "@fontsource/ibm-plex-sans/600.css"
import "@fontsource/ibm-plex-sans/700.css"
import "@fontsource/ibm-plex-sans-condensed/600.css"
import "@fontsource/ibm-plex-sans-condensed/700.css"Add components
One at a time, their dependencies come with them:
npx shadcn@latest add https://brand.stevenoumi.com/r/project-card.jsonOr all at once:
npx shadcn@latest add https://brand.stevenoumi.com/r/stevenoumi.jsonAstro
The components use no hooks: in Astro, with @astrojs/react, they render to static HTML with no JavaScript sent to the browser. Keep the same Tailwind v4 setup and the @/* alias, then use them in .astro files without any client: directive.