Custom component rendering not updating in Studio


I’m trying to register custom components by running my first test with the shadcn UI Button component. I can’t get the button to update visually when I change the variant input.

Some props update the button like disabled and asChild but the variant prop doesn’t update the button. I’ve attached a short clip to show what I mean.

Any help would be greatly appreciated!

Here is the relevant code from plasmic-init.ts. I’m in loader mode.

import { Button } from "./components/ui/button";

PLASMIC.registerComponent(Button, {
  name: "ShadcnButton",
  props: {
    children: {
      type: "slot",
      defaultValue: {
        type: "text",
        value: "Button",
      },
    },
    variant: {
      type: "choice",
      options: [
        "default",
        "primary",
        "secondary",
        "destructive",
        "outline",
        "ghost",
        "link",
      ],
      defaultValue: "default",
    },
    size: {
      type: "choice",
      options: ["default", "sm", "lg", "icon"],
      defaultValue: "default",
    },
    asChild: {
      type: "boolean",
      defaultValue: false,
    },
    disabled: "boolean",
  },
});

Hey @josh_wayne,

I believe you’re missing the global css styles from globals.css.

Can you create a _app.jsx file in your page folder similar to this?

import "../styles/globals.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

That was it! Thank you so much for your help.