Sajari UI

​

Getting Started

1. Installing Sajari UI via npm

Install Sajari UI and its peer dependencies.

2. Create a CSS file

We do some magic and export a CSS file with all the basics you need to get running. You simply need to create a CSS file with this content.

3. Set up PostCSS

First you'll need to install and setup PostCSS.

Then create a postcss.config.js config file in the root of your project containing this recommended starter config. You can also extend the Tailwind config in this file if you need to.

This will work for the majority of setups, such as Create React App, Preact CLI, etc.

const { tailwindConfig } = require('@sajari-ui/core');


tailwindConfig.purge.content.push('./src/**/*.js', './src/**/*.tsx');


module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss')(tailwindConfig),
    require('autoprefixer'),
    require('postcss-clean')({ level: 2 }),
  ],
};

Purging the CSS

Adjust the content path in the postcss config to suit where your source components and pages are. A reference to the @sajari-ui/core package is automagically added to this array (hence the need to push) but in some cases (like Next.js), will mean this will need to added manually. See the example above.

4. Add scripts to package.json

Depending on your build tooling, you may have to add an npm script to build the CSS. Preact CLI and some others have PostCSS built in so this is not required. Unfortunately Create React App doesn't allow custom PostCSS plugins, so we have to build the CSS ourselves. A little messier but not the end of the world. Here's an example:

Be sure to add the built CSS to the .gitignore - in the example above, that would be src/app.css.

5. Import the CSS

Usually in your App.js or similar.

6. Use components

Simply import components by name from @sajari-ui/core package, as demonstrated below.

Thanks