@chromia/ui-kit
Advanced tools
The Chromia UI KIT is a set of React components specifically designed for the Chromia ecosystem. It empowers projects like Wallet and Block Explorer to have a consistent look and feel.
The Chromia UI KIT is a set of React components specifically designed for the Chromia ecosystem. It empowers projects like Wallet and Block Explorer to have a consistent look and feel.
pnpm add @chromia/ui-kit
This library comes with a CSS reset that should be used in conjunction with the UI KIT. It can be used as follows:
import { resetStyle } from '@chromia/ui-kit';
const App = () => (
<>
<style dangerouslySetInnerHTML={{ __html: resetStyle }} />
<YourApp />
</>
);
It is recommended to put these styles in the
<head>of your app.
Alternatively, you can include the CSS reset by importing static CSS file directly (if your bundler supports that):
// Assuming Next.js app with app router
// /app/layout.tsx
import '@chromia/ui-kit/reset.css';
If you are using server-side rendering, you will need to import generated styles as well. This can be done as follows:
import { getCssText } from '@chromia/ui-kit';
const App = () => (
<>
<style dangerouslySetInnerHTML={{ __html: getCssText() }} />
<YourApp />
</>
);
Again, it is recommended to put these styles in the
<head>of your app.
If your app crashes with
Error: Attempted to call getCssText() from the server (...)keep reading.
At the moment, UI-Kit does not fully support React Server Components (not to be confused with Server-side rendering).
Most important missing feature is getCssText() function being unavailable. This function usually generates static css
on-the-fly as the page is (pre-)rendered on the server side, allowing to inline into HTML only the CSS you need.
When using RSC you have two options:
getCssText you can import a static css file that includes all the styles for all the components (61kB raw,
8kB brotli-compressed) - your bundler must support importing *.css files:// Assuming Next.js app with app router
// /app/layout.tsx
import '@chromia/ui-kit/static.css';
getCssText and static.css entirely, the components will work, but you will experience a blink
of unstyled components.import { Button } from '@chromia/ui-kit';
const App = () => <Button onClick={() => alert("Clicked!")}>Click me!</Button>;
We use Storybook to document the components. Visit the Chromia UI-Kit Storybook to see the components in action and learn how to use them.
This project is licensed under the Apache-2.0 License - see the LICENSE file for details.
See DEV.md for details on how to develop this library.
FAQs
The Chromia UI KIT is a set of React components specifically designed for the Chromia ecosystem. It empowers projects like Wallet and Block Explorer to have a consistent look and feel.
The npm package @chromia/ui-kit receives a total of 127 weekly downloads. As such, @chromia/ui-kit popularity was classified as not popular.
We found that @chromia/ui-kit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 8 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
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.