A modern, responsive practice project built with Next.js 15, Tailwind CSS v4, Tailark, Shadcn UI, and smooth scrolling powered by Lenis. Designed to explore component libraries and advanced UI interactions in a scalable Next.js setup.
- About
- Demo
- Tech Stack
- Features
- Installation
- Getting Started with Lenis + Shadcn UI
- Usage
- Contributing
- License
This project is a frontend practice project to experiment with modern web technologies. It demonstrates how to integrate multiple Tailwind-based UI libraries, smooth scroll animations, and component-driven development in Next.js 15.
It’s ideal for exploring:
- Tailark for ready-made Tailwind components
- Shadcn UI for accessible and reusable components
- Lenis for smooth scrolling effects
A live demo of the project is available here:
- Next.js 15 – Server-side rendering and React framework
- Tailwind CSS v4 – Utility-first CSS framework
- Tailark – Prebuilt Tailwind components for rapid UI development
- Shadcn UI – Accessible and reusable UI components built with Tailwind
- Lenis – Smooth scrolling library for fluid page interactions
- Smooth scrolling navigation powered by Lenis
- Fully responsive UI with Tailwind CSS v4
- Component-driven design using Tailark and Shadcn UI
- Modular folder structure for scalability
- Easily extendable with new components and pages
Follow these steps to run the project locally:
# Clone the repository
git clone https://github.com/IFTE-13/Smart-Solutions.git
# Navigate to the project folder
cd smart-solutions
# Install dependencies
npm install
# or
yarn install
# or
pnpm install
# Start the development server
npm run dev
# or
yarn dev
# or
pnpm run devOpen http://localhost:3000 in your browser to view the app.
Here’s a quick example of using Lenis for smooth scrolling and a Shadcn UI Button component in your Next.js 15 project:
Lenis Setup
Create a lib/lenis.js file:
'use client';
import { useEffect } from 'react';
import Lenis from '@studio-freight/lenis';
export default function useLenis() {
useEffect(() => {
const lenis = new Lenis({
duration: 1.2,
easing: (t) => t,
smooth: true,
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
}, []);
}Or if you want to use a type safed version to use with typescript
"use client";
import { useEffect } from "react";
import Lenis from "@studio-freight/lenis";
export default function LenisProvider({ children }: { children: React.ReactNode }) {
useEffect(() => {
const lenis = new Lenis({
duration: 1.2,
easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // custom easing
});
function raf(time: number) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
}, []);
return <>{children}</>;
}Use it in your desired page:
'use client';
import useLenis from '@/lib/lenis';
import { Button } from '@/components/ui/button';
export default function HomePage() {
useLenis();
return (
<main className="min-h-screen flex flex-col items-center justify-center gap-8">
<h1 className="text-4xl font-bold">Welcome to Quantum UI</h1>
<Button variant="default">Click Me</Button>
</main>
);
}Use it on your root layout for full application coverage
import "./globals.css";
import { cn } from "@/lib/utils";
import LenisProvider from "@/providers/lenis-provider";
import { ThemeProvider } from "@/providers/theme-provider"
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<LenisProvider>
<html lang="en" suppressHydrationWarning>
<body
className={cn(
'min-h-screen font-sans antialiased'
)}
>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html>
</LenisProvider>
);
}This will give you smooth scrolling across the page and a working Shadcn UI button component
- Navigate through the pages using the top navigation bar
- Observe smooth scrolling effects on all sections
- Explore components in /src/components to see Tailark and Shadcn UI in action
- Customize Tailwind classes and component props to experiment with UI variations
Contributions are welcome! To contribute:
- Fork the repository
- Create a new branch (git checkout -b feature/YourFeature)
- Make your changes and commit (git commit -m "Add new feature")
- Push the branch (git push origin feature/YourFeature)
- Open a Pull Request
Caution
This project is licensed under the MIT License. Feel free to use and modify the code as per the terms of the license.