Documentation

Getting Started

This guide will help you get started with Dashkit React! All the important stuff – compiling the source, file structure, build tools – is documented here, but should you have any questions, always feel free to reach out to support@goodthemes.co.

New & Extended Components

Dashkit React extends Bootstrap by not only building on top of its existing components, but also introducing entirely new components and plugins. The best way to get an overview of this is to run through the components page.

Dev Setup

To get started, you need to do the following:

  1. Make sure you have Node installed since Dashkit React uses npm to manage dependencies. If you don't, installing is quite easy, just visit the Node Downloads page and install it.
  2. Unzip your theme and open your command line, making sure your command line prompt is at the root of the unzipped theme directory.
  3. npm install --force: Open your command line to the root directory of your unzipped theme and run to install all of Dashkit's dependencies.

It's that simple! If you're not used to using terminal, don't worry, this is as advanced as it gets.

Compiling

Next.js is used to manage Dashkit React development. Open your command line to the root directory of the theme to use the following commands:

  • npm run dev: Starts the "development server" on port 3000. Any changes made to the source files will be compiled as soon as you save the file.
  • npm run build: Builds the application for production usage.

Please read the Next.js documentation for more info.

File Structure

  • 📁 components - Basic components
  • 📁 data - Sample data
  • 📁 helpers - Helper functions
  • 📁 modals - Modal and Offcanvas dialogs
  • 📁 pages - Pages
  • 📁 public - Publis assets
  • 📁 styles - SCSS source
  • 📁 widgets - Complex components
  • 📄 .gitignore - Hide all unnecessary files from Git
  • 📄 package.json - List of dependencies and npm information
  • 📄 package-lock.json - Describes the exact dependency tree that was generated
  • 📄 README.md - App info

Customizing SCSS

The best way to customize your app appearance is to use the source SCSS files. The 2 major benefits of this strategy are using variable overrides to easily customize app styles, plus you never have to touch Bootstrap or Dashkit's source, meaning future updates will be much, much, simpler. There are 2 provided files that make this strategy simple to implement:

  • user-variables.scss: This file can be used to override Bootstrap core and Dashkit variables for customizing elements that have been tied to variables.
  • user.scss: This file can be used for writing custom SCSS that will be compiled alongside Bootstrap and Dashkit's core files.