NextUI Dashboard Sample

The project is organized into a modular directory structure. Key directories include:

• components/: Contains UI components categorized by function:
  • accounts/: Account-related components.
  • charts/: Data visualization components.
  • breadcrumb/: Breadcrumb navigation.
  • home/: Home page specific components.
  • layout/: Layout wrappers and structures.
  • navbar/: Navigation bar components.
  • sidebar/: Sidebar navigation components.
  • table/: Table components.
  • styles/: Reusable styled components.
  • icons/: Icon assets.
  • hooks/: Custom React hooks.
• pages/: Next.js file-based routing entry points:
  • _app.tsx: The main application entry point.
  • index.tsx: The Home page.
  • accounts.tsx: The Accounts page.

To run this project locally, follow these steps:

1. Install dependencies: Use npm to install all required packages.
2. Start the development server: Run the development script to launch the application.
3. Access the app: Open your browser and navigate to https://localhost:3000.

npm install
npm run dev

The Home component serves as the main entrypoint for the dashboard application. It is a Next.js page component that renders the <Content /> component from ../components/home/content to display the dashboard's landing or main content area.

import Home from './pages/index';

// The Home component is the default export of the index page
// and renders the dashboard content.
<Home />

The Accounts component is a high-level page component used to display account-related information, including breadcrumbs, search functionality, action buttons (like Export and Add User), and a table of users. It is styled using a custom Flex component and integrates with @nextui-org/react components.

import { Accounts } from './components/accounts';

// Usage within a page
export default function Page() {
  return <Accounts />;
}