or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

admin-interface.mdauthentication.mdbuttons.mddetail-views.mdfields.mdforms.mdindex.mdinputs.mdlayout.mdlists.mdpreferences.mdtheme.md
tile.json

tessl/npm-ra-ui-materialui

UI Components for react-admin with Material UI styling and functionality

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/ra-ui-materialui@4.16.x

To install, run

npx @tessl/cli install tessl/npm-ra-ui-materialui@4.16.0

index.mddocs/

ra-ui-materialui

ra-ui-materialui provides comprehensive Material UI-based user interface components specifically designed for react-admin applications. It serves as the core UI layer offering form components, input fields, buttons, layout components, authentication interfaces, data display fields, list views, and theming capabilities with consistent Material Design styling.

Package Information

  • Package Name: ra-ui-materialui
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install ra-ui-materialui

Core Imports

import { AdminUI, Layout, SimpleForm, DataGrid, Button } from "ra-ui-materialui";

For CommonJS:

const { AdminUI, Layout, SimpleForm, DataGrid, Button } = require("ra-ui-materialui");

Basic Usage

import { AdminUI, Layout, SimpleForm, TextInput, Datagrid, TextField } from "ra-ui-materialui";

// Basic admin UI setup
const App = () => (
  <AdminUI layout={Layout}>
    {/* Admin content */}
  </AdminUI>
);

// Form with Material UI inputs
const UserForm = () => (
  <SimpleForm>
    <TextInput source="name" />
    <TextInput source="email" />
  </SimpleForm>
);

// Data list with Material UI styling
const UserList = () => (
  <Datagrid>
    <TextField source="name" />
    <TextField source="email" />
  </Datagrid>
);

Architecture

ra-ui-materialui is built around several key components:

  • Core UI Shell: AdminUI and AdminContext providing the foundational admin interface structure
  • Layout System: Responsive layout components with AppBar, Sidebar, and Menu for navigation
  • Form System: Comprehensive form components including SimpleForm, TabbedForm, and input components
  • Data Display: Field components for displaying various data types with proper formatting
  • List Management: Advanced list components with filtering, sorting, pagination, and bulk operations
  • Theme Integration: Full Material UI theme support with customizable themes

Capabilities

Admin Interface Foundation

Core admin interface components providing the foundational structure and context for react-admin applications.

function AdminUI(props: AdminUIProps): ReactElement;
function AdminContext(props: AdminContextProps): ReactElement;

interface AdminUIProps {
  layout?: ComponentType<LayoutProps>;
  theme?: Theme;
  children?: ReactNode;
}

interface AdminContextProps {
  dataProvider?: DataProvider;
  authProvider?: AuthProvider;
  i18nProvider?: I18nProvider;
  children?: ReactNode;
}

Admin Interface

Layout Components

Responsive layout system with navigation, theming, and user interface management for admin applications.

function Layout(props: LayoutProps): ReactElement;
function AppBar(props: AppBarProps): ReactElement;
function Sidebar(props: SidebarProps): ReactElement;
function Menu(props: MenuProps): ReactElement;

interface LayoutProps {
  children?: ReactNode;
  sidebar?: ComponentType<SidebarProps>;
  appBar?: ComponentType<AppBarProps>;
  menu?: ComponentType<MenuProps>;
}

Layout System

Authentication Components

Material UI-styled authentication components for login, logout, and user management.

function Login(props: LoginProps): ReactElement;
function LoginForm(props: LoginFormProps): ReactElement;
function Logout(props: LogoutProps): ReactElement;
function UserMenu(props: UserMenuProps): ReactElement;

interface LoginProps {
  theme?: Theme;
  backgroundImage?: string;
}

Authentication

Detail View Components

Page-level components for creating, editing, and displaying individual records with Material UI styling.

function Create<RecordType>(props: CreateProps<RecordType>): ReactElement;
function Edit<RecordType>(props: EditProps<RecordType>): ReactElement;
function Show<RecordType>(props: ShowProps<RecordType>): ReactElement;

interface CreateProps<RecordType> {
  actions?: ComponentType;
  aside?: ComponentType;
  component?: ComponentType;
  redirect?: string | false;
  resource?: string;
  title?: string | ComponentType;
  transform?: (data: any) => RecordType;
}

interface EditProps<RecordType> {
  actions?: ComponentType;
  aside?: ComponentType;
  component?: ComponentType;
  id?: Identifier;
  mutationMode?: 'pessimistic' | 'optimistic' | 'undoable';
  redirect?: string | false;
  resource?: string;
  title?: string | ComponentType;
  transform?: (data: any) => RecordType;
}

interface ShowProps<RecordType> {
  actions?: ComponentType;
  aside?: ComponentType;
  children?: ReactNode;
  component?: ComponentType;
  emptyWhileLoading?: boolean;
  id?: Identifier;
  resource?: string;
  title?: string | ComponentType;
}

Detail Views

Form Components

Comprehensive form system with Material UI styling for creating and editing data records.

function SimpleForm(props: SimpleFormProps): ReactElement;
function TabbedForm(props: TabbedFormProps): ReactElement;
function Toolbar(props: ToolbarProps): ReactElement;

interface SimpleFormProps {
  toolbar?: ComponentType<ToolbarProps>;
  children?: ReactNode;
  defaultValues?: Record<string, any>;
}

Forms

Input Components

Wide range of Material UI input components for data entry with validation and accessibility support.

function TextInput(props: TextInputProps): ReactElement;
function NumberInput(props: NumberInputProps): ReactElement;
function BooleanInput(props: BooleanInputProps): ReactElement;
function SelectInput(props: SelectInputProps): ReactElement;
function AutocompleteInput(props: AutocompleteInputProps): ReactElement;

interface TextInputProps {
  source: string;
  label?: string;
  helperText?: string;
  validate?: Function | Function[];
}

Input Components

Field Components

Data display components for showing various data types with proper formatting and styling.

function TextField(props: TextFieldProps): ReactElement;
function NumberField(props: NumberFieldProps): ReactElement;
function DateField(props: DateFieldProps): ReactElement;
function BooleanField(props: BooleanFieldProps): ReactElement;
function EmailField(props: EmailFieldProps): ReactElement;

interface TextFieldProps {
  source: string;
  label?: string;
  sortable?: boolean;
}

Field Components

Button Components

Comprehensive set of action buttons with Material UI styling for various admin operations.

function Button(props: ButtonProps): ReactElement;
function SaveButton(props: SaveButtonProps): ReactElement;
function DeleteButton(props: DeleteButtonProps): ReactElement;
function EditButton(props: EditButtonProps): ReactElement;
function CreateButton(props: CreateButtonProps): ReactElement;

interface ButtonProps {
  label?: string;
  variant?: 'text' | 'outlined' | 'contained';
  color?: 'primary' | 'secondary' | 'error';
  onClick?: () => void;
}

Buttons

List Components

Advanced list management with Material UI data grids, filtering, sorting, and pagination capabilities.

function List(props: ListProps): ReactElement;
function Datagrid(props: DatagridProps): ReactElement;
function SimpleList(props: SimpleListProps): ReactElement;
function Pagination(props: PaginationProps): ReactElement;

interface DatagridProps {
  children?: ReactNode;
  rowClick?: string | Function;
  bulkActionButtons?: ReactElement;
}

List Components

Theme System

Material UI theme integration with customizable themes and responsive design utilities.

const defaultTheme: Theme;
const nanoDarkTheme: Theme;
const nanoLightTheme: Theme;
const radiantDarkTheme: Theme;
const radiantLightTheme: Theme;

function createTheme(options?: ThemeOptions): Theme;
function ThemeProvider(props: ThemeProviderProps): ReactElement;

Theme System

Preferences Components

User configuration and customization components for making UI components configurable.

function Configurable(props: ConfigurableProps): ReactElement;
function Inspector(props: InspectorProps): ReactElement;
function InspectorButton(props: InspectorButtonProps): ReactElement;

interface ConfigurableProps {
  children: ReactNode;
  configurable?: boolean;
}

Preferences

Utility Components

Helper components and utilities for labeling, navigation, and common UI patterns.

function Labeled(props: LabeledProps): ReactElement;
function Link(props: LinkProps): ReactElement;

interface LabeledProps extends StackProps {
  children?: ReactNode;
  className?: string;
  fullWidth?: boolean;
  htmlFor?: string;
  isRequired?: boolean;
  label?: string | ReactElement | false;
  resource?: string;
  source?: string;
}

interface LinkProps extends MuiLinkProps {
  to?: string;
  onClick?: (event: MouseEvent) => void;
}

Types

type Identifier = string | number;

interface Record {
  id: Identifier;
  [key: string]: any;
}

interface Theme {
  palette: PaletteOptions;
  typography: TypographyOptions;
  spacing: SpacingOptions;
  breakpoints: BreakpointsOptions;
}

interface DataProvider {
  getList: (resource: string, params: GetListParams) => Promise<GetListResult>;
  getOne: (resource: string, params: GetOneParams) => Promise<GetOneResult>;
  create: (resource: string, params: CreateParams) => Promise<CreateResult>;
  update: (resource: string, params: UpdateParams) => Promise<UpdateResult>;
  delete: (resource: string, params: DeleteParams) => Promise<DeleteResult>;
}

interface AuthProvider {
  login: (params: any) => Promise<any>;
  logout: (params: any) => Promise<void | false | string>;
  checkAuth: (params: any) => Promise<void>;
  checkError: (error: any) => Promise<void>;
  getIdentity: () => Promise<UserIdentity>;
  getPermissions: (params: any) => Promise<any>;
}

interface I18nProvider {
  translate: (key: string, options?: any) => string;
  changeLocale: (locale: string) => Promise<void>;
  getLocale: () => string;
  getMessages: () => any;
}

interface UserIdentity {
  id: string | number;
  fullName?: string;
  avatar?: string;
  email?: string;
  [key: string]: any;
}

interface SxProps {
  [key: string]: any;
}

type ComponentType<P = {}> = React.ComponentType<P>;
type ReactElement = React.ReactElement;
type ReactNode = React.ReactNode;
type MouseEvent = React.MouseEvent;
type FormEvent = React.FormEvent;

interface StackProps {
  children?: ReactNode;
  direction?: 'row' | 'column';
  spacing?: number;
  alignItems?: string;
  justifyContent?: string;
  sx?: SxProps;
}

interface MuiLinkProps {
  children?: ReactNode;
  href?: string;
  target?: string;
  rel?: string;
  className?: string;
  sx?: SxProps;
}

interface HtmlHTMLAttributes<T> {
  className?: string;
  id?: string;
  style?: React.CSSProperties;
  [key: string]: any;
}