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.
- TypeScript support
- 23+ components, 2+ 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.
pnpm add @chromia/ui-kitThis 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 />
</>
);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 />
</>
);It is recommended to put these styles in the
<head>of your app.
import { Button } from '@chromia/ui-kit';
const App = () => <Button text={"Click me"} onClick={() => alert("Clicked!")} />;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.