Eggspot - Design System

Welcome to Eggspot Design System (DS).

Dango allows you to make beautiful, modern, and fast websites/applications regardless of your design experience, created with React.js and Stitches, based on React Aria and inspired by NextUI.

Installation

Inside your React project directory, install NextUI by running either of the following:

yarn add @eggspot/ui
# or
npm install @eggspot/ui

Next.js

Go to pages/_app.tsx (create it if it doesn't exist) and add this:

// _app.tsx
import { ThemeUIProvider } from '@eggspot/ui';

function MyApp({ Component, pageProps }) {
  return (
    // 2. Use at the root of your app
    <ThemeUIProvider>
      <Component {...pageProps} />
    </ThemeUIProvider>
  );
}

export default MyApp;

Go to pages/_document.tsx (create if it doesn't exist) and add this:

//_document.tsx
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CssBaseline } from '@eggspot/ui';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: React.Children.toArray([initialProps.styles])
    };
  }

  render() {
    return (
      <Html lang="en">
        <Head>{CssBaseline.flush()}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Using components

import { Button } from '@eggspot/ui';

const Component = () => <Button>Click me</Button>;

ThemeUIProvider Props

Attribute	Type	Accepted values	Description	Default
theme	`UIThemes`	ThemeObject	Optional custom theme	`dark`
disableBaseline	`boolean`	`true/false`	Includes `<CssBaseline/>`	`false`

Typescript types

Theme object

For more information you can see the Stitches theme documention

{
  "type": "dark", // light / dark
  "className": "", // optional
  "theme": {
    "colors": {},
    "space": {},
    "fontSizes": {},
    "fonts": {},
    "fontWeights": {},
    "lineHeights": {},
    "letterSpacings": {},
    "sizes": {},
    "borderWidths": {},
    "borderStyles": {},
    "radii": {},
    "shadows": {},
    "zIndices": {},
    "transitions": {}
  }
}