
Security News
Package Maintainers Call for Improvements to GitHub’s New npm Security Plan
Maintainers back GitHub’s npm security overhaul but raise concerns about CI/CD workflows, enterprise support, and token management.
@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
JustWeb3ThemeProvider
To 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;
useJustWeb3Theme
The 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
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.
Security News
Maintainers back GitHub’s npm security overhaul but raise concerns about CI/CD workflows, enterprise support, and token management.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.
Research
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.