Tech Stack Reference for Slik Dev-Generated Apps

When you scaffold a project with Slik Dev, the generated codebase uses a curated set of modern, production-proven technologies. This page documents what’s included, what each tool does, and how they fit together — so you know exactly what you’re working with from day one.

Next.js

App Router ready. Your project uses the Next.js App Router with server components, file-based routing, and built-in API routes. No extra configuration needed.

React

Component architecture. All UI is built with React 18 functional components and hooks. The component library in components/ is ready to extend.

TypeScript

End-to-end typed. The entire project — pages, components, API routes, and database models — is TypeScript with strict mode enabled.

Tailwind CSS

Utility-first styling. All components use Tailwind utility classes. The tailwind.config.ts file is pre-configured with the theme’s color palette and custom extensions.

Framer Motion

Fluid animations. Page transitions, hover effects, and scroll-triggered animations are built with Framer Motion. All animations use initial, animate, and whileInView props.

Lucide React

Icon library. All icons in the generated UI come from Lucide React. Import any icon by name: import { ArrowRight } from 'lucide-react'.

NextAuth / Auth.js

Secure sessions. Authentication is powered by NextAuth/Auth.js with OAuth and magic link providers pre-wired. Session handling, callbacks, and middleware are all configured for you.

Prisma

Type-safe ORM. Your database schema lives in prisma/schema.prisma. Use npx prisma db push to sync changes and npx prisma studio to browse your data.

Supporting utilities

In addition to the core stack, every Slik Dev project includes:

Package	Purpose
`clsx`	Conditionally join class names
`tailwind-merge`	Merge Tailwind classes without conflicts
`supabase`	Hosted PostgreSQL and real-time features (when database is enabled)
`ESLint`	Linting with strict rules pre-configured
`Prettier`	Code formatting, pre-configured

How they fit together

A typical Slik Dev component uses the full stack in a few lines:

import { motion } from 'framer-motion'
import { ArrowRight } from 'lucide-react'
import { clsx } from 'clsx'

interface CardProps {
  title: string
  active?: boolean
}

export function FeatureCard({ title, active }: CardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      className={clsx(
        'rounded-2xl border p-6 transition-all',
        active
          ? 'border-emerald-500 bg-emerald-500/10'
          : 'border-white/10 bg-white/5'
      )}
    >
      <h3 className="text-lg font-semibold text-white">{title}</h3>
      <ArrowRight className="mt-2 text-emerald-400" />
    </motion.div>
  )
}

All packages are pinned to modern stable versions at the time Slik Dev generates your project. Run npm update periodically to keep dependencies current.

Get Started

Configuration

Guides

Reference

Tech Stack Reference for Slik Dev-Generated Apps

Next.js

React

TypeScript

Tailwind CSS

Framer Motion

Lucide React

NextAuth / Auth.js

Prisma

Supporting utilities

How they fit together

Next.js

React

TypeScript

Tailwind CSS

Framer Motion

Lucide React

NextAuth / Auth.js

Prisma

​Supporting utilities

​How they fit together

Supporting utilities

How they fit together