DEV Community: Enoch Ndika

I created 9 free dashboard templates built with Tailwind for React, Next, Vue, Nuxt and Svelte.

Enoch Ndika — Wed, 21 Jul 2021 17:48:17 +0000

Background

By creating several dashboards for my professional use, I ended up with several dashboard templates. So I decided to make it open source because it would motivate me to create even more dashboards.

At the beginning I wanted to make them only for React but with time I was motivated to make them for Next.js, Vue.js, Nuxt and Svelte to reach more developers.

Presentation

I made a total of 9 dashboards and each dashboard has 5 templates.

React template
Next.js template
Vue template
Nuxt.js template
Svelte template

Features

i took advantage of Tailwind's flexibility to create free premium dashboard templates.

Support of the active route (styled by default).
Fully customizable and without external dependencies.
No vendor lock-in, you can export it and integrate it in your project.
Sidenav aligned left or right according to your preferences (on mobile).
A detailled documentation.

No vendor lock-in

Salvia-kit is created to solve a problem I often encountered when using dashboards owned by third party developers or companies. that is vendor lock-in.

These dashboards often contained many configurations with several scripts, which still did not allow to export them and integrate them easily into an existing project. Therefore, it was always necessary to use the repository provided by the owner of the dashboard.

This is what motivated me to create dashboards that can be easily integrated into existing projects with simple, readable code and documentation designed for developers.

Contributions

As English is not my native language, I can make some grammatical mistakes while writing all the 43 repositories. You can fix that by contributing to improve content.

If You'd like to add a new dashboard, please check out the Contribution Guide

Acknowledgements

Thanks to Vercel for sponsoring this project by allowing it to be deployed for free for the entire Salvia-kit Team.

Next.js, integrate React Context only in certain pages

Enoch Ndika — Thu, 06 May 2021 16:43:31 +0000

Next.js is one of the most popular and widely used React frameworks.

Using the Context API in Next.js is very simple but there are specific cases where you may need to wrap only certain pages by the provider.

To do this, create a new next project

npx create-next-app my-app

We are going to create a context that will increment and decrement a number.

Create a new folder components and inside create a new file named context.js then paste this code

import { createContext, useContext, useState, useCallback } from "react";

const Context = createContext({});

export const CountProvider = ({ children }) => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((prevState) => prevState + 1);
  }, [count]);

  const decrement = useCallback(() => {
    setCount((prevState) => prevState - 1);
  }, [count]);

  return (
    <Context.Provider value={{ count, increment, decrement }}>
      {children}
    </Context.Provider>
  );
};

export function useCount() {
  return useContext(Context);
}

the custom hook useCount() will allow us to use the values passed to the context provider.

In the _app.js file, add this new component

const Noop = ({ children }) => <>{children}</>;

Then in MyApp component which is exported by default, we will add a prop named provider which will be accessible in all pages and its value will be <Noop/>if no context provider is passed as a value.

Now the _app.js file will be like this

import "../styles/globals.css";

const Noop = ({ children }) => <>{children}</>;

function MyApp({ Component, pageProps }) {
  const ContextProvider = Component.provider || Noop;
  return (
    <ContextProvider>
      <Component {...pageProps} />
    </ContextProvider>
  );
}

export default MyApp;

We will consume the provider in the home page like this

import styles from "../styles/Home.module.css";
import { CountProvider, useCount } from "../components/context";

export default function Home() {
  const { increment, count, decrement } = useCount();
  return (
    <div className={styles.container}>
      <button onClick={increment}>Increment</button>
      <h1>{count}</h1>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

If you try it in the browser, you won't be able to increment or decrement a number because we don't have the provider as a prop in the page.

To make it work, add

Home.provider = CountProvider;

After reloading the page, you can increment and decrement the number.

Source code

I created a collection of UI Components for React built with Tailwind CSS

Enoch Ndika — Wed, 10 Mar 2021 21:41:56 +0000

I created a collection of UI Components for React built with Tailwind CSS containing over 20 components with over 50 variants.

You can just copy and paste the component you want to use.

The biggest disadvantage of using Tailwind is the risk of having too long classes that will make the code not readable enough.

As React is component-based, we can extract component logic with its classes and reuse them elsewhere which will result in more readable code with more components and less classes.

That's why I created this collection named Kimia-UI and it's fully customizable. If you are a Typescript lover, the full source code and all examples are written in Typescript so you won't worry about types.

The project is open to contributions and you can contribute by adding a component, improving accessibility or opening a new issue for a new component or idea.

Source Code

Components

Dark mode with Tailwindcss in Next.js

Enoch Ndika — Thu, 03 Dec 2020 18:46:58 +0000

Version 2.0 of tailwindcss brings several new features, including dark mode support making it easier than ever to dynamically modify your application when dark mode is enabled.

We will start by creating a new Next.js application

npx create-next-app dark-mode

Tailwindcss installation

yarn add -D tailwindcss postcss autoprefixer

and next-themes that will allow us to switch to dark mode

yarn add next-themes

Create a postcss.config.js file and paste the following configuration of postcss

module.exports = {
  plugins:{
    tailwindcss: {},
    autoprefixer: {}
  }
};

Then create a tailwindcss.config.js file and add the configuration below

module.exports = {
  darkMode: "class",
  purge: ["./components/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}"],
  theme: {},
  variants: {},
  plugins:[]
};

In this configuration, the change of theme will be done with the classes, which will facilitate integration with next-themes.

In the pages directory, create a new file _document.js and add the configuration below

import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body className="bg-white text-black dark:bg-black dark:text-white">
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

At the body level, we defined the global classNames configuration. When the theme will be by default, the text color will be black and the background color white. When the dark mode will be triggered, the text color will be white and the background color will be black. You can modify them as you want

You can delete the styles directory.

Then in the _app.js file in the pages directory, we will import ThemeProvider from next-themes and we will also import tailwind.css.

import 'tailwindcss/tailwind.css';
import { ThemeProvider } from "next-themes";

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

In the index.js file replace the initial content by this one

import Head from "next/head";

export default function Home() {
  return (
    <div className="text-center">
      <Head>
        <title>Dark mode with Tailwind and Next.js</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h1 className="text:2xl">Dark mode with Tailwind and Next-themes</h1>
    </div>
  );
}

then start the server with

yarn dev

To switch to dark mode we will need useTheme which will be imported from next-themes. useTheme() contains several properties but what will interest us is theme, which returns the active theme and setTheme which allows you to change the theme.

The advantage of this library is that it avoids flash when loading the page on the server side because ThemeProvider automatically injects a script in next/head to update the html element with the correct attributes before loading the rest of the page. This means that the page will not flash under any circumstances.

we will import useTheme in index.js

 import { useTheme } from "next-themes"

and we will extract theme and setTheme

 const { theme, setTheme } = useTheme();

As we are going to change the theme on client-side, we will first check if the component is mounted.

const [isMounted, setIsMounted] = useState(false);

and we will set isMounted to true when the component is mounted.

useEffect(() => {
    setIsMounted(true);
  }, []);

then we are going to define a function that will allow to change the theme by checking first if the component is mounted.

const switchTheme = () => {
    if (isMounted) {
      setTheme(theme === "light" ? "dark" : "light");
    }
};

the full code of index.js

import { useEffect, useState } from "react";
import Head from "next/head";
import { useTheme } from "next-themes";
export default function Home() {
  const [isMounted, setIsMounted] = useState(false);
  const { theme, setTheme } = useTheme();
useEffect(() => {
    setIsMounted(true);
  }, []);
const switchTheme = () => {
    if (isMounted) {
      setTheme(theme === "light" ? "dark" : "light");
    }
  };
return (
    <div className="text-center">
      <Head>
        <title>
          Dark mode with Tailwind and Next.js
        </title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h1 className="text:2xl">
       Dark mode with Tailwind and Next- themes
      </h1>
      <button onClick={switchTheme}>Change theme</button>
    </div>
  );
}

You can refresh the page and you won't see any flashes.

Know that you can also implement the dark mode without tailwindcss, just with the next-themes library . it can be implemented with styled-components, emotion or with css classes.

Demo

Source code