Skip to content

allow inline theme in registry #7488

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

thibaultleouay
Copy link
Contributor

When I'm defining a registry with a theme like this :

{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "runreal",
  "homepage": "https://runreal.dev",
  "items": [
    {
      "name": "corner",
      "type": "registry:component",
      "title": "Fancy Corner",
      "description": "runreal Fancy Corner for Button",
      "dependencies": ["class-variance-authority"],
      "registryDependencies": [
        "http://localhost/r/runreal-theme.json"
      ],
      "files": [
        {
          "path": "registry/components/corner.tsx",
          "type": "registry:component"
        }
      ]
    },
   
    {
      "name": "runreal-theme",
      "type": "registry:theme",
      "description": "runreal Theme",
      "cssVars": {
        "theme": {
          "color-gray-50": "oklch(0.98 0 0)",
          "color-gray-100": "oklch(0.96 0 0)",
          "color-gray-200": "oklch(0.92 0 0)",
          "color-gray-300": "oklch(0.86 0 0)",
          "color-gray-400": "oklch(0.78 0 0)",
          "color-gray-500": "oklch(0.75 0 0)",
          "color-gray-600": "oklch(0.57 0 0)",
          "color-gray-700": "oklch(0.39 0 0)",
          "color-gray-800": "oklch(0.29 0 0)",
          "color-gray-900": "oklch(0.2 0 0)",

          "in-quad": "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
          "in-cubic": "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
          "in-quart": "cubic-bezier(0.895, 0.03, 0.685, 0.22)",
          "in-quint": "cubic-bezier(0.755, 0.05, 0.855, 0.06)",
          "in-expo": "cubic-bezier(0.95, 0.05, 0.795, 0.035)",
          "in-circ": "cubic-bezier(0.6, 0.04, 0.98, 0.335)",
          "out-quad": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
          "out-cubic": "cubic-bezier(0.215, 0.61, 0.355, 1)",
          "out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
          "out-quint": "cubic-bezier(0.23, 1, 0.32, 1)",
          "out-expo": "cubic-bezier(0.19, 1, 0.22, 1)",
          "out-circ": "cubic-bezier(0.075, 0.82, 0.165, 1)",
          "in-out-quad": "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
          "in-out-cubic": "cubic-bezier(0.645, 0.045, 0.355, 1)",
          "in-out-quart": "cubic-bezier(0.77, 0, 0.175, 1)",
          "in-out-quint": "cubic-bezier(0.86, 0, 0.07, 1)",
          "in-out-expo": "cubic-bezier(1, 0, 0, 1)",
          "in-out-circ": "cubic-bezier(0.785, 0.135, 0.15, 0.86)",
          "inset-shadow": "0px 0px 16px 0px rgba(255, 255, 255, 0.05) inset",
          "animate-shimmer": "shimmer 20s linear infinite"
        }
      },
      "css": {
        "@keyframes shimmer": {
          "0%": {
            "transform": "translateX(-100%)",
            "background-position": "100% 0"
          },
          "100%": {
            "transform": "translateX(100%)",
            "background-position": "-100% 0"
          }
        }
      }
    }
  ]
}

When building a registry, the registry:theme was not generated, but I need it to apply style.
After this PR, the build command will also create a new file for the registry-theme.
(If I added my registry item to my files array, the content would have been added to content, and cssVar wouldn't be applied.)

Copy link

vercel bot commented May 28, 2025

@thibaultleouay is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

Copy link

vercel bot commented May 29, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
v4 ✅ Ready (Inspect) Visit Preview May 29, 2025 11:59am
1 Skipped Deployment
Name Status Preview Updated (UTC)
ui ⬜️ Ignored (Inspect) Visit Preview May 29, 2025 11:59am

@shadcn
Copy link
Collaborator

shadcn commented May 29, 2025

I'm +1 on this but would like to explore if there are other registry items that could use a non-optional files. I'm working on registry:add type which can add to existing files for eg.

Let me think.

(@thibaultleouay are you blocked by this? any workaround you can use for now?)

@shadcn shadcn added area: registry area: roadmap This looks great. We'll add it to the roadmap, review and merge. labels May 29, 2025
@shadcn shadcn self-assigned this May 29, 2025
@thibaultleouay
Copy link
Contributor Author

thibaultleouay commented May 29, 2025

The workaround is to add the same css Var to all the items

A lot of copy paste code

But theme item with the current registry is not working

@thibaultleouay
Copy link
Contributor Author

An other workaround is the following
I have theme in my registry components and before deploying it i'm copying it into my public folder

because it won't get build/package by the cli

pnpm registry:build  && cp ./registry/components/theme.json ./public/r/theme.json 

and in my components i have a registry dependencies pointing to this files

@shadcn
Copy link
Collaborator

shadcn commented May 29, 2025

what if the theme is its own registry item and you add it a registryDependency for the other items?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: registry area: roadmap This looks great. We'll add it to the roadmap, review and merge.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants