Skip to content

Structure

Folder Structure Overview

app

This directory contains the main application code, including React components, data files, entry points, routes, and styling.

components

Contains reusable React components used throughout the application, organized into various subdirectories based on their functionality or purpose.

  • charts: Components related to data visualization charts.
  • notifications: Components related to notifications page.
  • sidebar: Components for the sidebar navigation menu.
  • ui: Shadcn related components such as buttons, forms, and tooltips.

data

Stores data files used within the application, such as activity logs, contacts, playlists, and timeline events.

lib

Contains utility functions and server-side logic used by the application.

routes

Defines the routing structure of the application, including all available routes and their corresponding components.

build

Contains the compiled JavaScript files, along with metafiles generated during the build process.

docs

Stores documentation files for the project, including guides, component documentation, and credits.

public

Stores publicly accessible assets such as images, avatars, and favicon files.

Other Files and Directories:

  • remix.config.js: Configuration file for the Remix framework.
  • tailwind.config.ts: Configuration file for Tailwind CSS.
  • tsconfig.json and tsconfig.scripts.json: TypeScript configuration files.
  • package.json: Metadata and dependencies for the project.
  • mkdocs.yml: Configuration file for the MkDocs static site generator.
  • remix.env.d.ts: TypeScript declaration file for environment variables.
.
├── README.md
├── app
│   ├── components
│   │   ├── album-artwork.tsx
│   │   ├── breadcrumb.tsx
│   │   ├── charts
│   │   │   ├── area.tsx
│   │   │   ├── bar.tsx
│   │   │   ├── composed.tsx
│   │   │   ├── line.tsx
│   │   │   ├── pie.tsx
│   │   │   ├── radar.tsx
│   │   │   ├── radial.tsx
│   │   │   ├── scatter.tsx
│   │   │   └── treemap.tsx
│   │   ├── dashboard-table.tsx
│   │   ├── data-table-column-header.tsx
│   │   ├── data-table-faceted-filter.tsx
│   │   ├── data-table-pagination.tsx
│   │   ├── data-table-view-options.tsx
│   │   ├── data-table.tsx
│   │   ├── date-range-picker.tsx
│   │   ├── footer.tsx
│   │   ├── form-components.tsx
│   │   ├── header.tsx
│   │   ├── layout.tsx
│   │   ├── logo.tsx
│   │   ├── mail-list.tsx
│   │   ├── notifications
│   │   │   ├── columns.tsx
│   │   │   ├── data-table-row-actions.tsx
│   │   │   └── data-table-toolbar.tsx
│   │   ├── notifications.tsx
│   │   ├── podcast-empty-placeholder.tsx
│   │   ├── search-bar.tsx
│   │   ├── shortcuts.tsx
│   │   ├── sidebar
│   │   │   ├── anchor.tsx
│   │   │   ├── helpers.ts
│   │   │   ├── list.tsx
│   │   │   └── menu.tsx
│   │   ├── sidebar-nav.tsx
│   │   ├── table
│   │   │   ├── columns.tsx
│   │   │   ├── data-table-row-actions.tsx
│   │   │   └── data-table-toolbar.tsx
│   │   ├── team-switcher.tsx
│   │   ├── ui
│   │   │   ├── accordion.tsx
│   │   │   ├── alert-dialog.tsx
│   │   │   ├── alert.tsx
│   │   │   ├── aspect-ratio.tsx
│   │   │   ├── avatar.tsx
│   │   │   ├── badge.tsx
│   │   │   ├── breadcrumb.tsx
│   │   │   ├── button.tsx
│   │   │   ├── calendar.tsx
│   │   │   ├── card.tsx
│   │   │   ├── carousel.tsx
│   │   │   ├── checkbox.tsx
│   │   │   ├── collapsible.tsx
│   │   │   ├── command.tsx
│   │   │   ├── context-menu.tsx
│   │   │   ├── dialog.tsx
│   │   │   ├── drawer.tsx
│   │   │   ├── dropdown-menu.tsx
│   │   │   ├── form.tsx
│   │   │   ├── hover-card.tsx
│   │   │   ├── input-otp.tsx
│   │   │   ├── input.tsx
│   │   │   ├── label.tsx
│   │   │   ├── menubar.tsx
│   │   │   ├── navigation-menu.tsx
│   │   │   ├── pagination.tsx
│   │   │   ├── popover.tsx
│   │   │   ├── progress.tsx
│   │   │   ├── radio-group.tsx
│   │   │   ├── resizable.tsx
│   │   │   ├── scroll-area.tsx
│   │   │   ├── select.tsx
│   │   │   ├── separator.tsx
│   │   │   ├── sheet.tsx
│   │   │   ├── skeleton.tsx
│   │   │   ├── slider.tsx
│   │   │   ├── sonner.tsx
│   │   │   ├── switch.tsx
│   │   │   ├── table.tsx
│   │   │   ├── tabs.tsx
│   │   │   ├── textarea.tsx
│   │   │   ├── toast.tsx
│   │   │   ├── toaster.tsx
│   │   │   ├── toggle-group.tsx
│   │   │   ├── toggle.tsx
│   │   │   ├── tooltip.tsx
│   │   │   └── use-toast.ts
│   │   └── widgets
│   │       ├── image-stat.tsx
│   │       ├── post.tsx
│   │       └── profile.tsx
│   ├── data
│   │   ├── activity.ts
│   │   ├── albums.ts
│   │   ├── calendar.ts
│   │   ├── chat.ts
│   │   ├── contacts.ts
│   │   ├── data.tsx
│   │   ├── email.ts
│   │   ├── faq.ts
│   │   ├── invoice.ts
│   │   ├── logs.tsx
│   │   ├── notifications.ts
│   │   ├── playlists.ts
│   │   ├── pricing.ts
│   │   ├── schema.ts
│   │   ├── tasks.ts
│   │   └── timeline.ts
│   ├── entry.client.tsx
│   ├── entry.server.tsx
│   ├── form.tsx
│   ├── lib
│   │   ├── form-action.server.ts
│   │   ├── fs.server.ts
│   │   ├── mdx.server.ts
│   │   └── utils.ts
│   ├── root.tsx
│   ├── routes
│   │   ├── _index.tsx
│   │   ├── coming-soon.tsx
│   │   ├── dashboard._index.tsx
│   │   ├── dashboard.ai.tsx
│   │   ├── dashboard.blank.tsx
│   │   ├── dashboard.calendar.tsx
│   │   ├── dashboard.cards.tsx
│   │   ├── dashboard.charts.tsx
│   │   ├── dashboard.faq.tsx
│   │   ├── dashboard.invoice.tsx
│   │   ├── dashboard.map.tsx
│   │   ├── dashboard.messages.$messageId.tsx
│   │   ├── dashboard.messages._index.tsx
│   │   ├── dashboard.messages.tsx
│   │   ├── dashboard.music.tsx
│   │   ├── dashboard.notifications.tsx
│   │   ├── dashboard.pricing.tsx
│   │   ├── dashboard.settings._index.tsx
│   │   ├── dashboard.settings.account.tsx
│   │   ├── dashboard.settings.appearance.tsx
│   │   ├── dashboard.settings.display.tsx
│   │   ├── dashboard.settings.notifications.tsx
│   │   ├── dashboard.settings.tsx
│   │   ├── dashboard.social.tsx
│   │   ├── dashboard.tasks.tsx
│   │   ├── dashboard.timeline.tsx
│   │   ├── dashboard.tsx
│   │   ├── landing.tsx
│   │   ├── lockscreen.tsx
│   │   ├── maintenance.tsx
│   │   ├── otp.tsx
│   │   ├── recover.tsx
│   │   ├── register.tsx
│   │   ├── signin.tsx
│   │   ├── sso.tsx
│   │   └── success.tsx
│   └── tailwind.css
├── build
│   ├── index.js
│   ├── index.js.map
│   ├── metafile.css.json
│   ├── metafile.js.json
│   ├── metafile.server.json
│   └── version.txt
├── bun.lockb
├── components.json
├── docs
│   ├── components.md
│   ├── credits.md
│   ├── getting-started.md
│   ├── helpers.md
│   ├── icons.md
│   ├── index.md
│   ├── overrides
│   │   └── partials
│   │       └── announce.html
│   ├── routes.md
│   └── translation.md
├── mkdocs.yml
├── package.json
├── public
│   ├── avatars
│   │   ├── 0.svg
│   │   ├── 1.svg
│   │   ├── 2.svg
│   │   ├── 3.svg
│   │   ├── 4.svg
│   │   └── 5.svg
│   ├── favicon.ico
│   └── images
│       ├── android-chrome-192x192.png
│       ├── android-chrome-512x512.png
│       ├── apple-touch-icon.png
│       ├── avatar.jpg
│       ├── face1.jpg
│       ├── face2.jpg
│       ├── face3.jpg
│       ├── face4.jpg
│       ├── face5.jpg
│       ├── favicon-16x16.png
│       ├── favicon-32x32.png
│       ├── favicon.ico
│       ├── header.jpg
│       ├── logos
│       │   ├── next.png
│       │   ├── react.png
│       │   ├── swr.svg
│       │   ├── tailwindcss.svg
│       │   └── vercel.svg
│       ├── mstile-144x144.png
│       ├── mstile-150x150.png
│       ├── mstile-310x150.png
│       ├── mstile-310x310.png
│       ├── mstile-70x70.png
│       ├── safari-pinned-tab.svg
│       └── screenshots
│           ├── 1.png
│           ├── 2.png
│           ├── 3.png
│           └── item.jpg
├── remix.config.js
├── remix.env.d.ts
├── tailwind.config.ts
├── tsconfig.json
└── tsconfig.scripts.json