Skip to content

luxo-ai/rothko-ui

Repository files navigation

rothko-ui

Rothko-UI

Welcome to Rothko-UI, a comprehensive UI component library designed with flexibility and ease of use in mind. This monorepo contains various packages, with @rothko-ui/ui and @rothko-ui/icons being the primary ones for external use.

Key Packages

  • @rothko-ui/ui: The main package containing all the UI components.
  • @rothko-ui/icons: A collection of SVG icons optimized for Rothko-UI.

Using Rothko-UI

Setup with RothkoProvider

Before using any Rothko-UI components, it's essential to wrap your application or component tree with the RothkoProvider. This context provider ensures that all components function correctly and inherit the necessary themes and configurations.

import { RothkoProvider } from '@rothko-ui/ui';

function MyApp() {
  return <RothkoProvider>{/* Your application components here */}</RothkoProvider>;
}

Basic Component Usage

After setting up the RothkoProvider, you can import and use the components:

import { Button } from '@rothko-ui/ui';

function MyComponent() {
  return <Button>Click Me</Button>;
}

Using Icons

The @rothko-ui/icons package provides a range of SVG icons:

import { HeartIcon } from '@rothko-ui/icons';

function MyComponent() {
  return <HeartIcon />;
}

Installation

To get started with Rothko-UI:

npm install @rothko-ui/ui @rothko-ui/icons

or

yarn add @rothko-ui/ui @rothko-ui/icons

Server-Side Rendering (SSR) with Rothko UI

Rothko UI utilizes styled-components for styling its components. If you're integrating Rothko UI into a server-side rendered (SSR) application, it's essential to ensure that the style sheets are correctly generated and sent to the client. This prevents flash-of-unstyled-content (FOUC) issues and ensures a smooth user experience.

For Next.js Applications:

Next.js is a popular React framework that supports SSR out of the box. If you're using Rothko UI with Next.js, special considerations need to be made for styled-components.

To correctly handle styled-components with SSR in Next.js:

  1. Install Required Dependencies: Ensure you have both styled-components and its Babel plugin installed:

    yarn add styled-components babel-plugin-styled-components
  2. Configure Babel: Update your .babelrc (or babel.config.json) to include the styled-components plugin:

    {
      "presets": ["next/babel"],
      "plugins": [["styled-components", { "ssr": true }]]
    }
  3. Use ServerStyleSheet: In your custom _document.js (or _document.tsx), use ServerStyleSheet from styled-components to collect and inline the styles:

    import Document from 'next/document';
    import { ServerStyleSheet } from 'styled-components';
    
    export default class MyDocument extends Document {
      static async getInitialProps(ctx) {
        const sheet = new ServerStyleSheet();
        const originalRenderPage = ctx.renderPage;
    
        try {
          ctx.renderPage = () =>
            originalRenderPage({
              enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
            });
    
          const initialProps = await Document.getInitialProps(ctx);
          return {
            ...initialProps,
            styles: (
              <>
                {initialProps.styles}
                {sheet.getStyleElement()}
              </>
            ),
          };
        } finally {
          sheet.seal();
        }
      }
    }

By following these steps, styled-components will correctly generate and inline styles during server-side rendering, ensuring that your Rothko UI components are styled appropriately when your Next.js application is loaded.

Author

@luxo-ai [email protected]

Support the project: 0x7A67fF6354d983B6cfc3a7f7C5BA93f73C864b32

License

MIT