Components

Next-Admin exports a set of UI components which are, for most of those, extending Radix UI primitives. These components are available through the @premieroctet/next-admin/components import.

Button

The button element accepts all the base button tag attributes and extends it with the following:

BaseInput

The input component rendered in the Form component. It accepts all the base input tag attributes.

Switch

The Radix Switch component.

Select

The Radix Select component.

Checkbox

An implementation of the Radix Checkbox component. It accepts all the props of the Checkbox Root component, and the following:

Dropdown

The Radix Dropdown component.

Table

The Radix Table component.

Tooltip

The Radix Tooltip component.

Breadcrumbs

The Breadcrumb accepts the following options:

<Breadcrumb
  breadcrumbItems={[
    {
      href: "/admin/post",
      label: "Posts",
      icon: "BlogIcon",
      current: false,
    },
    {
      href: "/admin/post/batch-upload",
      label: "Batch Upload",
      current: true,
    },
  ]}
/>

Spinner

The Spinner component is used to display a loading spinner.

Inputs

The inputs used across next-admin are available to be used in custom pages. These components are available through the @premieroctet/next-admin/inputs import. Most expect to be wrapped within a FormDataProvider:

// pages/admin/coupons/batch-upload.tsx
import { FormDataProvider, FileWidget, useFormData } from "@premieroctet/next-admin/inputs";
 
const BatchUploadWidget = () => {
  const { setFormData } = useFormData();
  return <Widget
    name="address"
    onChange={(e) => {
      setFormData((old) => ({ ...old, address: e.target.value }));
    }}
  />
}
 
export default function BatchUploadPage() {
  return (
    // Wrap your page in a provider to enable
    // the fields to to plug into it
    <FormDataProvider>
      <BatchUploadWidget />
    </FormDataProvider>
  );
}

Components