Sofondo
SofondoFrameworkDocs

New Project Setup

Complete guide to setting up a new project with the Sofondo Framework.

Prerequisites

Before getting started, ensure you have:

  • Node.js 18.x or higher
  • npm, pnpm, or yarn package manager
  • Basic knowledge of React and Next.js

Installation

Install the required Sofondo packages:

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

Or with pnpm:

pnpm add @sofondo/core @sofondo/react @sofondo/styles

Project Structure

A typical Sofondo project structure:

my-app/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── dashboard/
│       └── page.tsx
├── components/
│   └── custom/
├── config/
│   └── sofondo.config.ts
├── public/
└── package.json

Configuration

Create a Sofondo configuration file at config/sofondo.config.ts:

import { defineConfig } from '@sofondo/core';

export default defineConfig({
  theme: {
    defaultMode: 'light',
    enableSystemTheme: true,
  },
  sidebar: {
    defaultCollapsed: false,
    collapsible: true,
  },
  components: {
    dataGrid: {
      pageSize: 10,
      pageSizeOptions: [10, 25, 50, 100],
    },
  },
});

Setting Up the Provider

Wrap your application with the Sofondo provider in your root layout:

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ConfigProvider config={config}>
          {children}
        </ConfigProvider>
      </body>
    </html>
  );
}

Creating Your First Page

Create a dashboard page using Sofondo components:

// app/dashboard/page.tsx
import { PageHeader, StatGrid, StatCard, DataGrid } from '@sofondo/react';

const columns = [
  { key: 'name', header: 'Name', sortable: true },
  { key: 'email', header: 'Email', sortable: true },
  { key: 'role', header: 'Role' },
];

const data = [
  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
];

export default function DashboardPage() {
  return (
    <div>
      <PageHeader
        title="Dashboard"
        subtitle="Welcome to your Sofondo-powered application"
      />

      <StatGrid>
        <StatCard title="Total Users" value="1,234" trend="+12%" trendDirection="up" />
        <StatCard title="Revenue" value="$45,678" trend="+8%" trendDirection="up" />
        <StatCard title="Active Sessions" value="89" trend="-3%" trendDirection="down" />
      </StatGrid>

      <DataGrid
        columns={columns}
        data={data}
        title="Recent Users"
      />
    </div>
  );
}

Next Steps

Now that your project is set up:

  1. Explore the Components to learn about available UI elements
  2. Check out Hooks for state management and utilities
  3. Review Best Practices for recommended patterns
  4. See Real-World Examples for complete application examples

Getting Help