Admin One - React Tailwind 3 dashboard template with dark mode

Premium

Admin One

Tailwind React

UpdatedApril 6, 2023

React Tailwind 3.x dashboard template with dark mode
TypeScript with Next.js

Tailwind 3.x
React
TypeScript
Next.js
Dark mode

Multiple colors

Light and dark modes included

Admin One - React Tailwind 3 dashboard template with dark mode
Admin One - React Tailwind 3 dashboard template with dark mode
Admin One - React Tailwind 3 dashboard template with dark mode
+15 More…

About

React Tailwind 3.x admin dashboard template with dark mode. Built with Next.js and TypeScript

  • Built with TypeScript, React, Tailwind CSS 3 framework & Next.js
  • React Redux state library Info
  • Dark mode
  • Styled scrollbars
  • SPA with Next.js
  • Production CSS is only 40kb (or 75kb when compiled with all color variations)
  • Reusable components

This is a pre-release version. We'll align demo with the Vue verison shortly. You'll get an update for free 🤩

Updated on April 6, 2023

Package.json

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next export",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier '{components,pages,src,interfaces,hooks}/**/*.{tsx,ts,js}' --write"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.4",
    "@mdi/js": "^7.0.96",
    "@reduxjs/toolkit": "^1.8.5",
    "chart.js": "^3.9.1",
    "formik": "^2.2.9",
    "next": "^13.0.4",
    "numeral": "^2.0.6",
    "react": "^18.2.0",
    "react-chartjs-2": "^4.3.1",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.2",
    "swr": "^1.3.0"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.2",
    "@types/node": "18.7.16",
    "@types/numeral": "^2.0.2",
    "@types/react-redux": "^7.1.24",
    "@typescript-eslint/eslint-plugin": "^5.37.0",
    "@typescript-eslint/parser": "^5.37.0",
    "autoprefixer": "^10.4.0",
    "eslint": "^8.23.1",
    "eslint-config-next": "^13.0.4",
    "eslint-config-prettier": "^8.5.0",
    "postcss": "^8.4.4",
    "postcss-import": "^14.1.0",
    "prettier": "^2.7.1",
    "tailwindcss": "^3.3.0",
    "typescript": "^4.8.3"
  }
}

File structure

└─ one-react-tailwind-premium
   ├─ .eslintrc.cjs
   ├─ LICENSE
   ├─ README.md
   ├─ assets
   │  ├─ mc-light-bg.svg
   │  └─ visa-blue.svg
   ├─ components
   │  └─ UpdateMark
   ├─ package-lock.json
   ├─ package.json
   ├─ postcss.config.js
   ├─ prettier.config.js
   ├─ public
   │  ├─ data-sources
   │  │  ├─ clients.json
   │  │  └─ history.json
   │  └─ favicon.png
   ├─ src
   │  ├─ colors.ts
   │  ├─ colorsPremium.js
   │  ├─ components
   │  │  ├─ AsideMenu.tsx
   │  │  ├─ AsideMenuItem.tsx
   │  │  ├─ AsideMenuLayer.tsx
   │  │  ├─ AsideMenuList.tsx
   │  │  ├─ BaseButton.tsx
   │  │  ├─ BaseButtons.tsx
   │  │  ├─ BaseDivider.tsx
   │  │  ├─ BaseIcon.tsx
   │  │  ├─ CardBox.tsx
   │  │  ├─ CardBoxClient.tsx
   │  │  ├─ CardBoxComponentBody.tsx
   │  │  ├─ CardBoxComponentEmpty.tsx
   │  │  ├─ CardBoxComponentFooter.tsx
   │  │  ├─ CardBoxComponentTitle.tsx
   │  │  ├─ CardBoxModal.tsx
   │  │  ├─ CardBoxTransaction.tsx
   │  │  ├─ CardBoxWidget.tsx
   │  │  ├─ ChartLineSample
   │  │  │  ├─ config.ts
   │  │  │  └─ index.tsx
   │  │  ├─ FooterBar.tsx
   │  │  ├─ FormCheckRadio.tsx
   │  │  ├─ FormCheckRadioGroup.tsx
   │  │  ├─ FormField.tsx
   │  │  ├─ FormFilePicker.tsx
   │  │  ├─ IconRounded.tsx
   │  │  ├─ JustboilLogo
   │  │  │  ├─ index.tsx
   │  │  │  └─ logoPath.js
   │  │  ├─ NavBar.tsx
   │  │  ├─ NavBarItem.tsx
   │  │  ├─ NavBarItemPlain.tsx
   │  │  ├─ NavBarMenuList.tsx
   │  │  ├─ NotificationBar.tsx
   │  │  ├─ NumberDynamic.tsx
   │  │  ├─ OverlayLayer.tsx
   │  │  ├─ PillTag.tsx
   │  │  ├─ PillTagPlain.tsx
   │  │  ├─ PillTagTrend.tsx
   │  │  ├─ SectionBanner.tsx
   │  │  ├─ SectionBannerStarOnGitHub.tsx
   │  │  ├─ SectionFullScreen.tsx
   │  │  ├─ SectionMain.tsx
   │  │  ├─ SectionTitle.tsx
   │  │  ├─ SectionTitleLineWithButton.tsx
   │  │  ├─ TableSampleClients.tsx
   │  │  ├─ UserAvatar.tsx
   │  │  ├─ UserAvatarCurrentUser.tsx
   │  │  └─ UserCard.tsx
   │  ├─ componentsPremium
   │  │  ├─ AsideMenu.tsx
   │  │  ├─ AsideMenuItem.tsx
   │  │  ├─ AsideMenuLayer.tsx
   │  │  ├─ AsideMenuList.tsx
   │  │  ├─ ButtonMenu.tsx
   │  │  ├─ ButtonTextLink.tsx
   │  │  ├─ CardBoxAmountItem.tsx
   │  │  ├─ CardBoxBillingItem.tsx
   │  │  ├─ CardBoxModal.tsx
   │  │  ├─ CardBoxPaymentMethod.tsx
   │  │  ├─ CardBoxPricing.tsx
   │  │  ├─ CardBoxProduct.tsx
   │  │  ├─ CreditCardLogo.tsx
   │  │  ├─ FormControl.tsx
   │  │  ├─ FormControlIcon.tsx
   │  │  ├─ FormControlListbox.tsx
   │  │  ├─ FormField.tsx
   │  │  ├─ FormFieldHelp.tsx
   │  │  ├─ SectionBannerProfile.tsx
   │  │  ├─ SectionFormScreen.tsx
   │  │  ├─ SnackBar.tsx
   │  │  ├─ SnackBarItem.tsx
   │  │  ├─ TipTag.tsx
   │  │  ├─ UpdateMark.tsx
   │  │  ├─ UserAvatarCurrentUserWithUpload.tsx
   │  │  ├─ UserCard.tsx
   │  │  └─ UserCardProfileNumber.tsx
   │  ├─ config.ts
   │  ├─ css
   │  │  ├─ _checkbox-radio-switch.css
   │  │  ├─ _progress.css
   │  │  ├─ _scrollbars.css
   │  │  ├─ _table.css
   │  │  ├─ main.css
   │  │  └─ tailwind
   │  │     ├─ _base.css
   │  │     ├─ _components.css
   │  │     └─ _utilities.css
   │  ├─ hooks
   │  │  └─ sampleData.ts
   │  ├─ interfaces
   │  │  ├─ index.ts
   │  │  └─ premium.ts
   │  ├─ menuAside.ts
   │  ├─ menuNavBar.ts
   │  ├─ pages
   │  │  ├─ _app.tsx
   │  │  ├─ api
   │  │  │  └─ hello.js
   │  │  ├─ dashboard.tsx
   │  │  ├─ error.tsx
   │  │  ├─ forms.tsx
   │  │  ├─ index.tsx
   │  │  ├─ login.tsx
   │  │  ├─ premium
   │  │  │  ├─ pricing.tsx
   │  │  │  ├─ profile.tsx
   │  │  │  ├─ styles.tsx
   │  │  │  └─ ui.tsx
   │  │  ├─ profile.tsx
   │  │  ├─ responsive.tsx
   │  │  ├─ tables.tsx
   │  │  └─ ui.tsx
   │  ├─ sampleButtonMenuOptions.ts
   │  ├─ stores
   │  │  ├─ hooks.ts
   │  │  ├─ mainSlice.ts
   │  │  ├─ snackBarSlice.ts
   │  │  ├─ store.ts
   │  │  └─ styleSlice.ts
   │  └─ styles.ts
   ├─ tailwind.config.js
   └─ tsconfig.json

FAQ

Can I integrate this dashboard with backend of my choice?

Yes. You are free to use any backend with this dashboard.

Are your dashboards well-coded?

Feel free to check free admin dashboard version on GitHub

May I return the dashboard if I don't think I'm satisfied?

Yes, you can check a purchased item and request a refund within 24 hours (14 days on Extended license)

Can I buy Standard License and upgrade it to Extended later?

You can upgrade license whenever you want by just paying the difference.

Drop an email to [email protected]

What is the difference between free and premium dashboard versions?

Free items are simple dashboards with basic stuff. Premium versions are more advanced. Feel free to check the demos!

Do I have to keep your copyrights?

Free items are licensed under MIT, so you have to keep our copyrights. Premium items allow you to remove copyrights.

Can I use premium dashboard in an open-source project?

Yes, since you add our link to your Readme.md:

Built with JustBoil Admin One Tailwind React TypeScript - https://justboil.me/tailwind-admin-templates/react-dashboard/

I'm not required to pay VAT

Please fill your VAT ID at the invoice page, after your purchase is complete.

In case of any questions, please drop an e-mail to [email protected].

We'll automatically refund the VAT amount paid.

Buy now

Admin One - React Tailwind 3 dashboard template with dark mode

Updated on April 6, 2023

Free returns within 24 hours (14 days on Extended license)

Secure payment by Gumroad, Inc.

Free sample on GitHub

Get updates

when we add new
or update current templates