├── .gitignore ├── LICENSE ├── README.md ├── app ├── [components] │ └── [category] │ │ ├── [collection] │ │ └── page.jsx │ │ └── page.jsx ├── about │ └── [slug] │ │ └── page.jsx ├── api │ └── search │ │ └── route.js ├── blog │ ├── [slug] │ │ └── page.jsx │ └── page.jsx ├── favicon.ico ├── layout.jsx ├── not-found.jsx ├── page.jsx ├── robots.js └── sitemap.js ├── eslint.config.js ├── jsconfig.json ├── next.config.js ├── package.json ├── postcss.config.js ├── prettier.config.js ├── public ├── components │ ├── application │ │ ├── alerts │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ └── 3.html │ │ ├── badges │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ ├── 4.html │ │ │ ├── 5-dark.html │ │ │ └── 5.html │ │ ├── breadcrumbs │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ ├── 4.html │ │ │ ├── 5-dark.html │ │ │ └── 5.html │ │ ├── button-groups │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ └── 3.html │ │ ├── checkboxes │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ └── 3.html │ │ ├── details-list │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ └── 4.html │ │ ├── dividers │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ ├── 4.html │ │ │ ├── 5-dark.html │ │ │ ├── 5.html │ │ │ ├── 6-dark.html │ │ │ └── 6.html │ │ ├── dropdown │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ └── 3.html │ │ ├── file-uploaders │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ └── 2.html │ │ ├── filters │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ └── 2.html │ │ ├── grids │ │ │ ├── 1.html │ │ │ ├── 10.html │ │ │ ├── 2.html │ │ │ ├── 3.html │ │ │ ├── 4.html │ │ │ ├── 5.html │ │ │ ├── 6.html │ │ │ ├── 7.html │ │ │ ├── 8.html │ │ │ └── 9.html │ │ ├── inputs │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ └── 4.html │ │ ├── media │ │ │ ├── 1.html │ │ │ ├── 2.html │ │ │ ├── 3.html │ │ │ ├── 4.html │ │ │ ├── 5.html │ │ │ ├── 6.html │ │ │ ├── 7.html │ │ │ └── 8.html │ │ ├── modals │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ ├── 4.html │ │ │ ├── 5-dark.html │ │ │ ├── 5.html │ │ │ ├── 6-dark.html │ │ │ └── 6.html │ │ ├── pagination │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ └── 3.html │ │ ├── quantity-inputs │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ └── 4.html │ │ ├── radio-groups │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ └── 3.html │ │ ├── selects │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ └── 3.html │ │ ├── side-menu │ │ │ ├── 1.html │ │ │ ├── 2.html │ │ │ └── 3.html │ │ ├── stats │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ ├── 4.html │ │ │ ├── 5-dark.html │ │ │ ├── 5.html │ │ │ ├── 6-dark.html │ │ │ └── 6.html │ │ ├── steps │ │ │ ├── 1.html │ │ │ ├── 2.html │ │ │ ├── 3.html │ │ │ ├── 4.html │ │ │ ├── 5.html │ │ │ └── 6.html │ │ ├── tables │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ ├── 4.html │ │ │ ├── 5-dark.html │ │ │ └── 5.html │ │ ├── textareas │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ └── 3.html │ │ ├── timelines │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ └── 3.html │ │ ├── toggles │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ └── 4.html │ │ └── vertical-menu │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ ├── 4.html │ │ │ ├── 5-dark.html │ │ │ ├── 5.html │ │ │ ├── 6-dark.html │ │ │ ├── 6.html │ │ │ ├── 7-dark.html │ │ │ ├── 7.html │ │ │ ├── 8-dark.html │ │ │ ├── 8.html │ │ │ ├── 9-dark.html │ │ │ └── 9.html │ └── marketing │ │ ├── announcements │ │ ├── 1.html │ │ ├── 2.html │ │ ├── 3.html │ │ ├── 4.html │ │ ├── 5.html │ │ └── 6.html │ │ ├── banners │ │ ├── 1-dark.html │ │ ├── 1.html │ │ ├── 2-dark.html │ │ ├── 2.html │ │ ├── 3-dark.html │ │ └── 3.html │ │ ├── blog-cards │ │ ├── 1-dark.html │ │ ├── 1.html │ │ ├── 2-dark.html │ │ ├── 2.html │ │ ├── 3-dark.html │ │ ├── 3.html │ │ ├── 4-dark.html │ │ ├── 4.html │ │ ├── 5-dark.html │ │ ├── 5.html │ │ ├── 6-dark.html │ │ ├── 6.html │ │ └── 7.html │ │ ├── buttons │ │ ├── 1.html │ │ ├── 10.html │ │ ├── 11.html │ │ ├── 12.html │ │ ├── 2.html │ │ ├── 3.html │ │ ├── 4.html │ │ ├── 5.html │ │ ├── 6.html │ │ ├── 7.html │ │ ├── 8.html │ │ └── 9.html │ │ ├── cards │ │ ├── 1.html │ │ ├── 10.html │ │ ├── 2.html │ │ ├── 3.html │ │ ├── 4.html │ │ ├── 5.html │ │ ├── 6.html │ │ ├── 7.html │ │ ├── 8.html │ │ └── 9.html │ │ ├── carts │ │ ├── 1.html │ │ ├── 2.html │ │ └── 3.html │ │ ├── ctas │ │ ├── 1-dark.html │ │ ├── 1.html │ │ ├── 2-dark.html │ │ ├── 2.html │ │ ├── 3-dark.html │ │ ├── 3.html │ │ ├── 4.html │ │ └── 5.html │ │ ├── faqs │ │ ├── 1-dark.html │ │ ├── 1.html │ │ ├── 2-dark.html │ │ ├── 2.html │ │ ├── 3-dark.html │ │ ├── 3.html │ │ ├── 4-dark.html │ │ ├── 4.html │ │ ├── 5-dark.html │ │ └── 5.html │ │ ├── footers │ │ ├── 1-dark.html │ │ ├── 1.html │ │ ├── 10-dark.html │ │ ├── 10.html │ │ ├── 11-dark.html │ │ ├── 11.html │ │ ├── 12-dark.html │ │ ├── 12.html │ │ ├── 13-dark.html │ │ ├── 13.html │ │ ├── 2-dark.html │ │ ├── 2.html │ │ ├── 3-dark.html │ │ ├── 3.html │ │ ├── 4-dark.html │ │ ├── 4.html │ │ ├── 5-dark.html │ │ ├── 5.html │ │ ├── 6-dark.html │ │ ├── 6.html │ │ ├── 7-dark.html │ │ ├── 7.html │ │ ├── 8-dark.html │ │ ├── 8.html │ │ ├── 9-dark.html │ │ └── 9.html │ │ ├── headers │ │ ├── 1-dark.html │ │ ├── 1.html │ │ ├── 2-dark.html │ │ ├── 2.html │ │ ├── 3-dark.html │ │ ├── 3.html │ │ ├── 4-dark.html │ │ └── 4.html │ │ ├── pricing │ │ ├── 1.html │ │ └── 2.html │ │ ├── product-cards │ │ ├── 1.html │ │ ├── 10.html │ │ ├── 2.html │ │ ├── 3.html │ │ ├── 4.html │ │ ├── 5.html │ │ ├── 6.html │ │ ├── 7.html │ │ ├── 8.html │ │ └── 9.html │ │ ├── product-collections │ │ ├── 1.html │ │ ├── 2.html │ │ ├── 3.html │ │ ├── 4.html │ │ ├── 5.html │ │ └── 6.html │ │ ├── sections │ │ ├── 1.html │ │ ├── 2.html │ │ ├── 3.html │ │ └── 4.html │ │ └── stats │ │ ├── 1-dark.html │ │ ├── 1.html │ │ ├── 2-dark.html │ │ ├── 2.html │ │ ├── 3-dark.html │ │ └── 3.html └── og.jpg ├── src ├── components │ ├── Ads.jsx │ ├── BlogCard.jsx │ ├── BlogGrid.jsx │ ├── BrandLogo.jsx │ ├── ButtonStyle.jsx │ ├── CollectionCard.jsx │ ├── CollectionGrid.jsx │ ├── CollectionList.jsx │ ├── ComponentPreview.jsx │ ├── Container.jsx │ ├── Footer.jsx │ ├── GithubSocial.jsx │ ├── Header.jsx │ ├── HeaderBanner.jsx │ ├── HeaderMenu.jsx │ ├── HeaderMenuLinks.jsx │ ├── HeroBanner.jsx │ ├── MdxRemoteRender.jsx │ ├── PreviewBreakpoint.jsx │ ├── PreviewCode.jsx │ ├── PreviewCopy.jsx │ ├── PreviewCreator.jsx │ ├── PreviewIframe.jsx │ ├── PreviewPlugins.jsx │ ├── PreviewRtl.jsx │ ├── PreviewTitle.jsx │ ├── PreviewType.jsx │ ├── PreviewView.jsx │ ├── Search.jsx │ └── UspList.jsx ├── data │ ├── categories │ │ ├── application.mdx │ │ └── marketing.mdx │ ├── components │ │ ├── application │ │ │ ├── alerts.mdx │ │ │ ├── badges.mdx │ │ │ ├── breadcrumbs.mdx │ │ │ ├── button-groups.mdx │ │ │ ├── checkboxes.mdx │ │ │ ├── details-list.mdx │ │ │ ├── dividers.mdx │ │ │ ├── dropdown.mdx │ │ │ ├── file-uploaders.mdx │ │ │ ├── filters.mdx │ │ │ ├── grids.mdx │ │ │ ├── inputs.mdx │ │ │ ├── media.mdx │ │ │ ├── modals.mdx │ │ │ ├── pagination.mdx │ │ │ ├── quantity-inputs.mdx │ │ │ ├── radio-groups.mdx │ │ │ ├── selects.mdx │ │ │ ├── side-menu.mdx │ │ │ ├── stats.mdx │ │ │ ├── steps.mdx │ │ │ ├── tables.mdx │ │ │ ├── textareas.mdx │ │ │ ├── timelines.mdx │ │ │ ├── toggles.mdx │ │ │ └── vertical-menu.mdx │ │ └── marketing │ │ │ ├── announcements.mdx │ │ │ ├── banners.mdx │ │ │ ├── blog-cards.mdx │ │ │ ├── buttons.mdx │ │ │ ├── cards.mdx │ │ │ ├── carts.mdx │ │ │ ├── ctas.mdx │ │ │ ├── faqs.mdx │ │ │ ├── footers.mdx │ │ │ ├── headers.mdx │ │ │ ├── pricing.mdx │ │ │ ├── product-cards.mdx │ │ │ ├── product-collections.mdx │ │ │ └── sections.mdx │ ├── pages │ │ ├── acknowledgements.mdx │ │ └── faqs.mdx │ └── posts │ │ ├── animated-border-gradient-with-tailwindcss.mdx │ │ ├── animation-duration-delay-with-tailwindcss.mdx │ │ ├── highlight-hover-effect-with-tailwindcss.mdx │ │ ├── how-to-clean-up-tailwindcss-code.mdx │ │ ├── how-to-contribute.mdx │ │ ├── how-to-write-better-containers-in-tailwindcss.mdx │ │ ├── how-to-write-better-tailwindcss.mdx │ │ ├── move-to-tailwindcss-without-breaking-changes.mdx │ │ └── remove-number-input-spinners-with-tailwindcss.mdx ├── styles │ ├── components.css │ ├── prism.css │ └── site.css └── utils │ ├── db.js │ └── transformers.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # next.js 7 | /.next/ 8 | /out/ 9 | 10 | # vercel 11 | .vercel 12 | 13 | # production 14 | /build 15 | 16 | # misc 17 | .DS_Store 18 | *.pem 19 | 20 | # debug 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | # local env files 26 | .env* 27 | 28 | # css 29 | /public/*.css 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Mark Mead 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /app/about/[slug]/page.jsx: -------------------------------------------------------------------------------- 1 | import { promises as fs } from 'node:fs' 2 | 3 | import { getAboutPage, formatSlug, pagesDir } from '@util/db' 4 | 5 | import Container from '@component/Container' 6 | import MdxRemoteRender from '@component/MdxRemoteRender' 7 | 8 | export const dynamic = 'force-static' 9 | 10 | export async function generateStaticParams() { 11 | const pageFiles = await fs.readdir(pagesDir) 12 | const staticParams = [] 13 | 14 | for (const pageFile of pageFiles) { 15 | if (!pageFile.endsWith('.mdx')) { 16 | continue 17 | } 18 | 19 | staticParams.push({ slug: formatSlug(pageFile) }) 20 | } 21 | 22 | return staticParams 23 | } 24 | 25 | export async function generateMetadata({ params }) { 26 | const { pageData } = await getAboutPage(params) 27 | 28 | return { 29 | title: `${pageData.title} | HyperUI`, 30 | description: pageData.description, 31 | alternates: { 32 | canonical: `/about/${params.slug}`, 33 | }, 34 | } 35 | } 36 | 37 | export default async function Page({ params }) { 38 | const { pageData, pageContent } = await getAboutPage(params) 39 | 40 | return ( 41 | 42 |
43 |

{pageData.title}

44 | 45 | 46 |
47 | 48 | ) 49 | } 50 | -------------------------------------------------------------------------------- /app/api/search/route.js: -------------------------------------------------------------------------------- 1 | import { NextResponse } from 'next/server' 2 | 3 | import { getComponents } from '@util/db' 4 | 5 | export async function GET() { 6 | try { 7 | const componentsByCategory = await getComponents() 8 | 9 | const flatCollections = componentsByCategory.flatMap(({ componentItems, categoryTitle }) => 10 | componentItems.map((componentItem) => ({ 11 | ...componentItem, 12 | categoryTitle, 13 | })) 14 | ) 15 | 16 | return NextResponse.json({ collections: flatCollections }) 17 | } catch { 18 | return NextResponse.json({ error: 'Failed to load collections' }, { status: 500 }) 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /app/blog/page.jsx: -------------------------------------------------------------------------------- 1 | import { getPosts } from '@util/db' 2 | 3 | import BlogGrid from '@component/BlogGrid' 4 | import Container from '@component/Container' 5 | import HeroBanner from '@component/HeroBanner' 6 | 7 | export const metadata = { 8 | title: 'Tailwind CSS Blog | HyperUI', 9 | description: 'Tips and tricks for using Tailwind CSS in your projects.', 10 | alternates: { 11 | canonical: '/blog', 12 | }, 13 | } 14 | 15 | export const dynamic = 'force-static' 16 | 17 | export default async function Page() { 18 | const blogPosts = await getPosts() 19 | 20 | return ( 21 | <> 22 | 23 | Dive into this collection of Tailwind CSS insights that make development less painful and 24 | more fun. Whether you're just starting out or have battle scars from countless projects, 25 | there's something here to make your CSS life easier. 26 | 27 | 28 | 29 | 30 | 31 | 32 | ) 33 | } 34 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markmead/hyperui/4f9463efa5e92b300c45e0841901eaf99b9a45c7/app/favicon.ico -------------------------------------------------------------------------------- /app/not-found.jsx: -------------------------------------------------------------------------------- 1 | export const metadata = { 2 | title: '404 | HyperUI', 3 | description: "Uh-oh! It appears this page doesn't exist.", 4 | } 5 | 6 | export default function Custom404() { 7 | return ( 8 |
9 |

404 | Not Found

10 |
11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /app/page.jsx: -------------------------------------------------------------------------------- 1 | import { getComponents } from '@util/db' 2 | 3 | import Container from '@component/Container' 4 | import HeroBanner from '@component/HeroBanner' 5 | import CollectionGrid from '@component/CollectionGrid' 6 | 7 | export const metadata = { 8 | alternates: { 9 | canonical: '/', 10 | }, 11 | } 12 | 13 | export default async function Page() { 14 | const componentsByCategory = await getComponents() 15 | 16 | return ( 17 | <> 18 | 19 | HyperUI is a collection of free Tailwind CSS components that can be used in your next 20 | project. With a range of components, you can build your next marketing website, admin 21 | dashboard, eCommerce store and much more. 22 | 23 | 24 | 25 | 38 | 39 | 40 | ) 41 | } 42 | -------------------------------------------------------------------------------- /app/robots.js: -------------------------------------------------------------------------------- 1 | export default function robots() { 2 | return { 3 | rules: { 4 | userAgent: '*', 5 | allow: '/', 6 | }, 7 | sitemap: 'https://www.hyperui.dev/sitemap.xml', 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import { FlatCompat } from '@eslint/eslintrc' 2 | 3 | import js from '@eslint/js' 4 | import pluginReact from 'eslint-plugin-react' 5 | 6 | const compat = new FlatCompat({ 7 | baseDirectory: import.meta.dirname, 8 | }) 9 | 10 | export default [ 11 | { ignores: ['.next', 'node_modules'] }, 12 | 13 | js.configs.recommended, 14 | pluginReact.configs.flat.recommended, 15 | 16 | ...compat.config({ 17 | extends: ['next'], 18 | }), 19 | ] 20 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2020", 4 | "baseUrl": ".", 5 | "paths": { 6 | "@component/*": ["src/components/*"], 7 | "@style/*": ["src/styles/*"], 8 | "@util/*": ["src/utils/*"] 9 | }, 10 | "plugins": [ 11 | { 12 | "name": "next" 13 | } 14 | ] 15 | }, 16 | "include": ["**/*.js", "**/*.jsx"], 17 | "exclude": ["node_modules"] 18 | } 19 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | export default { 3 | reactStrictMode: true, 4 | transpilePackages: ['next-mdx-remote'], 5 | redirects: async () => { 6 | return [ 7 | { 8 | source: '/components/application-ui', 9 | destination: '/components/application', 10 | permanent: true, 11 | }, 12 | { 13 | source: '/components/application-ui/:slug', 14 | destination: '/components/application/:slug', 15 | permanent: true, 16 | }, 17 | ] 18 | }, 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hyperui", 3 | "type": "module", 4 | "scripts": { 5 | "dev": "next dev --turbopack", 6 | "build": "next build", 7 | "postbuild": "yarn css --minify", 8 | "lint": "next lint --fix", 9 | "format": "prettier . --write", 10 | "css": "npx @tailwindcss/cli -i ./src/styles/components.css -o ./public/components.css" 11 | }, 12 | "dependencies": { 13 | "next": "15.3.3", 14 | "react": "19.1.0", 15 | "react-dom": "19.1.0" 16 | }, 17 | "devDependencies": { 18 | "@next/eslint-plugin-next": "15.3.3", 19 | "@tailwindcss/cli": "^4.1.8", 20 | "@tailwindcss/forms": "^0.5.10", 21 | "@tailwindcss/postcss": "^4.1.8", 22 | "@tailwindcss/typography": "^0.5.16", 23 | "@typescript-eslint/parser": "^8.33.0", 24 | "eslint": "9.28.0", 25 | "eslint-config-next": "15.3.3", 26 | "eslint-plugin-react": "^7.37.5", 27 | "fast-glob": "^3.3.3", 28 | "next-mdx-remote": "^5.0.0", 29 | "postcss": "^8.5.4", 30 | "prettier": "^3.5.3", 31 | "prettier-plugin-tailwindcss": "^0.6.12", 32 | "prismjs": "^1.30.0", 33 | "react-intersection-observer": "^9.16.0", 34 | "react-use": "^17.6.0", 35 | "rehype-external-links": "^3.0.0", 36 | "remark": "^15.0.1", 37 | "remark-html": "^16.0.1", 38 | "tailwindcss": "^4.1.8", 39 | "typescript": "^5.8.3" 40 | }, 41 | "packageManager": "yarn@1.22.22" 42 | } 43 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | '@tailwindcss/postcss': {}, 4 | }, 5 | } 6 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | semi: false, 3 | tabWidth: 2, 4 | useTabs: false, 5 | printWidth: 100, 6 | singleQuote: true, 7 | bracketSpacing: true, 8 | jsxSingleQuote: false, 9 | bracketSameLine: false, 10 | trailingComma: 'es5', 11 | arrowParens: 'always', 12 | quoteProps: 'as-needed', 13 | plugins: ['prettier-plugin-tailwindcss'], 14 | } 15 | -------------------------------------------------------------------------------- /public/components/application/alerts/1.html: -------------------------------------------------------------------------------- 1 | 44 | -------------------------------------------------------------------------------- /public/components/application/alerts/3.html: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /public/components/application/badges/1-dark.html: -------------------------------------------------------------------------------- 1 | 4 | Live 5 | 6 | 7 | 10 | Live 11 | 12 | -------------------------------------------------------------------------------- /public/components/application/badges/1.html: -------------------------------------------------------------------------------- 1 | 2 | Live 3 | 4 | 5 | 8 | Live 9 | 10 | -------------------------------------------------------------------------------- /public/components/application/badges/2-dark.html: -------------------------------------------------------------------------------- 1 | 4 | 12 | 17 | 18 | 19 |

Euro

20 | 21 | 22 | 25 | 33 | 38 | 39 | 40 |

Euro

41 | 42 | -------------------------------------------------------------------------------- /public/components/application/badges/2.html: -------------------------------------------------------------------------------- 1 | 4 | 12 | 17 | 18 | 19 |

Euro

20 | 21 | 22 | 25 | 33 | 38 | 39 | 40 |

Euro

41 | 42 | -------------------------------------------------------------------------------- /public/components/application/badges/3.html: -------------------------------------------------------------------------------- 1 | 4 |

Euro

5 | 6 | 22 | 23 | 24 | 27 |

Euro

28 | 29 | 45 | 46 | -------------------------------------------------------------------------------- /public/components/application/badges/4-dark.html: -------------------------------------------------------------------------------- 1 | 4 | 12 | 17 | 18 | 19 | 20 | 23 | 31 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /public/components/application/badges/4.html: -------------------------------------------------------------------------------- 1 | 4 | 12 | 17 | 18 | 19 | 20 | 23 | 31 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /public/components/application/breadcrumbs/1.html: -------------------------------------------------------------------------------- 1 | 46 | -------------------------------------------------------------------------------- /public/components/application/breadcrumbs/3-dark.html: -------------------------------------------------------------------------------- 1 | 48 | -------------------------------------------------------------------------------- /public/components/application/breadcrumbs/3.html: -------------------------------------------------------------------------------- 1 | 42 | -------------------------------------------------------------------------------- /public/components/application/breadcrumbs/5-dark.html: -------------------------------------------------------------------------------- 1 | 29 | -------------------------------------------------------------------------------- /public/components/application/breadcrumbs/5.html: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /public/components/application/button-groups/1-dark.html: -------------------------------------------------------------------------------- 1 | 4 | 10 | 11 | 17 | 18 | 24 | 25 | -------------------------------------------------------------------------------- /public/components/application/button-groups/1.html: -------------------------------------------------------------------------------- 1 | 4 | 10 | 11 | 17 | 18 | 24 | 25 | -------------------------------------------------------------------------------- /public/components/application/button-groups/3-dark.html: -------------------------------------------------------------------------------- 1 | 4 | 10 | 11 | 36 | 37 | -------------------------------------------------------------------------------- /public/components/application/button-groups/3.html: -------------------------------------------------------------------------------- 1 | 4 | 10 | 11 | 36 | 37 | -------------------------------------------------------------------------------- /public/components/application/checkboxes/1-dark.html: -------------------------------------------------------------------------------- 1 |
2 | Checkboxes 3 | 4 |
5 | 14 | 15 | 24 | 25 | 34 |
35 |
36 | -------------------------------------------------------------------------------- /public/components/application/checkboxes/1.html: -------------------------------------------------------------------------------- 1 |
2 | Checkboxes 3 | 4 |
5 | 10 | 11 | 16 | 17 | 22 |
23 |
24 | -------------------------------------------------------------------------------- /public/components/application/dividers/1-dark.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Title goes here 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/components/application/dividers/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Title goes here 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/components/application/dividers/2-dark.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Title goes here 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/components/application/dividers/2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Title goes here 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/components/application/dividers/3-dark.html: -------------------------------------------------------------------------------- 1 | 2 | Title goes here 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/components/application/dividers/3.html: -------------------------------------------------------------------------------- 1 | 2 | Title goes here 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/components/application/dividers/4-dark.html: -------------------------------------------------------------------------------- 1 | 2 | Title goes here 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/components/application/dividers/4.html: -------------------------------------------------------------------------------- 1 | 2 | Title goes here 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/components/application/dividers/5-dark.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Title goes here 5 | 6 | -------------------------------------------------------------------------------- /public/components/application/dividers/5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Title goes here 5 | 6 | -------------------------------------------------------------------------------- /public/components/application/dividers/6-dark.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Title goes here 5 | 6 | -------------------------------------------------------------------------------- /public/components/application/dividers/6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Title goes here 5 | 6 | -------------------------------------------------------------------------------- /public/components/application/file-uploaders/1-dark.html: -------------------------------------------------------------------------------- 1 | 26 | -------------------------------------------------------------------------------- /public/components/application/file-uploaders/1.html: -------------------------------------------------------------------------------- 1 | 23 | -------------------------------------------------------------------------------- /public/components/application/file-uploaders/2-dark.html: -------------------------------------------------------------------------------- 1 | 30 | -------------------------------------------------------------------------------- /public/components/application/file-uploaders/2.html: -------------------------------------------------------------------------------- 1 | 30 | -------------------------------------------------------------------------------- /public/components/application/grids/1.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | -------------------------------------------------------------------------------- /public/components/application/grids/10.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | -------------------------------------------------------------------------------- /public/components/application/grids/2.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | -------------------------------------------------------------------------------- /public/components/application/grids/3.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | -------------------------------------------------------------------------------- /public/components/application/grids/4.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 | -------------------------------------------------------------------------------- /public/components/application/grids/5.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 | -------------------------------------------------------------------------------- /public/components/application/grids/6.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 | -------------------------------------------------------------------------------- /public/components/application/grids/7.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 | -------------------------------------------------------------------------------- /public/components/application/grids/8.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 | -------------------------------------------------------------------------------- /public/components/application/grids/9.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | -------------------------------------------------------------------------------- /public/components/application/inputs/1-dark.html: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /public/components/application/inputs/1.html: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /public/components/application/inputs/2-dark.html: -------------------------------------------------------------------------------- 1 | 31 | -------------------------------------------------------------------------------- /public/components/application/inputs/2.html: -------------------------------------------------------------------------------- 1 | 29 | -------------------------------------------------------------------------------- /public/components/application/inputs/3-dark.html: -------------------------------------------------------------------------------- 1 | 35 | -------------------------------------------------------------------------------- /public/components/application/inputs/3.html: -------------------------------------------------------------------------------- 1 | 35 | -------------------------------------------------------------------------------- /public/components/application/inputs/4-dark.html: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /public/components/application/inputs/4.html: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /public/components/application/media/1.html: -------------------------------------------------------------------------------- 1 |
2 | 7 | 8 |
9 |

Title goes here

10 | 11 |

12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio 13 | nesciunt quas non animi. 14 |

15 |
16 |
17 | -------------------------------------------------------------------------------- /public/components/application/media/2.html: -------------------------------------------------------------------------------- 1 |
2 | 7 | 8 |
9 |

Title goes here

10 | 11 |

12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio 13 | nesciunt quas non animi. 14 |

15 |
16 |
17 | -------------------------------------------------------------------------------- /public/components/application/media/3.html: -------------------------------------------------------------------------------- 1 |
2 | 7 | 8 |
9 |

Title goes here

10 | 11 |

12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio 13 | nesciunt quas non animi. 14 |

15 |
16 |
17 | -------------------------------------------------------------------------------- /public/components/application/media/4.html: -------------------------------------------------------------------------------- 1 |
2 | 7 | 8 |
9 |

Title goes here

10 | 11 |

12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio 13 | nesciunt quas non animi. 14 |

15 |
16 |
17 | -------------------------------------------------------------------------------- /public/components/application/media/5.html: -------------------------------------------------------------------------------- 1 |
2 | 7 | 8 |
9 |

Title goes here

10 | 11 |

12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio 13 | nesciunt quas non animi. 14 |

15 |
16 |
17 | -------------------------------------------------------------------------------- /public/components/application/media/6.html: -------------------------------------------------------------------------------- 1 |
2 | 7 | 8 |
9 |

Title goes here

10 | 11 |

12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio 13 | nesciunt quas non animi. 14 |

15 |
16 |
17 | -------------------------------------------------------------------------------- /public/components/application/media/7.html: -------------------------------------------------------------------------------- 1 |
2 | 7 | 8 |
9 |

Title goes here

10 | 11 |

12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio 13 | nesciunt quas non animi. 14 |

15 |
16 |
17 | -------------------------------------------------------------------------------- /public/components/application/media/8.html: -------------------------------------------------------------------------------- 1 |
2 | 7 | 8 |
9 |

Title goes here

10 | 11 |

12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio 13 | nesciunt quas non animi. 14 |

15 |
16 |
17 | -------------------------------------------------------------------------------- /public/components/application/modals/1-dark.html: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /public/components/application/modals/1.html: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /public/components/application/modals/2.html: -------------------------------------------------------------------------------- 1 | 41 | -------------------------------------------------------------------------------- /public/components/application/modals/3-dark.html: -------------------------------------------------------------------------------- 1 | 36 | -------------------------------------------------------------------------------- /public/components/application/modals/3.html: -------------------------------------------------------------------------------- 1 | 34 | -------------------------------------------------------------------------------- /public/components/application/pagination/3.html: -------------------------------------------------------------------------------- 1 | 46 | -------------------------------------------------------------------------------- /public/components/application/quantity-inputs/1-dark.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | 11 | 12 | 18 | 19 | 25 |
26 |
27 | -------------------------------------------------------------------------------- /public/components/application/quantity-inputs/1.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | 8 | 9 | 15 | 16 | 19 |
20 |
21 | -------------------------------------------------------------------------------- /public/components/application/quantity-inputs/2-dark.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | 11 | 12 | 18 | 19 | 25 |
26 |
27 | -------------------------------------------------------------------------------- /public/components/application/quantity-inputs/2.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | 8 | 9 | 15 | 16 | 19 |
20 |
21 | -------------------------------------------------------------------------------- /public/components/application/quantity-inputs/3-dark.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | 11 | 12 | 18 | 19 | 25 |
26 |
27 | -------------------------------------------------------------------------------- /public/components/application/quantity-inputs/3.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | 8 | 9 | 15 | 16 | 19 |
20 |
21 | -------------------------------------------------------------------------------- /public/components/application/quantity-inputs/4-dark.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | 11 | 12 | 18 | 19 | 25 |
26 |
27 | -------------------------------------------------------------------------------- /public/components/application/quantity-inputs/4.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | 8 | 9 | 15 | 16 | 19 |
20 |
21 | -------------------------------------------------------------------------------- /public/components/application/radio-groups/1.html: -------------------------------------------------------------------------------- 1 |
2 | Delivery 3 | 4 |
5 | 22 |
23 | 24 |
25 | 41 |
42 |
43 | -------------------------------------------------------------------------------- /public/components/application/selects/1-dark.html: -------------------------------------------------------------------------------- 1 |
2 | 20 |
21 | -------------------------------------------------------------------------------- /public/components/application/selects/1.html: -------------------------------------------------------------------------------- 1 |
2 | 20 |
21 | -------------------------------------------------------------------------------- /public/components/application/selects/2-dark.html: -------------------------------------------------------------------------------- 1 |
2 | 35 |
36 | -------------------------------------------------------------------------------- /public/components/application/selects/2.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 33 |
34 | -------------------------------------------------------------------------------- /public/components/application/selects/3-dark.html: -------------------------------------------------------------------------------- 1 | 39 | -------------------------------------------------------------------------------- /public/components/application/selects/3.html: -------------------------------------------------------------------------------- 1 | 37 | -------------------------------------------------------------------------------- /public/components/application/steps/2.html: -------------------------------------------------------------------------------- 1 |
2 |

Steps

3 | 4 |
5 |

2/3 - Address

6 | 7 |
8 |
9 |
10 |
11 |
12 | -------------------------------------------------------------------------------- /public/components/application/steps/4.html: -------------------------------------------------------------------------------- 1 |
2 |

Steps

3 | 4 |
5 |
    6 |
  1. 7 | 8 | 14 | 19 | 20 | 21 |
    2. 22 | 23 |
  2. 24 | 2 25 | 26 | Address 27 |
    3. 28 | 29 |
  3. 30 | 33 | 3 34 | 35 | 36 | Payment 37 |
    4. 38 |
39 |
40 |
41 | -------------------------------------------------------------------------------- /public/components/application/steps/6.html: -------------------------------------------------------------------------------- 1 |
2 |

Steps

3 | 4 |
7 |
    8 |
  1. 9 | 1 10 | 11 | 12 |
    2. 13 | 14 |
  2. 15 | 18 | 2 19 | 20 | 21 | 22 |
    3. 23 | 24 |
  3. 25 | 3 26 | 27 | 28 |
    4. 29 |
30 |
31 |
32 | -------------------------------------------------------------------------------- /public/components/application/textareas/1-dark.html: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /public/components/application/textareas/1.html: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /public/components/application/textareas/2-dark.html: -------------------------------------------------------------------------------- 1 |
2 | 31 |
32 | -------------------------------------------------------------------------------- /public/components/application/textareas/2.html: -------------------------------------------------------------------------------- 1 |
2 | 31 |
32 | -------------------------------------------------------------------------------- /public/components/application/textareas/3-dark.html: -------------------------------------------------------------------------------- 1 |
2 | 11 | 12 |
13 | 19 | 20 | 26 |
27 |
28 | -------------------------------------------------------------------------------- /public/components/application/textareas/3.html: -------------------------------------------------------------------------------- 1 |
2 | 11 | 12 |
13 | 19 | 20 | 26 |
27 |
28 | -------------------------------------------------------------------------------- /public/components/application/toggles/1-dark.html: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /public/components/application/toggles/1.html: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /public/components/application/toggles/2-dark.html: -------------------------------------------------------------------------------- 1 | 33 | -------------------------------------------------------------------------------- /public/components/application/toggles/2.html: -------------------------------------------------------------------------------- 1 | 33 | -------------------------------------------------------------------------------- /public/components/application/toggles/3-dark.html: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /public/components/application/toggles/3.html: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /public/components/application/toggles/4-dark.html: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /public/components/application/toggles/4.html: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /public/components/application/vertical-menu/1-dark.html: -------------------------------------------------------------------------------- 1 | 47 | -------------------------------------------------------------------------------- /public/components/application/vertical-menu/1.html: -------------------------------------------------------------------------------- 1 | 44 | -------------------------------------------------------------------------------- /public/components/marketing/announcements/1.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | Lorem, ipsum dolor 4 | sit amet consectetur 5 |

6 |
7 | -------------------------------------------------------------------------------- /public/components/marketing/announcements/2.html: -------------------------------------------------------------------------------- 1 |
4 | 5 | 6 |

7 | Lorem, ipsum dolor 8 | sit amet consectetur 9 |

10 | 11 | 27 |
28 | -------------------------------------------------------------------------------- /public/components/marketing/announcements/3.html: -------------------------------------------------------------------------------- 1 |
4 |

5 | Lorem, ipsum dolor 6 | sit amet consectetur 7 |

8 |
9 | -------------------------------------------------------------------------------- /public/components/marketing/announcements/4.html: -------------------------------------------------------------------------------- 1 |
4 | 5 | 6 |

7 | Lorem, ipsum dolor 8 | sit amet consectetur 9 |

10 | 11 | 27 |
28 | -------------------------------------------------------------------------------- /public/components/marketing/announcements/5.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 | Lorem, ipsum dolor 5 | sit amet consectetur 6 |

7 |
8 |
9 | -------------------------------------------------------------------------------- /public/components/marketing/announcements/6.html: -------------------------------------------------------------------------------- 1 |
2 |
5 | 6 | 7 |

8 | Lorem, ipsum dolor 9 | sit amet consectetur 10 |

11 | 12 | 28 |
29 |
30 | -------------------------------------------------------------------------------- /public/components/marketing/banners/1-dark.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

5 | Understand user flow and 6 | increase 7 | conversions 8 |

9 | 10 |

11 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, nisi. Natus, provident 12 | accusamus impedit minima harum corporis iusto. 13 |

14 | 15 |
16 | 20 | Get Started 21 | 22 | 23 | 27 | Learn More 28 | 29 |
30 |
31 |
32 |
33 | -------------------------------------------------------------------------------- /public/components/marketing/banners/1.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

5 | Understand user flow and 6 | increase 7 | conversions 8 |

9 | 10 |

11 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, nisi. Natus, provident 12 | accusamus impedit minima harum corporis iusto. 13 |

14 | 15 |
16 | 20 | Get Started 21 | 22 | 23 | 27 | Learn More 28 | 29 |
30 |
31 |
32 |
33 | -------------------------------------------------------------------------------- /public/components/marketing/banners/2-dark.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

5 | Understand user flow and 6 | increase 7 | conversions 8 |

9 | 10 |

11 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, nisi. Natus, provident 12 | accusamus impedit minima harum corporis iusto. 13 |

14 | 15 |
16 | 20 | Get Started 21 | 22 | 23 | 27 | Learn More 28 | 29 |
30 |
31 |
32 |
33 | -------------------------------------------------------------------------------- /public/components/marketing/banners/2.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

5 | Understand user flow and 6 | increase 7 | conversions 8 |

9 | 10 |

11 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, nisi. Natus, provident 12 | accusamus impedit minima harum corporis iusto. 13 |

14 | 15 |
16 | 20 | Get Started 21 | 22 | 23 | 27 | Learn More 28 | 29 |
30 |
31 |
32 |
33 | -------------------------------------------------------------------------------- /public/components/marketing/blog-cards/1-dark.html: -------------------------------------------------------------------------------- 1 |
4 | 9 | 10 |
11 | 14 | 15 | 16 |

17 | How to position your furniture for positivity 18 |

19 | 20 | 21 |

22 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus 23 | pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis quidem, 24 | mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius atque 25 | dignissimos. Molestias explicabo corporis voluptatem? 26 |

27 |
28 |
29 | -------------------------------------------------------------------------------- /public/components/marketing/blog-cards/1.html: -------------------------------------------------------------------------------- 1 |
2 | 7 | 8 |
9 | 10 | 11 | 12 |

How to position your furniture for positivity

13 | 14 | 15 |

16 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus 17 | pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis quidem, 18 | mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius atque 19 | dignissimos. Molestias explicabo corporis voluptatem? 20 |

21 |
22 |
23 | -------------------------------------------------------------------------------- /public/components/marketing/blog-cards/2-dark.html: -------------------------------------------------------------------------------- 1 |
2 | 7 | 8 |
9 | 10 |

11 | Finding the Journey to Mordor 12 |

13 | 14 | 15 |

16 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus 17 | pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis quidem, 18 | mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius atque 19 | dignissimos. Molestias explicabo corporis voluptatem? 20 |

21 |
22 |
23 | -------------------------------------------------------------------------------- /public/components/marketing/blog-cards/2.html: -------------------------------------------------------------------------------- 1 |
2 | 7 | 8 |
9 | 10 |

Finding the Journey to Mordor

11 | 12 | 13 |

14 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus 15 | pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis quidem, 16 | mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius atque 17 | dignissimos. Molestias explicabo corporis voluptatem? 18 |

19 |
20 |
21 | -------------------------------------------------------------------------------- /public/components/marketing/blog-cards/3-dark.html: -------------------------------------------------------------------------------- 1 |
4 | 9 | 10 |
11 | 12 |

13 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 14 |

15 | 16 | 17 |

18 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus 19 | pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis quidem, 20 | mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius atque 21 | dignissimos. Molestias explicabo corporis voluptatem? 22 |

23 | 24 | 25 | Find out more 26 | 27 | 30 | 31 |
32 |
33 | -------------------------------------------------------------------------------- /public/components/marketing/blog-cards/3.html: -------------------------------------------------------------------------------- 1 |
2 | 7 | 8 |
9 | 10 |

11 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 12 |

13 | 14 | 15 |

16 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus 17 | pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis quidem, 18 | mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius atque 19 | dignissimos. Molestias explicabo corporis voluptatem? 20 |

21 | 22 | 23 | Find out more 24 | 25 | 28 | 29 |
30 |
31 | -------------------------------------------------------------------------------- /public/components/marketing/blog-cards/4-dark.html: -------------------------------------------------------------------------------- 1 |
4 | 7 | 8 | 9 |

10 | How to center an element using JavaScript and jQuery 11 |

12 | 13 | 14 |
15 | 18 | Snippet 19 | 20 | 21 | 24 | JavaScript 25 | 26 |
27 |
28 | -------------------------------------------------------------------------------- /public/components/marketing/blog-cards/4.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |

6 | How to center an element using JavaScript and jQuery 7 |

8 | 9 | 10 |
11 | 14 | Snippet 15 | 16 | 17 | 20 | JavaScript 21 | 22 |
23 |
24 | -------------------------------------------------------------------------------- /public/components/marketing/blog-cards/7.html: -------------------------------------------------------------------------------- 1 |
2 | 7 | 8 |
9 |
10 | 11 | 12 | 13 |

How to position your furniture for positivity

14 | 15 | 16 |

17 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus 18 | pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis 19 | quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius 20 | atque dignissimos. Molestias explicabo corporis voluptatem? 21 |

22 |
23 |
24 |
25 | -------------------------------------------------------------------------------- /public/components/marketing/buttons/1.html: -------------------------------------------------------------------------------- 1 | 5 | Download 6 | 7 | 8 | 12 | Download 13 | 14 | -------------------------------------------------------------------------------- /public/components/marketing/buttons/12.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 9 | Download 10 | 11 | 12 | 13 | 17 | 18 | 21 | Download 22 | 23 | 24 | -------------------------------------------------------------------------------- /public/components/marketing/buttons/2.html: -------------------------------------------------------------------------------- 1 | 5 | Download 6 | 7 | 14 | 20 | 21 | 22 | 23 | 27 | Download 28 | 29 | 36 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/components/marketing/buttons/3.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | Download 7 | 8 | 9 | 10 | 11 | 12 | 16 | 19 | Download 20 | 21 | 22 | -------------------------------------------------------------------------------- /public/components/marketing/buttons/4.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 11 | Download 12 | 13 | 20 | 26 | 27 | 28 | 29 | 33 | Download 34 | 35 | 42 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /public/components/marketing/buttons/5.html: -------------------------------------------------------------------------------- 1 | 5 | 8 | 9 | Download 10 | 11 | 12 | 13 | 14 | 18 | 21 | 22 | Download 23 | 24 | -------------------------------------------------------------------------------- /public/components/marketing/buttons/7.html: -------------------------------------------------------------------------------- 1 | 5 | Download 6 | 7 | 8 | 12 | Download 13 | 14 | -------------------------------------------------------------------------------- /public/components/marketing/buttons/8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | Download 8 | 9 | 10 | 11 | 12 | 16 | Download 17 | 18 | 19 | 20 | 21 | 25 | Download 26 | 27 | 28 | 29 | 30 | 34 | Download 35 | 36 | -------------------------------------------------------------------------------- /public/components/marketing/buttons/9.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 9 | Download 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 23 | Download 24 | 25 | 26 | -------------------------------------------------------------------------------- /public/components/marketing/cards/2.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 9 |
10 | 11 |
12 |

13 | How I built my first website with Nuxt, Tailwind CSS and Vercel 14 |

15 | 16 |

By John Doe

17 | 18 |

19 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum provident a, ipsa 20 | maiores deleniti consectetur nobis et eaque. 21 |

22 |
23 |
24 | 25 |
26 |
27 |
Published on
28 | 29 |
31/06/2025
30 |
31 | 32 |
33 |
Reading time
34 | 35 |
12 minutes
36 |
37 |
38 | 39 | -------------------------------------------------------------------------------- /public/components/marketing/cards/3.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 |

Lorem, ipsum dolor.

9 | 10 |

11 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni reiciendis sequi ipsam incidunt. 12 |

13 | 14 | -------------------------------------------------------------------------------- /public/components/marketing/cards/4.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 |
9 |

Developer

10 | 11 |

Tony Wayne

12 | 13 |
14 |
17 |

18 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis perferendis hic asperiores 19 | quibusdam quidem voluptates doloremque reiciendis nostrum harum. Repudiandae? 20 |

21 |
22 |
23 |
24 | 25 | -------------------------------------------------------------------------------- /public/components/marketing/cards/8.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 |
9 | Company Name 10 | 11 | 12 | 13 |

Branding / Signage

14 |
15 | 16 | -------------------------------------------------------------------------------- /public/components/marketing/ctas/1-dark.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

5 | Lorem, ipsum dolor sit amet consectetur adipisicing elit 6 |

7 | 8 | 13 | 14 |
15 | 19 | Get Started Today 20 | 21 |
22 |
23 |
24 | 25 | 30 |
31 | -------------------------------------------------------------------------------- /public/components/marketing/ctas/1.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

5 | Lorem, ipsum dolor sit amet consectetur adipisicing elit 6 |

7 | 8 | 13 | 14 |
15 | 19 | Get Started Today 20 | 21 |
22 |
23 |
24 | 25 | 30 |
31 | -------------------------------------------------------------------------------- /public/components/marketing/ctas/3.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

5 | Lorem, ipsum dolor sit amet consectetur adipisicing elit 6 |

7 | 8 | 13 | 14 |
15 | 19 | Get Started Today 20 | 21 |
22 |
23 |
24 | 25 | 30 |
31 | -------------------------------------------------------------------------------- /public/components/marketing/ctas/4.html: -------------------------------------------------------------------------------- 1 |
4 |
5 |
6 |

Latest Shirts

7 | 8 | 12 | 13 |
14 | 18 | Get Yours Today 19 | 20 |
21 |
22 |
23 |
24 | -------------------------------------------------------------------------------- /public/components/marketing/product-cards/1.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 8 | 9 | 14 |
15 | 16 |
17 |

18 | Limited Edition Sports Trainer 19 |

20 | 21 |

$189.99

22 |
23 | 24 | -------------------------------------------------------------------------------- /public/components/marketing/product-cards/2.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 8 | 9 | 14 |
15 | 16 |
17 |

18 | Limited Edition Sports Trainer 19 |

20 | 21 |
22 |

$189.99

23 | 24 |

6 Colors

25 |
26 |
27 | 28 | -------------------------------------------------------------------------------- /public/components/marketing/product-cards/3.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 |
9 |
10 |

11 | Small Headphones 12 |

13 | 14 |

15 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi nobis, quia soluta quisquam 16 | voluptatem nemo. 17 |

18 |
19 | 20 |

$299

21 |
22 | 23 | -------------------------------------------------------------------------------- /public/components/marketing/product-cards/4.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 |
9 |

10 | Simple Watch 11 |

12 | 13 |

$150

14 |
15 | 16 | -------------------------------------------------------------------------------- /public/components/marketing/product-cards/7.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 8 | 9 | 14 |
15 | 16 |
17 |

18 | Small Headphones 19 |

20 | 21 |

22 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis quibusdam ab maiores placeat 23 | odio id? 24 |

25 |
26 | 27 | -------------------------------------------------------------------------------- /public/components/marketing/product-cards/8.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 8 | 9 | 14 |
15 | 16 |
17 |

Skinny Jeans Blue

18 | 19 |

20 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi dicta impedit 21 | aperiam ipsum! 22 |

23 | 24 | 27 | Shop Now 28 | 29 |
30 | 31 | -------------------------------------------------------------------------------- /public/components/marketing/product-cards/9.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | Save 10% 6 | 7 | 8 | 13 | 14 |
15 | Aloe Vera 16 | 17 |

18 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet officia rem vel voluptatum in 19 | eum vitae aliquid at sed dignissimos. 20 |

21 | 22 | 25 | Learn More 26 | 27 |
28 | 29 | -------------------------------------------------------------------------------- /public/components/marketing/sections/1.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |

7 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 8 |

9 | 10 |

11 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe 12 | architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas 13 | sequi. 14 |

15 |
16 |
17 | 18 |
19 | 24 |
25 |
26 |
27 |
28 | -------------------------------------------------------------------------------- /public/components/marketing/sections/2.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |

7 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 8 |

9 | 10 |

11 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe 12 | architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas 13 | sequi. 14 |

15 |
16 |
17 | 18 |
19 | 24 |
25 |
26 |
27 |
28 | -------------------------------------------------------------------------------- /public/components/marketing/sections/3.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 10 |
11 | 12 |
13 |
14 |

15 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 16 |

17 | 18 |

19 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe 20 | architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas 21 | sequi. 22 |

23 |
24 |
25 |
26 |
27 |
28 | -------------------------------------------------------------------------------- /public/components/marketing/sections/4.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

6 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 7 |

8 | 9 |

10 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe 11 | architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas sequi. 12 |

13 |
14 | 15 | 20 |
21 |
22 |
23 | -------------------------------------------------------------------------------- /public/og.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markmead/hyperui/4f9463efa5e92b300c45e0841901eaf99b9a45c7/public/og.jpg -------------------------------------------------------------------------------- /src/components/Ads.jsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useEffect } from 'react' 4 | import { usePathname } from 'next/navigation' 5 | 6 | export default function Ads() { 7 | const routerPathname = usePathname() 8 | 9 | useEffect(() => { 10 | loadAd() 11 | }, [routerPathname]) 12 | 13 | function loadAd() { 14 | if (document.getElementById('EthicalAds')) { 15 | window && window.ethicalads && window.ethicalads.reload() 16 | 17 | return 18 | } 19 | 20 | const newScript = document.createElement('script') 21 | 22 | newScript.src = 'https://media.ethicalads.io/media/client/ethicalads.min.js' 23 | newScript.async = true 24 | newScript.id = 'EthicalAds' 25 | 26 | document.body.appendChild(newScript) 27 | } 28 | 29 | return ( 30 |
37 | ) 38 | } 39 | -------------------------------------------------------------------------------- /src/components/BlogCard.jsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | 3 | export default function BlogCard({ blogPost }) { 4 | return ( 5 | 6 |
7 | 10 | 11 |
12 | 13 | {blogPost.title} 14 | 15 |
16 | 17 | 18 |
19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /src/components/BlogGrid.jsx: -------------------------------------------------------------------------------- 1 | import BlogCard from '@component/BlogCard' 2 | 3 | export default function BlogGrid({ blogPosts }) { 4 | return ( 5 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /src/components/BrandLogo.jsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | 3 | export default function BrandLogo({ fontSize = 'text-sm' }) { 4 | return ( 5 | 6 |
7 | HyperUI 8 | 9 | 12 |
13 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /src/components/ButtonStyle.jsx: -------------------------------------------------------------------------------- 1 | export default function ButtonStyle({ buttonEmoji, buttonText, buttonActive = false }) { 2 | return ( 3 | 6 | 9 | 10 | {buttonText} 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /src/components/CollectionGrid.jsx: -------------------------------------------------------------------------------- 1 | import CollectionCard from '@component/CollectionCard' 2 | 3 | export default function CollectionGrid({ componentItems }) { 4 | return ( 5 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /src/components/CollectionList.jsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import ComponentPreview from '@component/ComponentPreview' 4 | 5 | export default function CollectionList({ componentsData }) { 6 | return ( 7 |
8 | 15 |
16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /src/components/Container.jsx: -------------------------------------------------------------------------------- 1 | export default function Container({ children, id, classNames }) { 2 | return ( 3 |
4 | {children} 5 |
6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /src/components/GithubSocial.jsx: -------------------------------------------------------------------------------- 1 | export default function GithubSocial() { 2 | return ( 3 | 9 | GitHub 10 | 11 | 12 | 13 | 11k 14 | 15 | ) 16 | } 17 | 18 | function IconGithub() { 19 | return ( 20 | 27 | ) 28 | } 29 | -------------------------------------------------------------------------------- /src/components/HeaderBanner.jsx: -------------------------------------------------------------------------------- 1 | import Container from '@component/Container' 2 | 3 | export default function HeaderBanner() { 4 | return ( 5 |
6 | 7 | 13 | Enjoy HyperUI? Give it a star on GitHub 14 | 15 | 18 | 19 | 20 |
21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /src/components/HeaderMenu.jsx: -------------------------------------------------------------------------------- 1 | import MenuLinks from '@component/HeaderMenuLinks' 2 | 3 | export default function HeaderMenu({ showMenu, handleSetShowMenu, menuLinks }) { 4 | return ( 5 |
6 | 11 | 12 | {showMenu && ( 13 |
14 | 19 |
20 | )} 21 |
22 | ) 23 | } 24 | 25 | function IconMenu() { 26 | return ( 27 | 35 | 36 | 37 | ) 38 | } 39 | -------------------------------------------------------------------------------- /src/components/HeaderMenuLinks.jsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | 3 | export default function HeaderMenuLinks({ menuLinks, navClass = '', ulClass = '' }) { 4 | return ( 5 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /src/components/HeroBanner.jsx: -------------------------------------------------------------------------------- 1 | import Container from '@component/Container' 2 | import UspList from '@component/UspList' 3 | 4 | export default function HeroBanner({ children, subtitle, title }) { 5 | return ( 6 |
7 | 8 |
9 |

{subtitle}

10 | 11 |

{title}

12 |
13 | 14 |
15 |

{children}

16 | 17 | 18 |
19 | 20 |
21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /src/components/MdxRemoteRender.jsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { MDXRemote } from 'next-mdx-remote' 4 | 5 | export default function MdxContent({ mdxSource, mdxComponents = {}, mdxScope = {} }) { 6 | return 7 | } 8 | -------------------------------------------------------------------------------- /src/components/PreviewBreakpoint.jsx: -------------------------------------------------------------------------------- 1 | import ButtonStyle from '@component/ButtonStyle' 2 | 3 | export default function PreviewBreakpoint({ 4 | breakpointActive, 5 | breakpointEmoji, 6 | handleSetPreviewWidth, 7 | breakpointWidth, 8 | breakpointText, 9 | }) { 10 | return ( 11 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /src/components/PreviewCode.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | 3 | import Prism from 'prismjs' 4 | 5 | import 'prismjs/components/prism-jsx.min' 6 | 7 | export default function PreviewCode({ componentCode = '', codeType = 'html' }) { 8 | const [prismClass, setPrismClass] = useState('language-html') 9 | 10 | useEffect(() => Prism.highlightAll(), [componentCode]) 11 | 12 | useEffect(() => { 13 | codeType === 'html' && setPrismClass('language-html') 14 | codeType === 'vue' && setPrismClass('language-html') 15 | codeType === 'jsx' && setPrismClass('language-jsx') 16 | }, [codeType]) 17 | 18 | return ( 19 | 
20 |       {componentCode}
21 |
22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /src/components/PreviewCopy.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | 3 | import { useCopyToClipboard } from 'react-use' 4 | 5 | import ButtonStyle from '@component/ButtonStyle' 6 | 7 | export default function PreviewCopy({ componentCode = '' }) { 8 | const [buttonText, setButtonText] = useState('Copy') 9 | const [buttonEmoji, setButtonEmoji] = useState('📋') 10 | const [copyStatus, copyToClipboard] = useCopyToClipboard() 11 | 12 | function handleCopyToClipboard() { 13 | copyToClipboard(componentCode) 14 | 15 | if (copyStatus.error) { 16 | setButtonText('Error') 17 | setButtonEmoji('🚨') 18 | 19 | return 20 | } 21 | 22 | setButtonText('Copied') 23 | setButtonEmoji('🎉') 24 | 25 | setTimeout(() => { 26 | setButtonText('Copy') 27 | setButtonEmoji('📋') 28 | }, 3000) 29 | } 30 | 31 | return ( 32 | 35 | ) 36 | } 37 | -------------------------------------------------------------------------------- /src/components/PreviewCreator.jsx: -------------------------------------------------------------------------------- 1 | export default function PreviewCreator({ creatorGithub }) { 2 | return ( 3 |
4 |

5 | Created by{' '} 6 | 12 | {creatorGithub} 13 | 14 |

15 |
16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /src/components/PreviewIframe.jsx: -------------------------------------------------------------------------------- 1 | export default function PreviewIframe({ 2 | componentHtml, 3 | componentTitle, 4 | previewWidth = '100%', 5 | previewHeight = 'h-[400px] lg:h-[600px]', 6 | previewDark = false, 7 | refIframe, 8 | }) { 9 | const iframeTheme = previewDark ? 'bg-gray-900' : 'bg-white' 10 | 11 | return ( 12 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /src/components/PreviewPlugins.jsx: -------------------------------------------------------------------------------- 1 | export default function PreviewPlugins({ componentPlugins }) { 2 | return ( 3 |
4 |

5 | Plugins:{' '} 6 | {componentPlugins.map((componentPlugin, pluginIndex) => ( 7 | 8 | 14 | {componentPlugin} 15 | 16 | 17 | {pluginIndex < componentPlugins.length - 1 && ', '} 18 | 19 | ))} 20 |

21 |
22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /src/components/PreviewRtl.jsx: -------------------------------------------------------------------------------- 1 | import ButtonStyle from '@component/ButtonStyle' 2 | 3 | export default function PreviewRtl({ isRtl, handleSetIsRtl }) { 4 | return ( 5 | 8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /src/components/PreviewTitle.jsx: -------------------------------------------------------------------------------- 1 | export default function PreviewTitle({ componentTitle, componentHash }) { 2 | return ( 3 |

4 | 5 | 11 | 12 | {componentTitle} 13 | 14 |

15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /src/components/PreviewType.jsx: -------------------------------------------------------------------------------- 1 | export default function PreviewType({ componentId, codeType, handleSetCodeType }) { 2 | return ( 3 |
4 | 7 | 8 | 18 |
19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /src/components/PreviewView.jsx: -------------------------------------------------------------------------------- 1 | import ButtonStyle from '@component/ButtonStyle' 2 | 3 | export default function PreviewView({ showPreview, handleSetShowPreview }) { 4 | return ( 5 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /src/components/UspList.jsx: -------------------------------------------------------------------------------- 1 | export default function UspList() { 2 | const uspItems = ['No install', 'No config', 'No setup'] 3 | 4 | return ( 5 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /src/data/categories/application.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Application 3 | subtitle: Free Tailwind CSS Application Components 4 | description: Working on an CMS, eCommerce platform or admin hub? HyperUI has a growing 5 | range of application Tailwind CSS components, that will help you build an 6 | accessible, responsive application for your next project. 7 | emoji: 🤖 8 | --- 9 | -------------------------------------------------------------------------------- /src/data/categories/marketing.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Marketing 3 | subtitle: Free Tailwind CSS Marketing Components 4 | description: Build your next marketing website with ease through the use of Tailwind CSS 5 | and HyperUI components. These components are not exclusive to marketing 6 | websites, but they will help you rapidly build your next marketing website. 7 | emoji: 📣 8 | --- 9 | -------------------------------------------------------------------------------- /src/data/components/application/alerts.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Alerts 3 | description: Selection of responsive Alert components for Tailwind CSS v4 applications. 4 | These notification elements display important messages, warnings, success 5 | feedback, and error alerts with customizable styles. 6 | emoji: 📣 7 | wrapper: h-[400px] 8 | container: p-6 max-w-md mx-auto 9 | terms: 10 | - alert 11 | - notification 12 | - message 13 | components: 14 | - { title: 'Base', dark: true } 15 | - { title: 'Base with actions', dark: true } 16 | - { title: 'Standout' } 17 | --- 18 | 19 | # Alert Components 20 | 21 |

{frontmatter.description}

22 | 23 | 24 | -------------------------------------------------------------------------------- /src/data/components/application/badges.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Badges 3 | description: Responsive badge and tag components for Tailwind CSS v4. These customizable UI elements include base badges, icon badges, dismissible badges, and themed variations—ideal for notifications, statuses, and labels in web applications and dashboards. Optimized for SEO and accessibility. 4 | emoji: 🥁 5 | wrapper: h-[200px] 6 | container: p-6 flex flex-wrap justify-center gap-4 7 | terms: 8 | - badge 9 | - notification 10 | - status 11 | components: 12 | - { title: 'Base', dark: true } 13 | - { title: 'Base with icon', dark: true } 14 | - { title: 'Base with dismiss', dark: true } 15 | - { title: 'Icon', dark: true } 16 | - { title: 'Themed with icon', dark: true } 17 | --- 18 | 19 | # Badge Components 20 | 21 |

{frontmatter.description}

22 | 23 | 24 | -------------------------------------------------------------------------------- /src/data/components/application/breadcrumbs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Breadcrumbs 3 | description: Breadcrumb components built with Tailwind CSS v4. These responsive navigation breadcrumbs help users track their location within websites and applications. Perfect for ecommerce, dashboards, and multi-level navigation. Customizable with dividers and icons, optimized for SEO and accessibility. 4 | emoji: 🍞 5 | wrapper: h-[200px] 6 | container: p-6 flex justify-center 7 | terms: 8 | - breadcrumb 9 | - navigation 10 | - link 11 | components: 12 | - { title: 'Base', dark: true } 13 | - { title: 'Base with home icon', dark: true } 14 | - { title: 'Slash divider', dark: true, creator: mohdahsanrazakhan } 15 | - { title: 'Slash divider with home icon', dark: true, creator: mohdahsanrazakhan } 16 | - { title: 'Grouped with chevron divider', dark: true } 17 | --- 18 | 19 | # Breadcrumb Components 20 | 21 |

{frontmatter.description}

22 | 23 | 24 | -------------------------------------------------------------------------------- /src/data/components/application/button-groups.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Button Groups 3 | description: Discover responsive button group components built with Tailwind CSS v4. These customizable UI elements are perfect for web applications, dashboards, and admin panels, supporting action buttons, icon buttons, tabbed navigation, and toggle controls. Optimized for accessibility, SEO, and mobile usability. 4 | emoji: 👆 5 | wrapper: h-[200px] 6 | container: p-6 flex justify-center 7 | terms: 8 | - button 9 | - group 10 | - action 11 | components: 12 | - { title: 'Base', dark: true } 13 | - { title: 'Icons', dark: true } 14 | - { title: 'Main and secondary', dark: true } 15 | --- 16 | 17 | # Button Group Components 18 | 19 |

{frontmatter.description}

20 | 21 | 22 | -------------------------------------------------------------------------------- /src/data/components/application/checkboxes.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Checkboxes 3 | description: Accessible checkbox components built with Tailwind CSS v4. Includes styled checkboxes with labels, descriptions, and responsive designs for forms, settings, and user interfaces. Optimized for SEO, accessibility, and mobile usability. 4 | emoji: ✅ 5 | wrapper: h-[400px] 6 | container: p-6 max-w-lg mx-auto 7 | terms: 8 | - checkbox 9 | - input 10 | - form 11 | components: 12 | - { title: 'Base', dark: true, plugins: ['@tailwindcss/forms'] } 13 | - { title: 'Described', dark: true, plugins: ['@tailwindcss/forms'] } 14 | - { title: 'Described with divide', dark: true, plugins: ['@tailwindcss/forms'] } 15 | --- 16 | 17 | # Checkbox Components 18 | 19 |

{frontmatter.description}

20 | 21 | 22 | -------------------------------------------------------------------------------- /src/data/components/application/details-list.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Details Lists 3 | description: Responsive and customizable details list components for displaying structured data. Built with Tailwind CSS v4, these lists feature striped rows, borders, and dark mode support for modern web applications and dashboards. Optimized for SEO, accessibility, and mobile usability. 4 | emoji: 🪪 5 | container: p-6 max-w-3xl mx-auto 6 | terms: 7 | - data 8 | - details 9 | - list 10 | components: 11 | - { title: 'Base', dark: true } 12 | - { title: 'Striped', dark: true } 13 | - { title: 'Bordered', dark: true } 14 | - { title: 'Striped and bordered', dark: true } 15 | --- 16 | 17 | # Details List Components 18 | 19 |

{frontmatter.description}

20 | 21 | 22 | -------------------------------------------------------------------------------- /src/data/components/application/dividers.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dividers 3 | description: Selection of layout Dividers components created with Tailwind CSS v4. These 4 | responsive horizontal dividers include basic, gradient, and aligned styles for 5 | separating content sections in your web applications and UI designs. 6 | emoji: 🗡️ 7 | wrapper: h-[200px] 8 | container: p-6 max-w-3xl mx-auto 9 | terms: 10 | - divider 11 | - layout 12 | - separator 13 | components: 14 | - { title: 'Base', dark: true } 15 | - { title: 'Gradient', dark: true } 16 | - { title: 'Left align', dark: true } 17 | - { title: 'Left align gradient', dark: true } 18 | - { title: 'Right align', dark: true } 19 | - { title: 'Right align gradient', dark: true } 20 | --- 21 | 22 | # Divider Components 23 | 24 |

{frontmatter.description}

25 | 26 | 27 | -------------------------------------------------------------------------------- /src/data/components/application/dropdown.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dropdowns 3 | description: Application UI dropdown components built with Tailwind CSS v4. These responsive, customizable dropdown menus are ideal for navigation, filters, settings, and user actions in modern web applications. Enhance user experience and SEO with accessible, mobile-friendly dropdowns. 4 | emoji: 💧 5 | container: p-6 max-w-sm mx-auto flex justify-center 6 | terms: 7 | - dropdown 8 | - menu 9 | - navigation 10 | components: 11 | - { title: 'Base', dark: true } 12 | - { title: 'Divided', dark: true } 13 | - { title: 'Grouped', dark: true } 14 | --- 15 | 16 | # Dropdown Components 17 | 18 |

{frontmatter.description}

19 | 20 | 21 | -------------------------------------------------------------------------------- /src/data/components/application/file-uploaders.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: File Uploaders 3 | description: File uploader components built with Tailwind CSS v4. These responsive, accessible uploaders support drag-and-drop, previews, and progress indicators for modern web applications. Optimized for usability and accessibility. 4 | emoji: 📤 5 | container: p-6 max-w-md mx-auto 6 | terms: 7 | - file 8 | - form 9 | - upload 10 | tag: new 11 | components: 12 | - { title: 'Base', dark: true } 13 | - { title: 'Base with button', dark: true } 14 | --- 15 | 16 | # File Uploader Components 17 | 18 |

{frontmatter.description}

19 | 20 | 21 | -------------------------------------------------------------------------------- /src/data/components/application/filters.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Filters 3 | description: Filter components for web applications built with Tailwind CSS v4. These responsive, customizable UI filters help users sort, search, and refine content. Ideal for ecommerce, dashboards, data tables, and search results. Optimized for accessibility, SEO, and mobile usability. 4 | emoji: 🎛️ 5 | wrapper: h-[400px] 6 | container: p-6 max-w-md mx-auto 7 | terms: 8 | - filter 9 | - search 10 | - sort 11 | components: 12 | - { title: 'Dropdown', dark: true, plugins: ['@tailwindcss/forms'] } 13 | - { title: 'Accordion', dark: true, plugins: ['@tailwindcss/forms'] } 14 | --- 15 | 16 | # Filter Components 17 | 18 |
19 | These components were originally part of the eCommerce category but have since moved. 20 |
21 | 22 |

{frontmatter.description}

23 | 24 | 25 | -------------------------------------------------------------------------------- /src/data/components/application/grids.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Grids 3 | description: Responsive grid layouts and grid systems created with Tailwind CSS v4 for modern web applications. Flexible, SEO-optimized grid components for dashboards, admin panels, and content organization with customizable columns and rows. Perfect for responsive design and CSS grid implementation. 4 | emoji: 📦 5 | wrapper: h-[400px] 6 | container: p-6 7 | terms: 8 | - grid 9 | - layout 10 | - columns 11 | components: 12 | - { title: '1x1' } 13 | - { title: '1x2' } 14 | - { title: '2x1' } 15 | - { title: '1x1x1' } 16 | - { title: '1x1x1x1' } 17 | - { title: '1x1x2' } 18 | - { title: '2x1x1' } 19 | - { title: '1x2x1' } 20 | - { title: 'Sidebar left' } 21 | - { title: 'Sidebar right' } 22 | --- 23 | 24 | # Grid Components 25 | 26 |

{frontmatter.description}

27 | 28 | 29 | -------------------------------------------------------------------------------- /src/data/components/application/inputs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Inputs 3 | description: Form input components crafted with Tailwind CSS v4. Responsive text fields, 4 | search boxes, and form controls optimized for web applications. Customizable 5 | input elements with various styles including icons and floating labels for 6 | modern UI design. 7 | emoji: 🔌 8 | wrapper: h-[200px] 9 | container: p-6 max-w-sm mx-auto 10 | terms: 11 | - input 12 | - form 13 | - field 14 | components: 15 | - { title: 'Base', dark: true, plugins: ['@tailwindcss/forms'] } 16 | - { title: 'Base with icon', dark: true, plugins: ['@tailwindcss/forms'] } 17 | - { title: 'Base with button', dark: true, plugins: ['@tailwindcss/forms'] } 18 | - { title: 'Floating label', dark: true, plugins: ['@tailwindcss/forms'] } 19 | --- 20 | 21 | # Input Components 22 | 23 |

{frontmatter.description}

24 | 25 | 26 | -------------------------------------------------------------------------------- /src/data/components/application/media.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Media 3 | description: Responsive media and avatar components for modern web interfaces, built with Tailwind CSS v4. Perfect for user profiles, image galleries, and content cards. These customizable, SEO-friendly layouts support flexible alignment and accessibility for any application. 4 | emoji: 🌆 5 | wrapper: h-[400px] 6 | container: p-6 max-w-md mx-auto 7 | terms: 8 | - media 9 | - avatar 10 | - image 11 | components: 12 | - { title: 'Left align top' } 13 | - { title: 'Left align center' } 14 | - { title: 'Left align bottom' } 15 | - { title: 'Left align stretch' } 16 | - { title: 'Right align top' } 17 | - { title: 'Right align center' } 18 | - { title: 'Right align bottom' } 19 | - { title: 'Right align stretch' } 20 | --- 21 | 22 | # Media Components 23 | 24 |

{frontmatter.description}

25 | 26 | 27 | -------------------------------------------------------------------------------- /src/data/components/application/modals.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Modals 3 | description: Accessible modal components built with Tailwind CSS v4. Includes simple modals, close buttons, and action modals for web applications. Responsive, customizable, and optimized for SEO, accessibility, and user experience. 4 | emoji: 🗯️ 5 | tag: updated 6 | terms: 7 | - modal 8 | - dialog 9 | - popup 10 | components: 11 | - { title: 'Base', dark: true } 12 | - { title: 'Base with close', dark: true } 13 | - { title: 'Actions', dark: true } 14 | - { title: 'Actions with close', dark: true } 15 | - { title: 'Input', dark: true } 16 | - { title: 'Input with close', dark: true } 17 | --- 18 | 19 | # Modal Components 20 | 21 |

{frontmatter.description}

22 | 23 | 24 | -------------------------------------------------------------------------------- /src/data/components/application/pagination.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Pagination 3 | description: Responsive pagination components designed with Tailwind CSS v4. Perfect for page navigation in web applications, dashboards, and data tables. Features numbered links, previous/next buttons, and more. Optimized for SEO, accessibility, and mobile usability. 4 | emoji: 🔢 5 | wrapper: h-[200px] 6 | container: p-6 flex justify-center 7 | terms: 8 | - pagination 9 | - navigation 10 | - page 11 | components: 12 | - { title: 'Navigation', dark: true } 13 | - { title: 'Input', dark: true, plugins: ['@tailwindcss/forms'] } 14 | - { title: 'X/Y', dark: true } 15 | --- 16 | 17 | # Pagination Components 18 | 19 |

{frontmatter.description}

20 | 21 | 22 | -------------------------------------------------------------------------------- /src/data/components/application/quantity-inputs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Quantity Inputs 3 | description: Quantity input components built with Tailwind CSS v4. These responsive, customizable number inputs are ideal for ecommerce, order forms, and shopping carts. Optimized for accessibility, SEO, and mobile usability. 4 | emoji: ➕ 5 | wrapper: h-[200px] 6 | container: p-6 flex justify-center 7 | terms: 8 | - input 9 | - quantity 10 | - ecommerce 11 | components: 12 | - { title: 'Base with plus and minus buttons', dark: true, plugins: ['@tailwindcss/forms'] } 13 | - { 14 | title: 'Base with plus and minus buttons, no spinners in the input', 15 | dark: true, 16 | plugins: ['@tailwindcss/forms'], 17 | } 18 | - { title: 'Base with plus and minus buttons, no spinners in the input and text 19 | centered', dark: true, plugins: ['@tailwindcss/forms'] } 20 | - { title: 'Bordered with plus and minus buttons', dark: true, plugins: ['@tailwindcss/forms'] } 21 | --- 22 | 23 | # Quantity Input Components 24 | 25 |
26 | These components were originally part of the eCommerce category but have since moved. 27 |
28 | 29 |

{frontmatter.description}

30 | 31 | 32 | -------------------------------------------------------------------------------- /src/data/components/application/radio-groups.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Radio Groups 3 | description: Radio group components built with Tailwind CSS v4. These responsive, customizable radio inputs are perfect for forms, settings, and user preferences in web applications. Optimized for accessibility, SEO, and mobile usability. 4 | emoji: 📻 5 | wrapper: h-[400px] 6 | container: p-6 max-w-lg mx-auto 7 | terms: 8 | - radio 9 | - group 10 | - form 11 | components: 12 | - { title: 'Base', dark: true } 13 | - { title: 'Base with input', dark: true, plugins: ['@tailwindcss/forms'] } 14 | - { title: 'Color variant' } 15 | --- 16 | 17 | # Radio Group Components 18 | 19 |

{frontmatter.description}

20 | 21 | 22 | -------------------------------------------------------------------------------- /src/data/components/application/selects.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Selects 3 | description: Versatile and customizable select components built with Tailwind CSS v4. These responsive dropdown menus and form selects are perfect for filtering data, user preferences, and form controls in modern web applications. Optimized for accessibility, SEO, and mobile usability. 4 | emoji: 📣 5 | wrapper: h-[400px] 6 | container: p-6 max-w-xs mx-auto 7 | terms: 8 | - select 9 | - dropdown 10 | - filter 11 | components: 12 | - { title: 'Base', dark: true, plugins: ['@tailwindcss/forms'] } 13 | - { title: 'Option groups', dark: true, plugins: ['@tailwindcss/forms'] } 14 | - { title: 'Datalist', dark: true, plugins: ['@tailwindcss/forms'] } 15 | --- 16 | 17 | # Select Components 18 | 19 |
20 | These use the native `