### NPM Scripts for Development Workflow
Source: https://context7.com/creativetimofficial/soft-ui-dashboard/llms.txt
This section outlines essential NPM scripts for managing the Soft UI Dashboard project's development workflow. It includes commands for installing dependencies, starting a local development server, and compiling SASS files.
```bash
# Install dependencies
npm install
# Start development server (opens browser automatically)
npm start
# Equivalent to: npm run open-app
# Watch SASS files for changes and auto-compile
npm run watch
# Build CSS from SASS manually
# (Uses gulp if gulpfile.js is configured)
gulp sass
```
--------------------------------
### Install Project Dependencies with npm
Source: https://github.com/creativetimofficial/soft-ui-dashboard/blob/main/README.md
This command installs the necessary local dependencies for the Soft UI Dashboard project. Ensure Node.js is installed before running this command.
```bash
npm install
```
--------------------------------
### Configure Typography and Spacing with SCSS
Source: https://context7.com/creativetimofficial/soft-ui-dashboard/llms.txt
Defines font families, sizes, and a custom spacing scale using SCSS variables and maps. This allows for consistent typography and spacing across the project. It also includes an example of a custom heading style.
```scss
// Font configuration
$font-family-base: 'Inter', sans-serif;
$font-color: $gray-500;
$headings-color: $gray-800;
// Spacing scale (used with utility classes like mt-3, p-4, etc.)
// Override Bootstrap's default spacing if needed
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25, // 0.25rem
2: $spacer * .5, // 0.5rem
3: $spacer, // 1rem
4: $spacer * 1.5, // 1.5rem
5: $spacer * 3, // 3rem
);
// Custom typography example
.custom-heading {
font-family: $font-family-base;
color: $headings-color;
margin-bottom: map-get($spacers, 3);
}
```
--------------------------------
### Define Gray Scale and Neutrals with SCSS
Source: https://context7.com/creativetimofficial/soft-ui-dashboard/llms.txt
Establishes a comprehensive gray scale color palette for backgrounds, borders, and text elements. This SCSS code provides reusable color variables for consistent theming. It includes a usage example for a card component.
```scss
// Gray scale palette
$white: #fff;
$gray-50: #fafafa;
$gray-100: #f4f4f5; // Light backgrounds
$gray-200: #e3e3e7; // Borders, dividers
$gray-300: #d4d4d8;
$gray-400: #a1a1aa;
$gray-500: #71717a; // Body text
$gray-600: #52525b;
$gray-700: #3f3f46;
$gray-800: #27272a; // Headings
$gray-900: #18181b;
$gray-950: #09090b;
$black: #000;
// Usage example
.card {
background: $white;
border: 1px solid $gray-200;
.card-title {
color: $gray-800;
}
.card-text {
color: $gray-500;
}
}
```
--------------------------------
### SASS: Color System Configuration Variables
Source: https://context7.com/creativetimofficial/soft-ui-dashboard/llms.txt
Defines the primary color palette and theme color assignments using SASS variables. These variables are intended to be customized in `assets/scss/soft-ui-dashboard/_variables.scss` to alter the dashboard's appearance. The example demonstrates custom usage in SCSS for elements like cards.
```scss
// Primary color palette - modify in assets/scss/soft-ui-dashboard/_variables.scss
$blue: #0ea5e9;
$indigo: #6366f1;
$purple: #a855f7;
$pink: #ec4899;
$red: #ef4444;
$orange: #f97316;
$yellow: #eab308;
$green: #22c55e;
$teal: #14b8a6;
$cyan: #06b6d4;
// Theme color assignments
$primary: $orange; // Main brand color
$secondary: $gray-500; // Secondary elements
$info: $blue; // Informational alerts
$success: $green; // Success states
$warning: $yellow; // Warning states
$danger: $red; // Error states
$light: $gray-200; // Light backgrounds
$dark: $gray-800; // Dark text/backgrounds
// Custom usage in your SCSS
.custom-card {
background: linear-gradient(135deg, $primary 0%, $pink 100%);
color: $white;
}
```
--------------------------------
### Project File Structure
Source: https://github.com/creativetimofficial/soft-ui-dashboard/blob/main/README.md
This is a representation of the directory and file structure for the Soft UI Dashboard project. It details the organization of assets, documentation, pages, and configuration files.
```tree
soft-ui-dashboard
├── assets
│ ├── css
│ ├── fonts
│ ├── img
│ ├── js
│ │ ├── core
│ │ ├── plugins
│ │ └── soft-ui-dashboard.js
│ │ └── soft-ui-dashboard.js.map
│ │ └── soft-ui-dashboard.min.js
│ └── scss
│ ├── soft-ui-dashboard
│ └── soft-ui-dashboard.scss
├── docs
│ ├── documentation.html
├── pages
├── CHANGELOG.md
├── gulpfile.js
├── package.json
```
--------------------------------
### Create Bar Chart with Chart.js
Source: https://github.com/creativetimofficial/soft-ui-dashboard/blob/main/pages/dashboard.html
This snippet demonstrates how to create a bar chart using the Chart.js library. It configures chart data, datasets, and options for responsiveness and appearance. Dependencies include the Chart.js library.
```javascript
var ctx = document.getElementById("chart-bars").getContext("2d");
new Chart(ctx, {
type: "bar",
data: {
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Sales",
tension: 0.4,
borderWidth: 0,
borderRadius: 4,
borderSkipped: false,
backgroundColor: "#fff",
data: [450, 200, 100, 220, 500, 100, 400, 230, 500],
maxBarThickness: 6
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
}
},
interaction: {
intersect: false,
mode: 'index',
},
scales: {
y: {
grid: {
drawBorder: false,
display: false,
drawOnChartArea: false,
drawTicks: false,
},
ticks: {
suggestedMin: 0,
suggestedMax: 500,
beginAtZero: true,
padding: 15,
font: {
size: 14,
family: "Inter",
style: 'normal',
lineHeight: 2
},
color: "#fff"
},
},
x: {
grid: {
drawBorder: false,
display: false,
drawOnChartArea: false,
drawTicks: false
},
ticks: {
display: false
},
},
},
},
});
```
--------------------------------
### Configure Responsive Line Chart with Chart.js
Source: https://context7.com/creativetimofficial/soft-ui-dashboard/llms.txt
This JavaScript code demonstrates how to initialize and configure a responsive line chart using Chart.js. It includes setting up gradients for the dataset and customizing chart options for axes, legends, and interactions. The chart is rendered within an HTML canvas element.
```javascript
const ctx = document.getElementById("chart-line").getContext("2d");
const gradientStroke1 = ctx.createLinearGradient(0, 230, 0, 50);
gradientStroke1.addColorStop(1, 'rgba(94, 114, 228, 0.2)');
gradientStroke1.addColorStop(0.2, 'rgba(94, 114, 228, 0.0)');
gradientStroke1.addColorStop(0, 'rgba(94, 114, 228, 0)');
new Chart(ctx, {
type: "line",
data: {
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Mobile apps",
tension: 0.4,
borderWidth: 0,
pointRadius: 0,
borderColor: "#5e72e4",
backgroundColor: gradientStroke1,
borderWidth: 3,
fill: true,
data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
maxBarThickness: 6
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
}
},
interaction: {
intersect: false,
mode: 'index',
},
scales: {
y: {
grid: {
drawBorder: false,
display: true,
drawOnChartArea: true,
drawTicks: false,
borderDash: [5, 5]
},
ticks: {
display: true,
padding: 10,
color: '#b2b9bf',
font: {
size: 11,
family: "Inter",
style: 'normal',
lineHeight: 2
},
}
},
x: {
grid: {
drawBorder: false,
display: false,
drawOnChartArea: false,
drawTicks: false,
borderDash: [5, 5]
},
ticks: {
display: true,
color: '#b2b9bf',
padding: 20,
font: {
size: 11,
family: "Inter",
style: 'normal',
lineHeight: 2
},
}
},
},
},
});
```
--------------------------------
### Create Line Chart with Chart.js
Source: https://github.com/creativetimofficial/soft-ui-dashboard/blob/main/pages/dashboard.html
This code snippet illustrates how to generate a line chart using Chart.js, including two datasets with different colors and gradients. It configures labels, datasets, and chart options for axes, responsiveness, and tooltips. Requires Chart.js.
```javascript
var ctx2 = document.getElementById("chart-line").getContext("2d");
var gradientStroke1 = ctx2.createLinearGradient(0, 230, 0, 50);
gradientStroke1.addColorStop(1, 'rgba(203,12,159,0.2)');
gradientStroke1.addColorStop(0.2, 'rgba(72,72,176,0.0)');
gradientStroke1.addColorStop(0, 'rgba(203,12,159,0)'); //purple colors
var gradientStroke2 = ctx2.createLinearGradient(0, 230, 0, 50);
gradientStroke2.addColorStop(1, 'rgba(20,23,39,0.2)');
gradientStroke2.addColorStop(0.2, 'rgba(72,72,176,0.0)');
gradientStroke2.addColorStop(0, 'rgba(20,23,39,0)'); //purple colors
new Chart(ctx2, {
type: "line",
data: {
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Mobile apps",
tension: 0.4,
borderWidth: 0,
pointRadius: 0,
borderColor: "#cb0c9f",
borderWidth: 3,
backgroundColor: gradientStroke1,
fill: true,
data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
maxBarThickness: 6
}, {
label: "Websites",
tension: 0.4,
borderWidth: 0,
pointRadius: 0,
borderColor: "#3A416F",
borderWidth: 3,
backgroundColor: gradientStroke2,
fill: true,
data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
maxBarThickness: 6
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
}
},
interaction: {
intersect: false,
mode: 'index',
},
scales: {
y: {
grid: {
drawBorder: false,
display: true,
drawOnChartArea: true,
drawTicks: false,
borderDash: [5, 5]
},
ticks: {
display: true,
padding: 10,
color: '#b2b9bf',
font: {
size: 11,
family: "Inter",
style: 'normal',
lineHeight: 2
},
}
},
x: {
grid: {
drawBorder: false,
display: false,
drawOnChartArea: false,
drawTicks: false,
borderDash: [5, 5]
},
ticks: {
display: true,
color: '#b2b9bf',
padding: 20,
font: {
size: 11,
family: "Inter",
style: 'normal',
lineHeight: 2
},
}
},
},
},
});
```
--------------------------------
### HTML Card Components for Soft UI Dashboard
Source: https://context7.com/creativetimofficial/soft-ui-dashboard/llms.txt
This snippet demonstrates various card layouts for displaying statistics with icons, charts, and tabular data. It utilizes HTML and Bootstrap classes for structure and styling, common in front-end web development.
```html
Today's Money
$53,000
+55%
Built by developers
Soft UI Dashboard
From colors, cards, typography to complex elements.
Projects table
Project
Budget
Status
Soft UI Dashboard
$2,500
Online
```
--------------------------------
### JavaScript: Bootstrap Tooltip Initialization
Source: https://context7.com/creativetimofficial/soft-ui-dashboard/llms.txt
Enables Bootstrap tooltips on elements that have the 'data-bs-toggle="tooltip"' attribute. This script initializes all such elements on the page. It relies on the Bootstrap JavaScript library and requires appropriate HTML attributes for activation.
```javascript
// Initialize all tooltips (call on page load)
const tooltipTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="tooltip"]'));
const tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// HTML usage
//
```
--------------------------------
### Dashboard Layout Template HTML
Source: https://context7.com/creativetimofficial/soft-ui-dashboard/llms.txt
Provides the complete HTML structure for a dashboard page using Bootstrap conventions. It includes the head section with meta tags, font links, and CSS files, as well as the body content with a fixed sidebar and main content area. Essential JavaScript files are also linked.
```html
Soft UI Dashboard 3 by Creative Tim
```
--------------------------------
### Initialize Scrollbar on Windows (JavaScript)
Source: https://github.com/creativetimofficial/soft-ui-dashboard/blob/main/pages/billing.html
This snippet initializes a custom scrollbar using the Scrollbar library, specifically for Windows operating systems. It requires the Scrollbar library to be included and targets an element with the ID 'sidenav-scrollbar'.
```javascript
var win = navigator.platform.indexOf('Win') > -1;
if (win && document.querySelector('#sidenav-scrollbar')) {
var options = { damping: '0.5' };
Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
}
```
--------------------------------
### Initialize Scrollbar for Windows
Source: https://github.com/creativetimofficial/soft-ui-dashboard/blob/main/pages/sign-in.html
This JavaScript code snippet initializes a custom scrollbar for Windows operating systems if the specific element '#sidenav-scrollbar' exists. It uses the 'Scrollbar' library with a damping option.
```javascript
var win = navigator.platform.indexOf('Win') > -1;
if (win && document.querySelector('#sidenav-scrollbar')) {
var options = { damping: '0.5' }
Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
}
```
--------------------------------
### JavaScript: Bootstrap Toast Notification Management
Source: https://context7.com/creativetimofficial/soft-ui-dashboard/llms.txt
Provides functionality to programmatically show Bootstrap toast notifications. This script initializes all toast elements and sets up event listeners for buttons that trigger specific toasts. It requires Bootstrap's JavaScript and CSS, along with specific HTML structures for toasts and trigger buttons.
```javascript
// Initialize toast buttons (runs after DOM loads)
document.addEventListener("DOMContentLoaded", function() {
const toastElList = [].slice.call(document.querySelectorAll(".toast"));
const toastList = toastElList.map(el => new bootstrap.Toast(el));
const toastButtonList = [].slice.call(document.querySelectorAll(".toast-btn"));
toastButtonList.map(function(toastButtonEl) {
toastButtonEl.addEventListener("click", function() {
const toastToTrigger = document.getElementById(toastButtonEl.dataset.target);
if (toastToTrigger) {
const toast = bootstrap.Toast.getInstance(toastToTrigger);
toast.show();
}
});
});
});
// HTML usage
//
//
//
Notification message
//
```
--------------------------------
### Initialize Scrollbar with Options (JavaScript)
Source: https://github.com/creativetimofficial/soft-ui-dashboard/blob/main/pages/virtual-reality.html
This JavaScript code snippet initializes a scrollbar for a specific element with custom damping options. It checks if the operating system is Windows and if the target element exists before initializing. This is useful for enhancing user interface elements that require scrolling, providing a smoother experience.
```javascript
var win = navigator.platform.indexOf('Win') > -1;
if (win && document.querySelector('#sidenav-scrollbar')) {
var options = {
damping: '0.5'
}
Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
}
```
--------------------------------
### JavaScript Line Chart Implementation with Chart.js
Source: https://github.com/creativetimofficial/soft-ui-dashboard/blob/main/pages/rtl.html
Creates a line chart using Chart.js, featuring two datasets ('Mobile apps' and 'Websites') with gradient backgrounds. It includes configurations for responsiveness, interactions, and axis styling, suitable for trend analysis.
```javascript
var ctx2 = document.getElementById("chart-line").getContext("2d"); var gradientStroke1 = ctx2.createLinearGradient(0, 230, 0, 50); gradientStroke1.addColorStop(1, 'rgba(203,12,159,0.2)'); gradientStroke1.addColorStop(0.2, 'rgba(72,72,176,0.0)'); gradientStroke1.addColorStop(0, 'rgba(203,12,159,0)'); //purple colors var gradientStroke2 = ctx2.createLinearGradient(0, 230, 0, 50); gradientStroke2.addColorStop(1, 'rgba(20,23,39,0.2)'); gradientStroke2.addColorStop(0.2, 'rgba(72,72,176,0.0)'); gradientStroke2.addColorStop(0, 'rgba(20,23,39,0)'); //purple colors new Chart(ctx2, { type: "line", data: { labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Mobile apps", tension: 0.4, borderWidth: 0, pointRadius: 0, borderColor: "#cb0c9f", borderWidth: 3, backgroundColor: gradientStroke1, fill: true, data: [50, 40, 300, 220, 500, 250, 400, 230, 500], maxBarThickness: 6 }, { label: "Websites", tension: 0.4, borderWidth: 0, pointRadius: 0, borderColor: "#3A416F", borderWidth: 3, backgroundColor: gradientStroke2, fill: true, data: [30, 90, 40, 140, 290, 290, 340, 230, 400], maxBarThickness: 6 }, ], }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false, } }, interaction: { intersect: false, mode: 'index', }, scales: { y: { grid: { drawBorder: false, display: true, drawOnChartArea: true, drawTicks: false, borderDash: [5, 5] }, ticks: { display: true, padding: 10, color: '#b2b9bf', font: { size: 11, family: "Inter", style: 'normal', lineHeight: 2 }, } }, x: { grid: { drawBorder: false, display: false, drawOnChartArea: false, drawTicks: false, borderDash: [5, 5] }, ticks: { display: true, color: '#b2b9bf', padding: 20, font: { size: 11, family: "Inter", style: 'normal', lineHeight: 2 }, } }, }, }, });
```
--------------------------------
### HTML Form Components with Material Design
Source: https://context7.com/creativetimofficial/soft-ui-dashboard/llms.txt
This snippet provides a collection of form elements styled with Material Design principles, including text inputs, password fields, dropdowns, textareas, and checkboxes. It's designed for user input and integration into web applications, with support for validation attributes.
```html
```
--------------------------------
### JavaScript: Material Design Input Focus Animation
Source: https://context7.com/creativetimofficial/soft-ui-dashboard/llms.txt
Implements a floating label animation for form inputs, adding 'is-focused' and 'is-filled' classes based on user interaction. This script enhances form usability by providing visual feedback. It requires corresponding HTML structure with labels and input elements within a parent container.
```javascript
// Initialize input focus effects (runs on page load)
window.onload = function() {
const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
input.addEventListener('focus', function() {
this.parentElement.classList.add('is-focused');
});
input.onkeyup = function() {
if (this.value !== "") {
this.parentElement.classList.add('is-filled');
} else {
this.parentElement.classList.remove('is-filled');
}
};
input.addEventListener('focusout', function() {
if (this.value !== "") {
this.parentElement.classList.add('is-filled');
}
this.parentElement.classList.remove('is-focused');
});
});
};
// HTML usage
//
//
//
//
```
--------------------------------
### Animated Tab Navigation - JavaScript
Source: https://context7.com/creativetimofficial/soft-ui-dashboard/llms.txt
Creates an animated indicator that follows the active tab selection within a tabbed navigation component. It initializes the indicator by cloning the first tab's link and dynamically updates its position and width based on user selection. This function should be called after the DOM is loaded.
```javascript
// Initialize animated tabs (call after DOM load)
setTimeout(function() {
initNavs();
}, 100);
function initNavs() {
const navs = document.querySelectorAll('.nav-pills');
navs.forEach(nav => {
const movingDiv = document.createElement('div');
const firstLink = nav.querySelector('li:first-child .nav-link');
movingDiv.classList.add('moving-tab', 'position-absolute', 'nav-link');
movingDiv.appendChild(firstLink.cloneNode());
nav.appendChild(movingDiv);
movingDiv.style.width = nav.querySelector('li:nth-child(1)').offsetWidth + 'px';
movingDiv.style.transform = 'translate3d(0px, 0px, 0px)';
movingDiv.style.transition = '.5s ease';
nav.onmouseover = function(event) {
const li = event.target.closest('li');
if (li) {
const nodes = Array.from(li.closest('ul').children);
const index = nodes.indexOf(li) + 1;
nav.querySelector(`li:nth-child(${index}) .nav-link`).onclick = function() {
let sum = 0;
for (let j = 1; j < index; j++) {
sum += nav.querySelector(`li:nth-child(${j})`).offsetWidth;
}
movingDiv.style.transform = `translate3d(${sum}px, 0px, 0px)`;
movingDiv.style.width = li.offsetWidth + 'px';
};
}
};
});
}
// HTML usage
//