Skip to main content

Installation

Get started with QwickApps React Framework by installing it in your React project.

Prerequisites​

  • Node.js: Version 16 or higher
  • React: Version 18 or higher
  • Package Manager: npm, yarn, or pnpm

Installation​

Install QwickApps React Framework and its peer dependencies:

npm install @qwickapps/react-framework

Peer Dependencies​

QwickApps React Framework requires the following peer dependencies:

npm install react react-dom @emotion/react @emotion/styled @mui/material @mui/icons-material react-router-dom

Or install everything at once:

npm install @qwickapps/react-framework react react-dom @emotion/react @emotion/styled @mui/material @mui/icons-material react-router-dom

CSS Setup​

Import the framework's CSS in your main application file:

src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@qwickapps/react-framework/dist/index.css';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Basic Setup​

Wrap your application with the QwickApp provider:

src/App.tsx
import React from 'react';
import { QwickApp } from '@qwickapps/react-framework';

function App() {
  return (
    <QwickApp appId="my-app">
      <div>
        <h1>Hello QwickApps!</h1>
        <p>Your app is ready to go!</p>
      </div>
    </QwickApp>
  );
}

export default App;

Verification​

Create a simple test to verify the installation:

src/components/TestComponent.tsx
import React from 'react';
import { ThemeSwitcher, Button } from '@qwickapps/react-framework';

export function TestComponent() {
  return (
    <div>
      <h2>QwickApps React Framework Test</h2>
      <ThemeSwitcher />
      <Button variant="contained" color="primary">
        Test Button
      </Button>
    </div>
  );
}

If you can see the theme switcher and button, you're all set! 🎉

TypeScript Support​

QwickApps React Framework includes full TypeScript definitions. No additional @types packages are needed.

Next Steps​

Troubleshooting​

Common Issues​

Module resolution errors: Make sure all peer dependencies are installed:

npm install --save-exact react react-dom @emotion/react @emotion/styled

CSS not loading: Ensure you've imported the CSS file in your main entry point:

import '@qwickapps/react-framework/dist/index.css';

Theme not working: Make sure your app is wrapped with <QwickApp>:

<QwickApp appId="your-app-name">
  {/* Your app content */}
</QwickApp>

Need more help? Check our GitHub Issues or start a Discussion.