0.1.6 • Published 2 months ago
@axelarjs/ui v0.1.6
@axelarjs/ui
The interchain design system
Getting started
clone this repository:
git clone git@github.com:axelarnetwork/axelar-ui.git && cd $_
install dependencies (use pnpm):
pnpm i
run storybook:
pnpm storybook
Features
- tailwindcss for styling
- radix primitives for accessible interactive components
- class-variant-authority for
- tailwind-merge utility for merging classNames
- tailwind-styled-components for styled-components-like component definition syntax
- storybook v7 for interactive docs
- prettier on precommit
- commitlint / conventional commits check on precommit
Use Nextjs 13+ fonts
- Import it on
_app.tsx
import { Cabin } from "next/font/google";
const fontSans = Cabin({
subsets: ["latin"],
});
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<style jsx global>
{`
:root {
--font-sans: ${fontSans.style.fontFamily};
}
`}
</style>
<Component {...pageProps} />;
</>
);
}
export default MyApp;
- Configure tailwind.config.js
const { fontFamily } = require("tailwindcss/defaultTheme");
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [require("@axelarjs/ui/preset")],
// ...
theme: {
extend: {
fontFamily: {
sans: ["var(--font-sans)", ...fontFamily.sans],
},
},
},
// ...
};
Scripts
The following scripts are available in the project:
dev
: Starts the development server usingvite
.build
: Builds the production version of the app usingvite
.lint
: Runseslint
to check for linting errors.test
: Runs unit tests usingvitest
.test:watch
: Runs unit tests in watch mode usingvitest
.storybook
: Starts the Storybook development server.build-storybook
: Builds the Storybook production version.test:e2e
: Runs end-to-end tests usingzx
.test:e2e:watch
: Runs end-to-end tests in watch mode usingzx
.test:e2e:debug
: Runs end-to-end tests in debug mode usingzx
.test:e2e:debug-watch
: Runs end-to-end tests in debug mode with watch mode enabled usingzx
.test:e2e:ci
: Runs end-to-end tests in a continuous integration environment usingzx
.format
: Formats the code usingprettier
.format:check
: Checks the code formatting usingprettier
.lint-staged
: Runseslint
andprettier
on staged files usinghusky
andlint-staged
.
0.0.0-snapshot.b521d08
2 months ago
0.0.0-snapshot.553d9bc
2 months ago
0.0.0-snapshot.2bd8314
2 months ago
0.0.0-snapshot.99c2f0a
2 months ago
0.0.0-snapshot.9c09e70
2 months ago
0.0.0-snapshot.0d85ef8
2 months ago
0.0.0-snapshot.2f6e7cb
3 months ago
0.0.0-snapshot.023598c
3 months ago
0.0.0-snapshot.8af9be9
3 months ago
0.1.6
5 months ago
0.0.0-snapshot.2897c97
6 months ago
0.1.5
6 months ago
0.1.4
7 months ago
0.1.3
7 months ago
0.1.2
7 months ago