| Code |
Image |
| A |
 |
| B |
 |
Code
A. <Button label="Your Tasks" color="surface" variant="text" />
B. <Button label="Your Tasks" color="surface"/>
package.json
{
"name": "project",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "eslint . && prettier --check . && stylelint \"**/*.scss\"",
"lint:fix": "eslint . --fix && prettier --write . && stylelint \"**/*.scss\" --fix",
"type-check": "tsc --noEmit",
"add": "liftkit add"
},
"dependencies": {
"@chainlift/liftkit": "^0.1.1",
"@csstools/normalize.css": "^12.1.1",
"@material/material-color-utilities": "^0.3.0",
"@radix-ui/react-slot": "^1.2.3",
"chart.js": "^4.5.0",
"chartjs-gauge": "^0.3.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^0.532.0",
"material-dynamic-colors": "^1.1.2",
"next": "15.4.4",
"react": "19.1.0",
"react-chartjs-2": "^5.3.0",
"react-dom": "19.1.0",
"tailwind-merge": "^3.3.1",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@tailwindcss/cli": "0.1.1",
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"@typescript-eslint/eslint-plugin": "^8.38.0",
"@typescript-eslint/parser": "^8.38.0",
"eslint": "^9.32.0",
"eslint-config-next": "15.4.4",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.3",
"postcss-scss": "^4.0.9",
"prettier": "^3.6.2",
"sass": "^1.89.2",
"shadcn": "^2.7.0",
"stylelint": "^16.22.0",
"stylelint-config-recommended": "^16.0.0",
"stylelint-config-recommended-scss": "^15.0.1",
"stylelint-config-standard": "^38.0.0",
"tailwindcss": "^3.4.3",
"typescript": "^5"
}
}
Code
package.json
{ "name": "project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev --turbopack", "build": "next build", "start": "next start", "lint": "eslint . && prettier --check . && stylelint \"**/*.scss\"", "lint:fix": "eslint . --fix && prettier --write . && stylelint \"**/*.scss\" --fix", "type-check": "tsc --noEmit", "add": "liftkit add" }, "dependencies": { "@chainlift/liftkit": "^0.1.1", "@csstools/normalize.css": "^12.1.1", "@material/material-color-utilities": "^0.3.0", "@radix-ui/react-slot": "^1.2.3", "chart.js": "^4.5.0", "chartjs-gauge": "^0.3.0", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.532.0", "material-dynamic-colors": "^1.1.2", "next": "15.4.4", "react": "19.1.0", "react-chartjs-2": "^5.3.0", "react-dom": "19.1.0", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@eslint/eslintrc": "^3", "@tailwindcss/cli": "0.1.1", "@tailwindcss/postcss": "^4", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "@typescript-eslint/eslint-plugin": "^8.38.0", "@typescript-eslint/parser": "^8.38.0", "eslint": "^9.32.0", "eslint-config-next": "15.4.4", "eslint-config-prettier": "^10.1.8", "eslint-plugin-prettier": "^5.5.3", "postcss-scss": "^4.0.9", "prettier": "^3.6.2", "sass": "^1.89.2", "shadcn": "^2.7.0", "stylelint": "^16.22.0", "stylelint-config-recommended": "^16.0.0", "stylelint-config-recommended-scss": "^15.0.1", "stylelint-config-standard": "^38.0.0", "tailwindcss": "^3.4.3", "typescript": "^5" } }