Sofondo
SofondoFrameworkDocs

Components

Explore the full library of UI components available in the Sofondo framework

All components are fully typed with TypeScript and designed to work seamlessly with Next.js and React.

Installation

npm install @sofondo/react @sofondo/styles

Card

A flexible container component for grouping related content with optional title and actions.

Example Usage

import { Card } from '@sofondo/react';

<Card title="My Card">
  <p>Card content goes here</p>
</Card>

PageHeader

A header component for page titles and descriptions.

Example Usage

import { PageHeader } from '@sofondo/react';

<PageHeader
  title="Page Title"
  description="Page description"
/>

Breadcrumb

Navigation component showing the current page location within the site hierarchy.

Example Usage

import { Breadcrumb } from '@sofondo/react';

const items = [
  { label: 'Home', href: '/' },
  { label: 'Docs', href: '/docs' },
  { label: 'Components' }
];

<Breadcrumb items={items} />

DataGrid

A powerful table component for displaying and managing tabular data with sorting and filtering.

Example Usage

import { DataGrid } from '@sofondo/react';

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

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

<DataGrid columns={columns} data={data} />

StatCard

Display key metrics and statistics with optional trends and icons.

Example Usage

import { StatCard } from '@sofondo/react';

<StatCard
  title="Total Users"
  value="1,234"
  trend="+12%"
  trendDirection="up"
/>

StatGrid

A responsive grid layout for displaying multiple StatCard components.

Example Usage

import { StatGrid, StatCard } from '@sofondo/react';

<StatGrid>
  <StatCard title="Users" value="1,234" />
  <StatCard title="Revenue" value="$45,678" />
  <StatCard title="Orders" value="890" />
</StatGrid>

ProgressBar

Visual indicator of task completion or loading progress.

Example Usage

import { ProgressBar } from '@sofondo/react';

<ProgressBar value={75} max={100} />

Skeleton

Loading placeholder that mimics the shape of content being loaded.

Example Usage

import { Skeleton } from '@sofondo/react';

<Skeleton width="100%" height="20px" />
<Skeleton width="80%" height="20px" />
<Skeleton width="60%" height="20px" />

Toast

Temporary notification messages for user feedback.

Example Usage

import { useToast } from '@sofondo/react';

function MyComponent() {
  const { showToast } = useToast();

  const handleClick = () => {
    showToast('Success!', 'success');
  };

  return <button onClick={handleClick}>Show Toast</button>;
}

CustomScrollbar

Styled scrollbar component for better visual consistency across browsers.

Example Usage

import { CustomScrollbar } from '@sofondo/react';

<CustomScrollbar height="400px">
  <div>Long content that scrolls...</div>
</CustomScrollbar>

AdminLayout

Complete admin panel layout with sidebar, header, and content area.

Example Usage

import AdminLayout from '@sofondo/react';

const getSectionFromPath = (pathname) => {
  // Return section config based on pathname
  return { id: 'dashboard', label: 'Dashboard' };
};

<AdminLayout
  header={<YourHeaderComponent />}
  getSectionFromPath={getSectionFromPath}
>
  {children}
</AdminLayout>

Sidebar

Collapsible navigation sidebar for admin layouts.

Example Usage

import Sidebar from '@sofondo/react';

const sections = [
  {
    id: 'main',
    label: 'Main',
    items: [
      { id: 'dashboard', label: 'Dashboard', href: '/', icon: '📊' }
    ]
  }
];

<Sidebar
  sections={sections}
  currentSection={{ id: 'main', label: 'Main' }}
/>

Header

Top navigation header with logo, menu items, and user profile.

Example Usage

import Header from '@sofondo/react';

<Header
  logo={{ src: '/logo.png', alt: 'Logo', href: '/' }}
  user={{ name: 'John Doe', email: 'john@example.com' }}
  menuItems={[
    { label: 'Settings', href: '/settings' }
  ]}
/>

ContextPanel

Sliding panel for displaying contextual information or actions.

Example Usage

import ContextPanel from '@sofondo/react';

<ContextPanel isOpen={isOpen} onClose={() => setIsOpen(false)}>
  <div>Panel content</div>
</ContextPanel>

Popover

Floating content panel anchored to a trigger element. Built on Radix UI for accessibility and automatic positioning.

Example Usage

import { Popover } from '@sofondo/react';
import { useState } from 'react';

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Popover
      trigger={<button>Open Popover</button>}
      open={isOpen}
      onOpenChange={setIsOpen}
      side="bottom"
      align="center"
      sideOffset={8}
    >
      <div style={{ padding: '16px', minWidth: '200px' }}>
        <h4>Popover Title</h4>
        <p>Popover content goes here.</p>
      </div>
    </Popover>
  );
}

TableOfContents

Automatically tracks and displays page headings with smooth scrolling navigation. Highlights the currently visible section and auto-scrolls to keep active items in view.

Example Usage

import TableOfContents from '@sofondo/react';

const headings = [
  { id: 'introduction', text: 'Introduction', level: 2 },
  { id: 'getting-started', text: 'Getting Started', level: 2 },
  { id: 'installation', text: 'Installation', level: 3 },
  { id: 'usage', text: 'Usage', level: 3 }
];

<TableOfContents
  headings={headings}
  title="On This Page"
/>

Next Steps

Check out the hooks and utilities to enhance your components with additional functionality.