
Product
Introducing GitHub Actions Scanning Support
Detect malware, unsafe data flows, and license issues in GitHub Actions with Socket’s new workflow scanning support.
@justweb3/ui
Advanced tools
The **@justweb3/ui** library provides a unified UI experience and handles theme generation for the **@justweb3/widget** package. It simplifies theming across widgets by dynamically generating color variations and supports custom theming through its contex
The @justweb3/ui library provides a unified UI experience and handles theme generation for the @justweb3/widget package. It simplifies theming across widgets by dynamically generating color variations and supports custom theming through its context provider.
This library was inspired by shadcn
Install the library using npm or yarn:
npm install @justweb3/ui
# or
yarn add @justweb3/ui
JustWeb3ThemeProviderTo enable the theme context for your widget, wrap your application or component with the JustWeb3ThemeProvider. This ensures consistent theming across components and allows you to customize colors dynamically.
'use client';
import { JustWeb3ThemeProvider } from '@justweb3/ui';
const App = ({ children }) => {
return (
<JustWeb3ThemeProvider
color={{
primary: 'hsl(216, 90%, 58%)', // Custom primary color
background: 'hsl(0, 0%, 98%)', // Custom background color
destructive: 'hsl(0, 100%, 50%)', // Custom destructive color
}}
>
{children}
</JustWeb3ThemeProvider>
);
};
export default App;
The JustWeb3ThemeProvider offers a changeTheme function to dynamically change the primary, background, or destructive colors. Here's an example demonstrating dynamic theme switching.
import React, { useState } from 'react';
import { useJustWeb3Theme } from '@justweb3/ui';
const ThemeSwitcher = () => {
const { changeTheme, color } = useJustWeb3Theme();
const [newColor, setNewColor] = useState(color.primary);
const handleThemeChange = () => {
changeTheme('primary', newColor);
};
return (
<div>
<h1>Current Primary Color: {color.primary}</h1>
<input
type="color"
value={newColor}
onChange={(e) => setNewColor(e.target.value)}
/>
<button onClick={handleThemeChange}>Change Primary Color</button>
</div>
);
};
export default ThemeSwitcher;
useJustWeb3ThemeThe useJustWeb3Theme hook provides access to the current theme and allows you to modify theme colors dynamically.
import { useJustWeb3Theme } from '@justweb3/ui';
const Component = () => {
const { theme, color, changeTheme } = useJustWeb3Theme();
console.log('Current Theme:', theme);
const switchToDarkBackground = () => {
changeTheme('background', 'hsl(0, 0%, 10%)');
};
return (
<div>
<button onClick={switchToDarkBackground}>Switch to Dark Background</button>
</div>
);
};
theme: The current theme values.color: The current primary, background, and destructive colors.changeTheme: A function to dynamically change specific theme colors.The JustWeb3ThemeProvider internally generates color variations for:
The provider uses CSS variables for theme management, ensuring that components and styles are synchronized.
Example CSS Variables:
:root {
--justweb3-primary-color: hsl(216, 90%, 58%);
--justweb3-primary-color-light: hsl(216, 90%, 68%);
--justweb3-primary-color-dark: hsl(216, 90%, 48%);
--justweb3-background-color: hsl(0, 0%, 100%);
--justweb3-border-color: hsl(0, 0%, 0%);
--justweb3-destructive-color: hsl(0, 100%, 50%);
--justweb3-font-family: 'Inter', sans-serif;
}
We welcome contributions! Please submit issues or pull requests on our GitHub repository.
FAQs
The **@justweb3/ui** library provides a unified UI experience and handles theme generation for the **@justweb3/widget** package. It simplifies theming across widgets by dynamically generating color variations and supports custom theming through its contex
The npm package @justweb3/ui receives a total of 103 weekly downloads. As such, @justweb3/ui popularity was classified as not popular.
We found that @justweb3/ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Product
Detect malware, unsafe data flows, and license issues in GitHub Actions with Socket’s new workflow scanning support.

Product
Add real-time Socket webhook events to your workflows to automatically receive pull request scan results and security alerts in real time.

Research
The Socket Threat Research Team uncovered malicious NuGet packages typosquatting the popular Nethereum project to steal wallet keys.