@ringcentral/spring-ui

Production-ready React component library built with Tailwind CSS.

Installation

Using yarn:

yarn add @ringcentral/spring-ui

Using npm:

npm i @ringcentral/spring-ui

Note: @ringcentral/spring-theme and @ringcentral/spring-base are included and re-exported by @ringcentral/spring-ui.

Quick Start

import React from 'react';
import { Button, ThemeProvider, suiLight } from '@ringcentral/spring-ui';

export default function App() {
  return (
    <ThemeProvider theme={suiLight}>
      <Button variant="contained">Hello Spring</Button>
    </ThemeProvider>
  );
}

Prerequisite

Make sure Tailwind CSS is installed and configured with PostCSS in your project.

postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Global CSS (e.g., src/index.css or styles/globals.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind Setup

Add the Spring Tailwind plugin in your tailwind.config.js and include Spring UI in content scanning. See the @ringcentral/spring-theme README for full options.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    'node_modules/@ringcentral/spring-ui/**/*.js',
  ],
  plugins: [require('@ringcentral/spring-theme/tailwind')],
};

License

MIT