# Shadcn autocomponents 

The Shadcn autocomponents are a set of components that are made using the Shadcn design system and are designed to be used in web apps. These components have the base autocomponent props and the Shadcn design system component overrides.

For more information on the autocomponents, see the [@gadgetinc/react/auto](https://docs.gadget.dev/reference/react/auto) references.

## Usage 

Within a Gadget app made with the web template, import Shadcn autocomponents from the `web/components/auto.ts` file:

```tsx
import { AutoForm, AutoTable, AutoInput, AutoSubmit } from "../components/auto";
```

For example, to use the `AutoForm` component:

```tsx
import { AutoForm, AutoInput, AutoSubmit } from "../components/auto";
import { api } from "../api";

export default function () {
  return (
    <AutoForm action={api.widget.create}>
      <AutoInput field="name" />
      <AutoSubmit />
    </AutoForm>
  );
}
```

## Customization 

You can fully customize the base components used to create the Shadcn autocomponents. In the `web/components/ui/` folder, there is a collection of component files that are used to create the autocomponents, and these can be easily modified to change the look of the autocomponents.

For example, the default `Button` component has variants with different styles, and to to change those styles, the original `web/components/ui/button.tsx` file can be modified.

```tsx
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 shadow",
  {
    variants: {
      variant: {
        // Colors have been changed to black and white
        primary: "bg-black text-white hover:bg-black/90",
        secondary: "bg-gray-200 text-black hover:bg-gray-300",
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9",
      },
    },
    defaultVariants: {
      variant: "primary",
      size: "default",
    },
  }
);

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "button";
  return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
});
Button.displayName = "Button";

export { Button, buttonVariants };
```

Now, all buttons used in autocomponents will be made with the customized component. Now when using an autocomponent that uses a button such as `<AutoSubmit />`, the button will now look like this:

```tsx
import { AutoForm, AutoButton } from "../components/auto";
import { api } from "../api";

export default function () {
  return (
    <AutoForm action={api.widget.create}>
      <AutoInput field="name" />
      <AutoSubmit>Primary</AutoSubmit>
    </AutoForm>
  );
}
```