├── .eslintrc.json
├── .example.env
├── .gitignore
├── README.md
├── app
| ├── (docs-page)
| | ├── components
| | | ├── [...slug]
| | | | ├── page.tsx
| | | ├── page.tsx
| | ├── get-started
| | | ├── page.mdx
| | ├── layout.tsx
| ├── favicon.ico
| ├── globals.css
| ├── layout.tsx
| ├── live-components
| | ├── [componentName]
| | | ├── error.tsx
| | | ├── loading.tsx
| | | ├── page.tsx
| ├── page.tsx
├── assets
| ├── index.ts
| ├── preview
| | ├── buttons.svg
| | ├── card.svg
| | ├── clip-path.svg
| | ├── horizontal-scrolling.svg
| | ├── index.tsx
| | ├── motion-number.svg
| ├── preview_bg.png
├── components
| ├── core
| | ├── blur-vignette.tsx
| | ├── cursor-follow-text.tsx
| | ├── drawer
| | | ├── vaul-main.tsx
| | ├── numbersuffle.tsx
| ├── labs
| | ├── preview-tab.tsx
| ├── website
| | ├── code-components
| | | ├── code-block.tsx
| | | ├── component-block.tsx
| | | ├── component-code-preview.tsx
| | | ├── component-preview.tsx
| | | ├── copy-button.tsx
| | | ├── copy-npm-button.tsx
| | | ├── drawer-code-preview.tsx
| | | ├── iframe-component-preview.tsx
| | | ├── iframe-tab-codepreview.tsx
| | | ├── pagination.tsx
| | | ├── pre-code.tsx
| | | ├── pre-coded.tsx
| | | ├── tab-codepreview.tsx
| | ├── constant.tsx
| | ├── dropdown-menu.tsx
| | ├── header.tsx
| | ├── hero-sec.tsx
| | ├── icons
| | | ├── github.tsx
| | | ├── x.tsx
| | ├── searchbar.tsx
| | ├── sidebar.tsx
| | ├── tableof-compoents.tsx
| | ├── theme-provider.tsx
| | ├── theme-switch.tsx
| | ├── ui
| | | ├── button.tsx
| | | ├── dialog.tsx
| | | ├── drawer.tsx
| | | ├── dropdown.tsx
| | | ├── navigation-menu.tsx
| | | ├── scroll-area.tsx
| | | ├── tabs.tsx
├── configs
| ├── docs.json
| ├── docs.ts
├── content
| ├── components
| | ├── blur-vignette.mdx
| | ├── buttons.mdx
| | ├── clip-path.mdx
| | ├── footers.mdx
| | ├── horizontal-scroll.mdx
| | ├── motion-number.mdx
| | ├── product-cards.mdx
├── hooks
| ├── use-media-query.tsx
| ├── useClickOutside.tsx
| ├── useClipBoarard.tsx
| ├── useZustStore.tsx
├── lib
| ├── code.ts
| ├── docs.tsx
| ├── progressbar.tsx
| ├── toc.ts
| ├── utils.ts
├── mdx-components.tsx
├── next.config.mjs
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── prettier.config.js
├── public
| ├── og.jpg
├── registry
| ├── components
| | ├── blurvignette
| | | ├── blurvignettecard.tsx
| | | ├── blurvignetteimg.tsx
| | | ├── blurvignettevideo.tsx
| | ├── button
| | | ├── btn-bg-shine.tsx
| | | ├── btn-bg-spotlight.tsx
| | | ├── btn-hover-active.tsx
| | | ├── btn-hover1.tsx
| | | ├── btn-hover2.tsx
| | | ├── creative-btn1.tsx
| | | ├── creative-btn2.tsx
| | ├── card
| | | ├── product-card1.tsx
| | | ├── product-card2.tsx
| | ├── clip-path
| | | ├── clip-path-creative.tsx
| | ├── footers
| | | ├── footer1.tsx
| | | ├── hover-footer.tsx
| | ├── motion-number
| | | ├── motion-number-after.tsx
| | | ├── motion-number-before.tsx
| | | ├── motion-number-last.tsx
| | | ├── motion-number-start.tsx
| | | ├── motion-number.tsx
| | ├── scroll-animation
| | | ├── framer-horizontal-scroll.tsx
├── tailwind.config.ts
├── tsconfig.json
You must install tailwindcss. As most of our components use framer-motion install it too.
npm install framer-motion clsx tailwind-mergeMust Add it in the utils.ts:
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}use this hooks for mediaQueries:
import { useEffect, useState } from 'react';
export function useMediaQuery(query: string) {
const [value, setValue] = useState(false);
useEffect(() => {
function onChange(event: MediaQueryListEvent) {
setValue(event.matches);
}
const result = matchMedia(query);
result.addEventListener('change', onChange);
setValue(result.matches);
return () => result.removeEventListener('change', onChange);
}, [query]);
return value;
}- X: @naymur_dev
- LinkedIn: in/naymur-rahman