{"id":14070023,"url":"https://github.com/danmindru/page-ui","last_synced_at":"2025-05-14T09:07:07.634Z","repository":{"id":237664723,"uuid":"793659369","full_name":"danmindru/page-ui","owner":"danmindru","description":"📃 Landing page UI components for React \u0026 Next.js, built on top of TailwindCSS","archived":false,"fork":false,"pushed_at":"2025-04-24T14:28:53.000Z","size":35549,"stargazers_count":1434,"open_issues_count":3,"forks_count":61,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-05-07T11:46:14.345Z","etag":null,"topics":["components","landing-page","next","nextjs","nextjs14","react","reactjs","shadcn","shadcn-ui","shadcnui","tailwindcss","typescript","ui","ui-components","ui-library"],"latest_commit_sha":null,"homepage":"https://pageui.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danmindru.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-04-29T16:21:45.000Z","updated_at":"2025-05-05T19:02:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"95d85379-dcb7-4a48-98c6-4fa38dcbfa36","html_url":"https://github.com/danmindru/page-ui","commit_stats":{"total_commits":146,"total_committers":4,"mean_commits":36.5,"dds":0.4794520547945206,"last_synced_commit":"daf1e273556c05d2ac856d60f76c95fa43383533"},"previous_names":["danmindru/page-ui"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danmindru%2Fpage-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danmindru%2Fpage-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danmindru%2Fpage-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danmindru%2Fpage-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danmindru","download_url":"https://codeload.github.com/danmindru/page-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254110374,"owners_count":22016391,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","landing-page","next","nextjs","nextjs14","react","reactjs","shadcn","shadcn-ui","shadcnui","tailwindcss","typescript","ui","ui-components","ui-library"],"created_at":"2024-08-13T07:07:25.732Z","updated_at":"2025-05-14T09:07:02.624Z","avatar_url":"https://github.com/danmindru.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","UI Libs","ui","Components \u0026 Libraries"],"sub_categories":[],"readme":"# Page UI 📃\n\n[![Page UI CLI version](https://img.shields.io/npm/v/@page-ui/wizard?label=cli\u0026style=flat)](https://github.com/danmindru/page-ui/tree/master/packages/cli)\n\n**Landing page components \u0026 templates that you can copy 📋 \u0026 paste 🍝**\u003cbr/\u003e\n[pageui.dev](https://pageui.dev)\n\nA collection of **free templates**, components and examples to create beautiful,\nhigh-converting landing pages with React and Next.js. Open source \u0026 themeable\nwith Tailwind CSS. Inspired by [Shadcn UI](https://ui.shadcn.com/).\n\nQuick links:\n- [📀 Installation](https://pageui.shipixen.com/docs/installation)\n- [📄 Templates](https://shipixen.com/demo/landing-page-templates)\n- [👩‍💻 A ton of demos](https://shipixen.com/demo/landing-page-component-examples)\n\n[Read more](https://pageui.dev/docs/introduction) about Page UI.\n\n\u003e ⚠️ Page UI currently works with Tailwind v3. We are working on adding support for v4.\n\n## 🎨 Templates\n\n[![Specta - A landing page template for a creator platform, featuring a marquee section and a showcase section](https://github.com/user-attachments/assets/e2cc026a-70eb-4b07-a20a-3b2128b90056)](https://shipixen.com/demo/landing-page-templates/template/specta)\n[![Gnomie AI - A landing page template for a B2C AI SaaS app, featuring carousel examples and product tours.](https://github.com/user-attachments/assets/a20b5c40-1955-48c4-b5f0-b8e3f47d3e9f)](https://shipixen.com/demo/landing-page-templates/template/gnomie-ai)\n[![Minimum Via - A landing page template for a minimalistic product, or productized agency. Uses text and minimal colors to create a clean look.](https://github.com/user-attachments/assets/b654b414-d1c8-492f-92c6-9c798e28a207)](https://shipixen.com/demo/landing-page-templates/template/minimum-via)\n[![ScreenshotTwo - A landing page template for a developer tool, featuring inline testimonials and a two-column layout with screenshots.](https://github.com/user-attachments/assets/6a778633-14de-455c-b5bf-8163929057ff)](https://shipixen.com/demo/landing-page-templates/template/screenshot-two)\n\n[See all templates 👀](https://shipixen.com/demo/landing-page-templates) \u003cbr/\u003e\n\n## 💻 Installation (Next.js)\n\n1️⃣ Start by creating a new Next.js app. You can use the following command:\n\n```bash\nnpx create-next-app@latest my-app --typescript --tailwind --eslint\n```\n\n2️⃣ Run the Page UI CLI\n\n```bash\nnpx @page-ui/wizard@latest init\n```\n\n3️⃣ Add the required dependencies to your Next.js app:\n\n```bash\nnpm install @tailwindcss/forms @tailwindcss/typography tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react @radix-ui/react-accordion\n```\n\n4️⃣ Add the below to your `global.css` file.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eShow code ↕️\u003c/b\u003e\u003c/summary\u003e\n\n```css\n@layer base {\n  :root {\n    --hard-shadow: 0px 29px 52px 0px rgba(0, 0, 0, 0.4),\n      22px 25px 16px 0px rgba(0, 0, 0, 0.2);\n    --hard-shadow-left: 0px 29px 52px 0px rgba(0, 0, 0, 0.4),\n      -22px 25px 16px 0px rgba(0, 0, 0, 0.2);\n    /* If you use Shadcn UI already, you should already have these variables defined */\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n    --primary-foreground: 355.7 100% 97.3%;\n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    /* If you use Shadcn UI already, you can skip this block. */\n    --background: 20 14.3% 4.1%;\n    --foreground: 0 0% 95%;\n    --card: 24 9.8% 10%;\n    --card-foreground: 0 0% 95%;\n    --popover: 0 0% 9%;\n    --popover-foreground: 0 0% 95%;\n    --primary-foreground: 144.9 80.4% 10%;\n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n    --muted: 0 0% 15%;\n    --muted-foreground: 240 5% 64.9%;\n    --accent: 12 6.5% 15.1%;\n    --accent-foreground: 0 0% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n  }\n\n  *,\n  ::before,\n  ::after {\n    @apply border-gray-100 dark:border-neutral-800;\n  }\n\n  * {\n    @apply font-sans;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    @apply font-semibold font-display;\n  }\n}\n\n@layer utilities {\n  .text-balance {\n    text-wrap: balance;\n  }\n\n  /**\n   * Perspective (used for images etc.)\n   */\n  .perspective-none {\n    transform: none;\n  }\n\n  .perspective-left {\n    box-shadow: var(--hard-shadow);\n    transform: perspective(400em) rotateY(-15deg) rotateX(6deg)\n      skew(-8deg, 4deg) translate3d(-4%, -2%, 0) scale(0.8);\n  }\n\n  .perspective-right {\n    box-shadow: var(--hard-shadow-left);\n    transform: perspective(400em) rotateY(15deg) rotateX(6deg) skew(8deg, -4deg)\n      translate3d(4%, -2%, 0) scale(0.8);\n  }\n\n  .perspective-bottom {\n    box-shadow: var(--hard-shadow);\n    transform: translateY(-4%) perspective(400em) rotateX(18deg) scale(0.9);\n  }\n\n  .perspective-bottom-lg {\n    box-shadow: var(--hard-shadow);\n    transform: perspective(400em) translate3d(0, -6%, 0) rotateX(34deg)\n      scale(0.8);\n  }\n\n  .perspective-paper {\n    box-shadow: var(--hard-shadow);\n    transform: rotateX(40deg) rotate(40deg) scale(0.8);\n  }\n\n  .perspective-paper-left {\n    box-shadow: var(--hard-shadow-left);\n    transform: rotateX(40deg) rotate(-40deg) scale(0.8);\n  }\n\n  /**\n   * Custom shadows\n   */\n  .hard-shadow {\n    box-shadow: var(--hard-shadow);\n  }\n\n  .hard-shadow-left {\n    box-shadow: var(--hard-shadow-left);\n  }\n\n  /**\n   * Container utilities\n   */\n  .container-narrow {\n    @apply max-w-4xl;\n  }\n\n  .container-wide {\n    @apply xl:max-w-6xl;\n  }\n\n  .container-ultrawide {\n    @apply xl:max-w-7xl;\n  }\n}\n```\n\n\u003c/details\u003e\n\n\u003cbr/\u003e\n\nFor other frameworks, check out the [installation guide](https://pageui.dev/docs/installation).\n\n\u003e ✨ Skip the setup by bootstrapping your app with [Shipixen](https://shipixen.com).\n\n## 🎨 Templates\nTo copy and paste from the available templates, visit [landing page templates](https://shipixen.com/demo/landing-page-templates).\n\n## 💿 Demos\nTo see the components in action, visit [landing page component examples](https://shipixen.com/demo/landing-page-component-examples).\n\n## 💪 Motivation\n\nDesigning and building landing pages that look good and convert well is hard business.\u003cbr/\u003e\nMost UI libraries focus on application UI, so when you set up a starer or boilerplate you end up staring at a blank canvas.\u003cbr/\u003e\nThe time spent browsing through bloated templates, figuring out how to port them to your app and then customizing them is time you could spend on your product.\n\n\u003e Start from a blank canvas to create, start from Page UI to innovate.\n\n## 📝 License\nLicensed under the [MIT license](https://github.com/danmindru/page-ui/blob/main/LICENSE.md)\n\n-----------------\n\n\u003ca href=\"https://apihustle.com\" target=\"_blank\"\u003e\n  \u003cimg height=\"60px\" src=\"https://user-images.githubusercontent.com/1515742/215217833-c07183d2-f688-4d1c-86ea-329f3b28f81c.svg\" alt=\"Apihustle Logo\" /\u003e\n\u003c/a\u003e\n\n-----------------\n\nSave 10s of hours of work by using Shipixen to generate a customized codebases with your branding, pages and blog \u003cbr/\u003e\n― then deploy it to Vercel with 1 click.\n\n| | |\n| :- | :- |\n| \u003ca href=\"https://shipixen.com\" target=\"_blank\"\u003e\u003cimg height=\"60px\" src=\"https://user-images.githubusercontent.com/1515742/281071510-d5c0095d-d336-4857-ad80-d18cf65f4acb.png\" alt=\"Shipixen Logo\" /\u003e\u003c/a\u003e \u003cbr/\u003e \u003cb\u003eShipixen\u003c/b\u003e \u003cbr/\u003e Create a blog \u0026 landing page in minutes with \u003cb\u003eShipixen\u003c/b\u003e. \u003cbr/\u003e Try the app on \u003ca href=\"https://shipixen.com\"\u003eshipixen.com\u003c/a\u003e. | \u003ca href=\"https://shipixen.com\" target=\"_blank\"\u003e\u003cimg width=\"300px\" src=\"https://user-images.githubusercontent.com/1515742/281077548-57b24773-3c2a-4e89-b088-cc3945d7037b.png\" alt=\"Shipixen Logo\" /\u003e\u003c/a\u003e |\n\n-----------------\n\nApihustle is a collection of tools to test, improve and get to know your API inside and out. \u003cbr/\u003e\n[apihustle.com](https://apihustle.com) \u003cbr/\u003e\n\n|                                                                                                                                                                                                   |              |                                                      |                                              |\n| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :----------- | :--------------------------------------------------- | :------------------------------------------- |\n| \u003ca href=\"https://shipixen.com\" target=\"_blank\"\u003e\u003cimg height=\"70px\" src=\"https://github.com/apihustle/apihustle/assets/1515742/3af97560-d774-4149-96c5-65d3cc530a5a\" alt=\"Shipixen Logo\" /\u003e\u003c/a\u003e     | **Shipixen** | Create a personalized blog \u0026 landing page in minutes | [shipixen.com](https://shipixen.com)         |\n| \u003ca href=\"https://pageui.dev\" target=\"_blank\"\u003e\u003cimg height=\"70px\" src=\"https://github.com/apihustle/apihustle/assets/1515742/953cc5ab-bbf4-4a19-9b16-c74d218b63b4\" alt=\"Page UI Logo\" /\u003e\u003c/a\u003e        | **Page UI**  | Landing page UI components for React \u0026 Next.js       | [pageui.dev](https://pageui.dev)             |\n| \u003ca href=\"https://clobbr.app\" target=\"_blank\"\u003e\u003cimg height=\"70px\" src=\"https://github.com/apihustle/apihustle/assets/1515742/50c11d46-a025-40fd-b154-0a5984556f6e\" alt=\"Clobbr Logo\" /\u003e\u003c/a\u003e         | **Clobbr**   | Load test your API endpoints | [clobbr.app](https://clobbr.app)             |\n| \u003ca href=\"https://crontap.com\" target=\"_blank\"\u003e\u003cimg height=\"70px\" src=\"https://github.com/apihustle/apihustle/assets/1515742/fe1aac71-b663-4f8e-a225-0c47b2eee14d\" alt=\"Crontap Logo\" /\u003e\u003c/a\u003e       | **Crontap**  | Schedule API calls using cron syntax.                | [crontap.com](https://crontap.com)           |\n| \u003ca href=\"https://tool.crontap.com\" target=\"_blank\"\u003e\u003cimg height=\"70px\" src=\"https://github.com/apihustle/apihustle/assets/1515742/713ff923-b03c-43ec-9cfd-75e542d0f5c4\" alt=\"CronTool Logo\" /\u003e\u003c/a\u003e | **CronTool** | Debug multiple cron expressions on a calendar.       | [tool.crontap.com](https://tool.crontap.com) |\n\n-----------------\n\n\u003cimg height=\"60px\" src=\"https://github.com/danmindru/page-ui/assets/1515742/30259ef0-6085-401d-ab24-e9d1f9b5fc05\" alt=\"Page UI logo\" /\u003e \u003cbr/\u003e\nPage UI ❤️ Open Source\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanmindru%2Fpage-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanmindru%2Fpage-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanmindru%2Fpage-ui/lists"}