Gadget framework

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 references.

Usage

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

React

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

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

For example, to use the AutoForm component:

React

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> ); }

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.

web/components/ui/button.jsx

React

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 };

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:

React

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> ); }

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> ); }

A black button with white text.

Was this page helpful?