Installation
Step-by-step guide to installing and configuring Gecko UI
Installation
This guide will help you install and configure Gecko UI in your project.
Prerequisites
Before installing Gecko UI, ensure you have:
- Node.js 18.0.0 or higher
- React 19.2.0 or higher
- React DOM 19.2.0 or higher
Package Installation
Install Gecko UI using your preferred package manager:
npm install @geckoui/geckouipnpm add @geckoui/geckouiyarn add @geckoui/geckouiInstall react-hook-form, which is required for form components:
npm install react-hook-formpnpm add react-hook-formyarn add react-hook-formStyle Setup
1. Import Base Styles
Import the main stylesheet in your root layout or main entry file:
import '@geckoui/geckoui/styles.css';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}import '@geckoui/geckoui/styles.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);2. Import styles for tailwindcss
If you use tailwindcss, make sure to import the css inside layer directive to correctly override the styles:
@import "tailwindcss";
@layer components {
@import "@geckoui/geckoui/styles.css";
}Importing it from your Tailwind CSS file also gives you a Tailwind utility for every Gecko UI
color, such as bg-surface-primary, text-text-muted, border-border-secondary or
bg-primary-600/50. They read the same CSS variables as the components, so they follow dark
mode and your theme overrides. See Theming.
Provider Setup
Wrap your app with GeckoUIProvider. This is required for the following components:
- Dialog
- Drawer
- ConfirmDialog
- Toast
Place GeckoUIProvider below your own context providers so overlays can read those contexts.
import { GeckoUIProvider } from '@geckoui/geckoui';
import '@geckoui/geckoui/styles.css';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<GeckoUIProvider>
{children}
</GeckoUIProvider>
</body>
</html>
);
}import { GeckoUIProvider } from '@geckoui/geckoui';
function App() {
return (
<GeckoUIProvider>
{/* Your app content */}
</GeckoUIProvider>
);
}
export default App;