Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@chromia/ui-kit

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@chromia/ui-kit

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.

0.8.0-beta.11
npm

Version published: 6 months ago

Maintainers: 9

Created: last year

Source

Chromia UI Kit

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.

Features

TypeScript support
33+ components, 13+ hooks
CSS-in-JS styling with stitches
Server-side rendering support
Tree-shaking friendly
CommonJS and ES Module support
Works with create-react-app, next.js, your own setup, etc.

Installation

pnpm add @chromia/ui-kit

Usage

CSS Reset

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';

Server-side 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.

React Server Components

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:

Instead of 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';

Or you can skip both getCssText and static.css entirely, the components will work, but you will experience a blink of unstyled components.

Basic example

import { Button } from '@chromia/ui-kit';

const App = () => <Button onClick={() => alert("Clicked!")}>Click me!</Button>;

Documentation

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.

License

This project is licensed under the Apache-2.0 License - see the LICENSE file for details.

Development

See DEV.md for details on how to develop this library.

FAQs

What is @chromia/ui-kit?

Is @chromia/ui-kit well maintained?

Package last updated on 05 Jun 2024

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.

Install