Splash UI

A modern UI-kit for React applications inspired by Atlassian Forge UI-kit, built with Material UI and Tailwind CSS.

Installation

npm install splash-ui
# or
yarn add splash-ui

You'll also need to install the peer dependencies if you don't have them already:

npm install @emotion/react @emotion/styled @mui/material tailwindcss
# or
yarn add @emotion/react @emotion/styled @mui/material tailwindcss

Requirements

This package has the following peer dependencies:

• React (^18.0.0 or ^19.0.0)
• React DOM (^18.0.0 or ^19.0.0)
• Material UI (^7.0.0)
• @emotion/react (^11.0.0)
• @emotion/styled (^11.0.0)
• Tailwind CSS (^3.0.0 or ^4.0.0)

Usage

import React from 'react';
import { Button } from 'splash-ui';

function App() {
  return (
    <div>
      <Button variant="contained" color="primary" onClick={() => alert('Button clicked!')}>
        Click Me
      </Button>
    </div>
  );
}

export default App;

Components

Button

A button component that combines the functionality of Material UI with the styling capabilities of Tailwind CSS.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'contained' | 'outlined' | 'text' | 'contained' | The variant to use | | color | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'primary' | The color of the component | | size | 'small' | 'medium' | 'large' | 'medium' | The size of the component | | disabled | boolean | false | If true, the button will be disabled | | fullWidth | boolean | false | If true, the button will take up the full width of its container | | startIcon | node | - | Element placed before the children | | endIcon | node | - | Element placed after the children | | onClick | function | - | Callback fired when the button is clicked | | className | string | - | Additional CSS class names |

Next.js Integration

To use Splash UI in a Next.js project, follow these additional steps:

1. Configure Next.js

Update your next.config.js to transpile the package:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['splash-ui'],
  // other config options...
}

module.exports = nextConfig

2. Set up Tailwind CSS

If you haven't already set up Tailwind CSS in your Next.js project:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Update your tailwind.config.js to include Splash UI components:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './node_modules/splash-ui/**/*.{js,jsx}', // Include splash-ui components
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Next.js Server vs Client Components

Splash UI components are marked with the "use client" directive, making them Client Components in Next.js. This is necessary because they include interactive elements like event handlers.

When using these components in your Next.js application:

• You can use them directly in Client Components
• If you want to use them in Server Components, you need to import them in a separate Client Component file

Example of correct usage in a Client Component:

// app/components/MyButton.jsx
"use client";

import { Button } from 'splash-ui';

export default function MyButton() {
  return (
    <Button onClick={() => alert('Clicked!')}>
      Click Me
    </Button>
  );
}

Then use your client component in a server component:

// app/page.jsx (Server Component)
import MyButton from './components/MyButton';

export default function Page() {
  return (
    <div>
      <h1>My Page</h1>
      <MyButton />
    </div>
  );
}

4. Import Tailwind CSS

In your global CSS file (usually styles/globals.css), include Tailwind directives:

@import "tailwindcss/preflight";
@import "tailwindcss/utilities";

Note: For Tailwind CSS v3, use the following instead:

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

Troubleshooting Next.js Integration

If you encounter issues when integrating Splash UI with Next.js, try these solutions:

1. "Unexpected token '<'" Error

This usually happens when Next.js is trying to load HTML as JavaScript. Try these fixes:

• Make sure you're using the component in a client component (with "use client" directive)
• Clear your Next.js cache: rm -rf .next and restart the dev server
• Update your next.config.js to properly transpile the package:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['splash-ui'],
  experimental: {
    esmExternals: 'loose', // This can help with ESM compatibility issues
  },
}

module.exports = nextConfig

2. Event Handler Errors with Server Components

If you see errors about event handlers not being allowed in Server Components:

• Create a separate Client Component file with the "use client" directive
• Import and use Splash UI components only in Client Components
• Then import your Client Component into your Server Component

License

This project is licensed under the MIT License - see the LICENSE file for details.