[!WARNING]
This project is currently an alpha. Use at your own risk!

Getting started

Installation

Follow the steps to install and setup TailwindCSS

Install the package and its dependencies in your project directory with

yarn add @sonarsource/moonlight-ui tailwind-variants

Wrap your tailwind config with the withMoonlight function

Typescript

// tailwind.config.ts

import { withMoonlight } from '@sonarsource/moonlight-ui/tailwind';

export default withMoonlight({
  //... your tailwind config
});

Javascript

// tailwind.config.js

const { withMoonlight } = require('@sonarsource/moonlight-ui/tailwind');

module.exports = withMoonlight({
  //... your tailwind config
});

Setup with Gatsby

In both gatsby-browser.tsx and gatsby-ssr.tsx, call the setupMoonlight function in wrapRootElement.

Example:

// gatsby-browser.tsx | gatsby-ssr.tsx
import * as React from 'react';
import './src/styles/global.css';
import { setupMoonlight } from '@sonarsource/moonlight-ui';

export const wrapRootElement = ({ element }) => {
  setupMoonlight({
    /* pass a custom config here if you did customize your tailwind config */
  });

  return element;
};

Example Usage

import { Heading } from '@sonarsource/moonlight-ui';

export default function Component() {
  return (
    <div>
      <Heading tag="h3">I am an H3!</Heading>
    </div>
  );
}

Styling

This library comes with tailwind-variants. All custom styles will be automatically overwritten by your styles. You can use either tailwind-variants, styled components, or whatever in your codebase, everything is supported by Moonlight

Components

A complete list of components will soon be available.

Running unit tests

Run npx nx test moonlight-ui to execute the unit tests via Vitest.