@academy-sdk/sdk

Core SDK for building custom learner templates for the Academy platform. Provides reusable React components, hooks, TypeScript contracts, and utilities.

Installation

npm install @academy-sdk/sdk

Peer Dependencies

npm install react react-dom lucide-react clsx class-variance-authority tailwind-merge

Usage

Hooks

import { useUser, useMyCourses, useMyBundles, useTheme, useToast } from '@academy-sdk/sdk';

function MyComponent() {
  const user = useUser();
  const { courses, loading } = useMyCourses();
  const { theme, toggleTheme } = useTheme();
}

Contracts & Types

Define your template manifest using the SDK contracts:

import type { TemplateManifest, MyLearningPageProps, CatalogCoursesPageProps } from '@academy-sdk/sdk/contracts';

const template: TemplateManifest = {
  name: 'my-template',
  version: '1.0.0',
  pages: {
    MyLearningPage: CustomMyLearningPage,
    CatalogCoursesPage: CustomCatalogCoursesPage,
    // ... other pages
  },
};

export default template;

Components

Components are organized using atomic design:

// Atoms — basic building blocks
import { Button, Input, Card, Badge, Avatar, ProgressBar, Tabs } from '@academy-sdk/sdk/components/atoms';

// Molecules — composite components
import { CourseCard, Pagination, PageHeader, SearchInput, EmptyState, LoadingSpinner } from '@academy-sdk/sdk/components/molecules';

// Organisms — complex components
import { LearnerNavbar, LearnerSidebar, CourseSidebar, LessonNotes, LessonBookmarks } from '@academy-sdk/sdk/components/organisms';

// Default pages — use as-is or as starting points
import { MyLearningPage, CatalogCoursesPage, CourseDetailPage, CoursePlayerPage } from '@academy-sdk/sdk/components/pages';

Default Layout

import { DefaultLayout } from '@academy-sdk/sdk';

Subpath Exports

| Import Path | Contents | |---|---| | @academy-sdk/sdk | Hooks, types, contracts, utilities, layout | | @academy-sdk/sdk/contracts | TemplateManifest & page prop interfaces | | @academy-sdk/sdk/hooks | React hooks (useUser, useMyCourses, etc.) | | @academy-sdk/sdk/types | TypeScript type definitions | | @academy-sdk/sdk/utils | Utility functions | | @academy-sdk/sdk/components | All components | | @academy-sdk/sdk/components/atoms | Button, Input, Card, Badge, Avatar, etc. | | @academy-sdk/sdk/components/molecules | CourseCard, Pagination, SearchInput, etc. | | @academy-sdk/sdk/components/organisms | LearnerNavbar, LearnerSidebar, etc. | | @academy-sdk/sdk/components/pages | Default page implementations | | @academy-sdk/sdk/styles.css | Bundled CSS styles |

How It Works

• Templates receive all data as props — no API calls needed
• Use SDK components as building blocks, or build from scratch
• Only customize the view layer — the platform handles routing, data, and logic

Available Page Contracts

| Page | Props Interface | |---|---| | My Learning | MyLearningPageProps | | Catalog Courses | CatalogCoursesPageProps | | Catalog Bundles | CatalogBundlesPageProps | | Course Detail | CourseDetailPageProps | | Bundle Detail | BundleDetailPageProps | | Course Player | CoursePlayerPageProps | | Messages | MessagesPageProps | | Manual Review | ManualReviewPageProps | | Learner Settings | LearnerSettingsPageProps | | Payment Success | PaymentSuccessPageProps | | Payment Cancel | PaymentCancelPageProps | | Creator Profile | CreatorProfilePageProps |

License

MIT