diff --git a/CHANGELOG.md b/CHANGELOG.md
index d112dc4..89d50c2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+### [10.0.0](https://github.com/xdevguild/nextjs-dapp-template/releases/tag/v10.0.0) (2025-02-08)
+- update useElven
+- update Next
+- update React
+- update Tailwind
+
### [9.10.2](https://github.com/xdevguild/nextjs-dapp-template/releases/tag/v9.10.2) (2024-11-11)
- add `--experimental-https`
diff --git a/app/globals.css b/app/globals.css
index 5c01c5d..45c01d0 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,7 +1,91 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
+@import 'tailwindcss';
+
+@plugin 'tailwindcss-animate';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+ --color-border: hsl(var(--border));
+ --color-input: hsl(var(--input));
+ --color-ring: hsl(var(--ring));
+ --color-background: hsl(var(--background));
+ --color-foreground: hsl(var(--foreground));
+
+ --color-primary: hsl(var(--primary));
+ --color-primary-foreground: hsl(var(--primary-foreground));
+
+ --color-secondary: hsl(var(--secondary));
+ --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+ --color-destructive: hsl(var(--destructive));
+ --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+ --color-muted: hsl(var(--muted));
+ --color-muted-foreground: hsl(var(--muted-foreground));
+
+ --color-accent: hsl(var(--accent));
+ --color-accent-foreground: hsl(var(--accent-foreground));
+
+ --color-popover: hsl(var(--popover));
+ --color-popover-foreground: hsl(var(--popover-foreground));
+
+ --color-card: hsl(var(--card));
+ --color-card-foreground: hsl(var(--card-foreground));
+
+ --radius-lg: var(--radius);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-sm: calc(var(--radius) - 4px);
+
+ --animate-accordion-down: accordion-down 0.2s ease-out;
+ --animate-accordion-up: accordion-up 0.2s ease-out;
+
+ @keyframes accordion-down {
+ from {
+ height: 0;
+ }
+ to {
+ height: var(--radix-accordion-content-height);
+ }
+ }
+ @keyframes accordion-up {
+ from {
+ height: var(--radix-accordion-content-height);
+ }
+ to {
+ height: 0;
+ }
+ }
+}
+
+@utility container {
+ margin-inline: auto;
+ padding-inline: 2rem;
+ @media (width >= --theme(--breakpoint-sm)) {
+ max-width: none;
+ }
+ @media (width >= 1400px) {
+ max-width: 1400px;
+ }
+}
+
+/*
+ The default border color has changed to `currentColor` in Tailwind CSS v4,
+ so we've added these compatibility styles to make sure everything still
+ looks the same as it did with Tailwind CSS v3.
+
+ If we ever want to remove these styles, we need to add an explicit border
+ color utility to any element that depends on these defaults.
+*/
+@layer base {
+ *,
+ ::after,
+ ::before,
+ ::backdrop,
+ ::file-selector-button {
+ border-color: var(--color-gray-200, currentColor);
+ }
+}
+
@layer base {
:root {
--background: 0 0% 100%;
diff --git a/components/demo/simple-demo.tsx b/components/demo/simple-demo.tsx
index 4cf9936..837c5b2 100644
--- a/components/demo/simple-demo.tsx
+++ b/components/demo/simple-demo.tsx
@@ -107,7 +107,7 @@ export const SimpleDemo = () => {