Getting Started

Learn how to get up and running with the Sofondo framework

Installation

Install the Sofondo packages you need for your project:

npm install @sofondo/core @sofondo/react @sofondo/next @sofondo/styles

Quick Setup

Set up your Next.js app with Sofondo:

1. Update your root layout

// app/layout.tsx
import '@sofondo/styles/global.css';
import { ThemeProvider } from '@sofondo/react';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

2. Create an admin layout

// app/admin/layout.tsx
import { AdminLayout } from '@sofondo/react';
import '@sofondo/styles/components/AdminLayout.module.css';

export default function AdminLayoutWrapper({ children }) {
  return (
    <AdminLayout
      logo={{ src: '/logo.png', alt: 'My App', href: '/' }}
      menuItems={[
        { label: 'Dashboard', href: '/admin', icon: '📊' },
        { label: 'Users', href: '/admin/users', icon: '👥' },
      ]}
    >
      {children}
    </AdminLayout>
  );
}

3. Start building

You're ready to use Sofondo components and utilities in your application!

Next Steps

🎨 Components

Explore pre-built UI components

View Components →

🪝 Hooks

Learn about custom React hooks

Browse Hooks →

🛠️ Utilities

Discover utility functions

View Utilities →

Need Help?

Check out the examples section for complete working examples, or browse the component documentation for detailed API references.

View Examples →