![38% of CISOs Fear They’re Not Moving Fast Enough on AI](https://cdn.sanity.io/images/cgdhsj6q/production/faa0bc28df98f791e11263f8239b34207f84b86f-1024x1024.webp?w=400&fit=max&auto=format)
Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
@invertase/ui
Advanced tools
A set of UI components for products managed by [Invertase](https://invertase.io).
A set of UI components for products managed by Invertase.
# Using npm
npm i --save @invertase/ui
# Using Yarn
yarn add @invertase/ui
The project you're the library must have the react
&
tailwindcss
packages installed.
#install dependencies
yarn
#run typescipt transpiler
yarn watch
Components can be directly imported from the package:
import { Button, FloatingActionButton } from '@invertase/ui';
See the Storybook for a full list of available components.
Invertase UI is built on top of TailwindCSS, allowing you to take advantage of the features tailwind provides out of the box.
By default, the UI provides a base "blue" theme, which can be overridden via the tailwind configuration file:
// tailwind.config.js
module.exports = {
theme: {},
variants: {},
plugins: [require('@invertase/ui/dist/tailwind-plugin')()],
};
To change the default theme, provide a tailwind color to the plugin:
require('@invertase/ui/dist/tailwind-plugin')('red');
To provide a custom theme to the UI, update your stylesheet to provide a custom class, for example to create a "Twitter" theme:
// tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
.theme-twitter {
--color-primary: #3ca1f2;
--color-primary-hover: #3c80d1;
}
Inside of your React application, wrap the ThemeProvider
with the name of your chosen theme:
import React from 'react';
import { ThemeProvider } from '@invertase/ui';
function App() {
return <ThemeProvider value="twitter">...</ThemeProvider>;
}
If the theme could not be found, the default theme provided to the plugin will be used instead.
If you need to update the theme, you have two options:
value
passed to the ThemeProvider
(e.g. via local state).updateTheme
method provided by the useTheme
hook:import React from 'react';
function ChangeTheme() {
const { updateTheme } = useTheme();
return <button onClick={() => updateTheme('foobar')}>Change Theme</button>;
}
If using PostCSS to deduce the Tailwind bundle size, you'll need to ensure the distributed files are being scanned for tailwind class names:
// postcss.config.js
if (process.env.NODE_ENV === 'production') {
// Remove unused CSS classes
productionOnly.push(
require('@fullhuman/postcss-purgecss')({
content: [
// ...other content paths
'./node_modules/@invertase/ui/dist/**.tsx',
],
}),
);
}
module.exports = () => ({
plugins: [
require('tailwindcss')('./tailwind.config.js'),
// ... other plugins
...productionOnly,
],
});
Hooks can only be called inside the body of a function component.
Ensure that only one copy of React is being bundled, for example if using Gatsby:
const path = require('path');
exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
alias: {
react: path.resolve('./node_modules/react'),
'react-dom': path.resolve('./node_modules/react-dom'),
},
},
});
};
FAQs
A set of UI components for products managed by [Invertase](https://invertase.io).
The npm package @invertase/ui receives a total of 12 weekly downloads. As such, @invertase/ui popularity was classified as not popular.
We found that @invertase/ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers 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
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.