Adding and Editing the Dashboard Component Provided By TUK

Photo by Carlos Muza on Unsplash

Hey everyone! How’s it going? For today, I have something very interesting planned. We have been looking at how to create landing pages using TUK. So, for today why don’t we look at how easily you can modify the individual components using TUK.

With TUK, you get access to over 350 components and 10 templates with over 50 screens. Developers no longer have to worry about writing the code from scratch. They can develop websites in a matter of minutes using TUK.

Now, there are a lot of great UI Kits out there, but my favorite one so far is TUK. Apart from the obvious benefits of saving me time and money, it provides accessible, responsive, and cross-browser compatible components. This means that the designs are all-inclusive. This is my favorite part of using TUK, I don’t have to worry about making individual components accessible, rather TUK takes care of that for me.

Visual Studio Code

So, let’s jump right into it, why don’t we since I have never been good at small talks anyway. The first thing you need to do is open your Visual Studio Code and create an Html and JS file.

Adding Tailwind CSS to your Code

To add Tailwind CSS to your Html file, visit the TUK website and go to the Documentation page. Scroll down to the Add Tailwind CSS via the CDN section. There you’ll be able to see the link provided, simply copy it and paste it into your Html file. I’m also attaching the link below:

<link href=”https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel=”stylesheet”>

Adding Dashboard to your website page

Now that we have taken care of the technicalities, we can add the components provided by TUK. So, to add the Dashboard, visit the explore page of the TUK website.

There you’ll be able to see over 350 components provided by TUK. Scroll to the web UI components. In the Master Layouts, click on the Boxed Layout component to view different variations provided by TUK.

You’ll have complete freedom to select the variation of your choice. Click on the show code option on the component you prefer and copy the Html and JS code in their respective files.

Making Changes

Now for the moment, we were waiting for. You can change the Html code to edit the component based on your needs.

Change the logo, items in the dashboard bar, the image of the user, and just go crazy with it. Change the text, the colors, and play with the code as much as you like. You can completely change the look of the dashboard or make minor changes, that depends upon your requirements.

Adding Components in the Dashboards

The Box Layout component is a Dashboard. Of course, different components go in the dashboard according to the type of dashboard.

You can add the components in the dashboard by pasting the Html code in the div tag. You can, of course, make changes in the component by editing the HTML code. And yes, it’s that simple.

Using the TUK for websites saves tremendous time. It allows me to focus on the functionality of the website without worrying about the design aspect. You can check their website at https://tuk.dev.com

Thanks for reading.