Nautidesk React UI

A collection of reusable React components used in Nautidesk web projects.

Installation

npm install @ntdsk/react-ui
pnpm install @ntdsk/react-ui
yarn add @ntdsk/react-ui

CSS Import (Required)

Important: You must import the CSS file in your main application file:

// In your main.tsx, App.tsx, or index.tsx
import '@ntdsk/react-ui/dist/index.css';

Dependencies

npm install react react-dom

Optional Dependencies

Some components require optional dependencies. See OPTIONAL_DEPENDENCIES.md for details.

For Controlled Input Components:

npm install react-hook-form

For Moment utilities:

npm install moment

Usage

import { AppButton, AppModal, AppIcon, AppSidebar } from '@ntdsk/react-ui';

function MyComponent() {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    <div>
      <AppButton label="Click me" onClick={() => console.log('clicked')} />
      <AppIcon icon="mdi:home" />
    </div>
  );
}

Available Components

App Components

• AppAlert - Alert/notification component
• AppButton - Customizable button component
• AppDeleteWarning - Delete confirmation component
• AppDropdownButton - Dropdown button component
• AppEmptyImage - Empty state image component
• AppHelperModal - Helper modal component
• AppIcon - Icon component (uses Iconify)
• AppLoadingIcon - Loading spinner component
• AppMenuDrop - Menu dropdown component
• AppModal - Modal dialog component
• AppPageLoader - Page loading component
• AppPagination - Pagination component
• AppRipple - Ripple effect component
• AppSidebar - Sidebar menu component
• AppStepper - Stepper/wizard component
• AppTable - Data table component
• AppTabs - Tabs component
• AppTag - Tag/badge component

Hooks

• useMoment - Moment.js utility hook

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch mode for development
npm run dev

License

ISC

Contributing

Please read the contributing guidelines before submitting PRs.