Skip to Content
DocumentationGetting StartedInstallation

Installation

Learn how to install Poodle in your React project.

Package Manager

Choose your preferred package manager to install Poodle:

npm

npm install poodle

pnpm

pnpm add poodle

yarn

yarn add poodle

Import Styles

After installation, import Poodle’s CSS in your main application file:

// app/layout.tsx or src/main.tsx
import 'poodle/dist/style.css'

Next.js App Router

If you’re using Next.js with the App Router:

// app/layout.tsx
import 'poodle/dist/style.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Next.js Pages Router

If you’re using Next.js with the Pages Router:

// pages/_app.tsx
import 'poodle/dist/style.css'
import type { AppProps } from 'next/app'
 
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Vite

If you’re using Vite:

// src/main.tsx
import 'poodle/dist/style.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>
)

Create React App

If you’re using Create React App:

// src/index.tsx
import 'poodle/dist/style.css'
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
 
const root = ReactDOM.createRoot(document.getElementById('root')!)
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

Verify Installation

To verify that Poodle is installed correctly, try importing a component:

import { Button } from 'poodle'
 
function App() {
  return <Button>Hello Poodle!</Button>
}

If you see a button rendered on your page, you’re all set! 🎉

Next Steps

OverviewQuick Start