[GUIDE]: GETTING_STARTED

Getting Started with Library Templates

Learn how to copy, customize, and integrate production-ready templates into your Next.js project in under 10 minutes.

Time: ~10 minutes

Level: Beginner

[0x00] WHAT YOU'LL LEARN

✓How to navigate the library and find the right template
✓How to copy template code into your project
✓Understanding template structure and dependencies
✓First customizations and basic modifications
✓Next steps for integrations and advanced features

[0x01] PREREQUISITES

Before starting, ensure you have the following set up:

✓ Next.js 15+ Project

App Router with TypeScript enabled. Templates use Next.js 15 features.

✓ Fabrk Dependencies

All templates assume you're using Fabrk with Radix UI, Tailwind CSS 4, and the design system.

✓ Design System Setup

Templates use mode.font, mode.radius, and design tokens from @/design-system.

[0x02] STEP 1: BROWSE THE LIBRARY

Start by exploring the template library to find components that match your needs.

[NAVIGATION TIPS]:

Search bar: Type keywords like "authentication", "dashboard", or "billing"
Category filters: Filter by Dashboards, Auth, Admin, etc.
Featured section: Most popular and essential templates
Status badges: Look for "Popular", "New", or "Essential" tags

[EXAMPLE]:

Building a SaaS dashboard? Search for "analytics dashboard" or filter by "Dashboards" category to find the Analytics Dashboard, Team Dashboard, and Chart Library templates.

[0x03] STEP 2: PREVIEW & INSPECT

Each template page has two tabs: [PREVIEW] and [CODE].

[PREVIEW TAB]:

See the template in action with live interactions
Test responsive behavior by resizing your browser
Verify it matches your design requirements

[CODE TAB]:

Complete, copyable source code
Includes all imports, state management, and styling
Ready to paste with minimal modifications

Scroll down to see the File Structure section, which shows exactly where to place the code in your project.

[0x04] STEP 3: COPY THE CODE

Click the [CODE] tab and use the copy button in the top-right corner of the code block.

[QUICK COPY]:

Switch to [CODE] tab on template page
Click the copy icon in the code block header
Code is now in your clipboard with syntax highlighting preserved for readability

[TIP]:

The code includes comments showing exactly where to paste it in your project structure (e.g., app/(dashboard)/analytics/page.tsx).

[0x05] STEP 4: PASTE INTO YOUR PROJECT

Create the file structure shown in the template's [FILE STRUCTURE] section.

[EXAMPLE FILE STRUCTURE]:

1$app/
2$  (dashboard)/          ← Create route group if needed
3$    analytics/          ← Create directory
4$      page.tsx          ← Paste template code here
5$components/
6$  metric-cards.tsx      ← Extract component (if splitting)
7$  revenue-chart.tsx     ← Extract component (if splitting)

What to adjust after pasting:

Import paths: Verify all @/components/... imports resolve correctly
Mock data: Replace placeholder data with real API calls or database queries
Routes: Update any hardcoded routes to match your app structure
Environment variables: Add any required env vars to .env.local

[0x06] STEP 5: TEST & VERIFY

Run your development server and verify the template works:

1$# Start dev server
2$npm run dev
3
4$# Visit your new route
5$# e.g., http://localhost:3000/analytics
6
7$# Check for TypeScript errors
8$npm run type-check
9
10$# Run linting
11$npm run lint

[COMMON ISSUES]:

Missing imports? Check you have all required components installed
TypeScript errors? Verify @/design-system module exists
Styling broken? Ensure Tailwind CSS config includes all template paths

See the Troubleshooting Guide for detailed solutions.

[00x7] NEXT STEPS

You've successfully completed this guide! Now:

Add Authentication

Integrate NextAuth for user login, sessions, and protected routes

Connect Database

Replace mock data with real database queries using Prisma

Customize Design

Change colors, fonts, spacing, and components to match your brand

Browse More Templates

Explore 30+ more production-ready templates across all categories

[00x8] QUICK REFERENCE

[RESOURCES]

[INTEGRATIONS]

1$app/

2$ (dashboard)/ ← Create route group if needed

3$ analytics/ ← Create directory

4$ page.tsx ← Paste template code here

5$components/

6$ metric-cards.tsx ← Extract component (if splitting)

7$ revenue-chart.tsx ← Extract component (if splitting)