├── .eslintrc.json ├── .example.env.local ├── .gitignore ├── README.md ├── app ├── favicon.ico ├── globals.css ├── layout.tsx ├── lens-provider.tsx ├── page.tsx ├── profile │ └── page.tsx ├── search │ └── page.tsx ├── theme-provider.tsx └── web3modal-provider.tsx ├── components.json ├── components ├── dropdown.tsx ├── nav.tsx └── ui │ ├── avatar.tsx │ ├── button.tsx │ └── dropdown-menu.tsx ├── lib └── utils.ts ├── next.config.js ├── package.json ├── postcss.config.js ├── public ├── next.svg └── vercel.svg ├── tailwind.config.js └── tsconfig.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.example.env.local: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_WC_ID= -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # lockfiles 4 | yarn.lock 5 | package-lock.json 6 | bun.lockb 7 | 8 | # dependencies 9 | /node_modules 10 | /.pnp 11 | .pnp.js 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | 32 | # local env files 33 | .env*.local 34 | 35 | # vercel 36 | .vercel 37 | 38 | # typescript 39 | *.tsbuildinfo 40 | next-env.d.ts 41 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## ShadCN + Lens Protocol example app 2 | 3 | A quick prototype combining Lens Protocol + ShadCN UI 4 | 5 | I will continue iterating on and improving this in the future. 6 | 7 | ## Getting started 8 | 9 | 1. Clone repo 10 | 11 | ```sh 12 | git clone git@github.com:dabit3/lens-shadcn.git 13 | ``` 14 | 15 | 2. Install dependencies 16 | 17 | ```sh 18 | npm install # or yarn, etc.. 19 | ``` 20 | 21 | 3. Create WalletConnect ID, then copy the contents of `.example.env.local` to a new file called `.env.local` with the WalletConnect ID 22 | 23 | 4. Run the app 24 | 25 | ```sh 26 | npm run dev 27 | ``` -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dabit3/lens-shadcn/b32d777cb0edb7e7aaa68a88904088a713bb16e0/app/favicon.ico -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | 6 | @layer base { 7 | :root { 8 | --background: 0 0% 100%; 9 | --foreground: 240 10% 3.9%; 10 | --card: 0 0% 100%; 11 | --card-foreground: 240 10% 3.9%; 12 | --popover: 0 0% 100%; 13 | --popover-foreground: 240 10% 3.9%; 14 | --primary: 240 5.9% 10%; 15 | --primary-foreground: 0 0% 98%; 16 | --secondary: 240 4.8% 95.9%; 17 | --secondary-foreground: 240 5.9% 10%; 18 | --muted: 240 4.8% 95.9%; 19 | --muted-foreground: 240 3.8% 46.1%; 20 | --accent: 240 4.8% 95.9%; 21 | --accent-foreground: 240 5.9% 10%; 22 | --destructive: 0 84.2% 60.2%; 23 | --destructive-foreground: 0 0% 98%; 24 | --border: 240 5.9% 90%; 25 | --input: 240 5.9% 90%; 26 | --ring: 240 5.9% 10%; 27 | --radius: 0.5rem; 28 | } 29 | 30 | .dark { 31 | --background: 240 10% 3.9%; 32 | --foreground: 0 0% 98%; 33 | --card: 240 10% 3.9%; 34 | --card-foreground: 0 0% 98%; 35 | --popover: 240 10% 3.9%; 36 | --popover-foreground: 0 0% 98%; 37 | --primary: 0 0% 98%; 38 | --primary-foreground: 240 5.9% 10%; 39 | --secondary: 240 3.7% 15.9%; 40 | --secondary-foreground: 0 0% 98%; 41 | --muted: 240 3.7% 15.9%; 42 | --muted-foreground: 240 5% 64.9%; 43 | --accent: 240 3.7% 15.9%; 44 | --accent-foreground: 0 0% 98%; 45 | --destructive: 0 62.8% 30.6%; 46 | --destructive-foreground: 0 0% 98%; 47 | --border: 240 3.7% 15.9%; 48 | --input: 240 3.7% 15.9%; 49 | --ring: 240 4.9% 83.9%; 50 | } 51 | } 52 | 53 | 54 | @layer base { 55 | * { 56 | @apply border-border; 57 | } 58 | body { 59 | @apply bg-background text-foreground; 60 | } 61 | } -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import './globals.css' 2 | import { Inter } from 'next/font/google' 3 | import { ThemeProvider } from "@/app/theme-provider" 4 | import { LensProvider } from '@/app/lens-provider' 5 | import { Web3ModalProvider } from '@/app/web3modal-provider' 6 | import { Nav } from '@/components/nav' 7 | 8 | const inter = Inter({ subsets: ['latin'] }) 9 | 10 | export default function Layout({ children }) { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 |