shadcn components import

[no-1ne]

There are so many awesome shadcn UI libraries https://github.com/birobirobiro/awesome-shadcn-ui and most of the are slowly supporting the shadcn registry structure,

if would be nice to provide all those as pre made components automatically..may be autogenerating the necessary schema treating shadcn elements as primitives

[olliethedev]

Thanks for the great suggestion.

Currently, I am focusing on the stability and flexibility of the UI builder for the next few releases.
But once that's done I will work on adding component packs with form components, framer motion wrapper components, react-email components, and others.

That being said, you should be able to add existing awesome shadcn component libraries by first calling shadcn@latest add ... and then calling the npx tsx lib/ui-builder/scripts/zod-gen.ts script. This will generate necessary schemas you can then add to the component-registry.tsx file.

[adirzoari]

@olliethedev, should the schema generator handle custom components as well?

For example, I have a CustomButton component imported from ui-kit:

import { CustomButton } from "ui-kit";

Here’s my Button component, which I built in my library:

/// <reference types="react" />
import { ButtonProps as PrimeButtonProps } from 'primereact/button';
import { ButtonVariant, ButtonType, ButtonSize } from './types';

export interface ButtonProps extends PrimeButtonProps {
    size?: ButtonSize;
    variant?: ButtonVariant;
    type?: ButtonType;
    icon?: string | React.ReactNode;
    disabled?: boolean;
    /**
     * data-testid for testing purposes.
     */
    'data-testid'?: string;
}

export declare const Button: ({
    size,
    variant,
    type,
    iconPos,
    disabled,
    icon,
    "data-testid": dataTestid,
    className,
    ...rest
}: ButtonProps) => .......

I’ve registered it in the component-registry like this:

const CustomComponentRegistry: ComponentRegistry = {
  CustomButton: {
    component: CybButton,
    schema: {
      // I expected the schema generator to automatically generate this
      // so I could just copy it here.
    },
    from: "ui-kit",
    fieldOverrides: {
      className: (layer) => classNameFieldOverrides(layer),
      children: (layer) => childrenFieldOverrides(layer),
    },
  },
};

However, when I run the command to generate schemas, I don’t see the CustomButton schema in the generated-schema.ts file.

Is the generator expected to support this use case? Or do I need to manually define schemas for custom components like CustomButton?