@0xsquid/ui

Squid UI

React components library for Squid V2

Package installation and usage

Install the package:

yarn add @0xsquid/ui

Import styles in your entry point:

// src/main.tsx | src/pages/_app.tsx | etc...
import '@0xsquid/ui/dist/index.css'

Wrap your app with our theme provider <SquidConfigProvider /> and specify your theme:

import { SquidConfigProvider, Button } from '@0xsquid/ui'

function App() {
  return (
    <SquidConfigProvider theme={yourTheme}>
      <Button label="Hello world" variant="primary" size="md" />
    </SquidConfigProvider>
  )
}

Development

Install dependencies

yarn install

Start Storybook dev server

yarn storybook

Build package

To build the package using Rollup, run:

yarn build

This command will:

1. compile Tailwind CSS classes into src/styles/compiled-tailwind.css
2. bundle source code, along with its type declarations, into the dist/ folder
3. copy src/styles/compiled-tailwind.css to dist/index.css

Lint and format

To format and lint the code, run:

yarn format:fix

yarn lint:fix

Images

In case you need to add images somewhere that need to be included in the final bundle, convert them to base64 instead.

Example:

.my-image {
-  background-image: url('my-image.png');
+  background-image: url('data:image/png;base64,iVBORw0...');
}

Or in a React component:

-  <img src="my-image.png" />
+  <img src="data:image/png;base64,iVBORw0..." />