Struct-UI — A Scalable Component Library for Structured Design

Struct-UI is a modern, scalable, and structured component library designed to help developers build robust and visually appealing user interfaces. With a focus on design consistency and scalability, Struct-UI provides a comprehensive set of tools and components to accelerate your development process.

---

📂 Folder Structure

The project is organized into a well-defined folder structure to ensure scalability and maintainability:

├── .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

---

🚀 Installation

To get started with Struct-UI, install the required dependencies:

npm install framer-motion clsx tailwind-merge

Add the following utility function to utils.ts:

import{typeClassValue,clsx}from'clsx';import{twMerge}from'tailwind-merge';exportfunctioncn(...inputs: ClassValue[]){returntwMerge(clsx(inputs));}

For media queries, use the following custom hook:

import{useEffect,useState}from'react';exportfunctionuseMediaQuery(query: string){const[value,setValue]=useState(false);useEffect(()=>{functiononChange(event: MediaQueryListEvent){setValue(event.matches);}constresult=matchMedia(query);result.addEventListener('change',onChange);setValue(result.matches);return()=>result.removeEventListener('change',onChange);},[query]);returnvalue;}

---

🛠️ How to Add a New Component

Follow these steps to add a new component: View Full PR

1. Create the Component
   Add your component inside registry/components. For example:
   registry/components/card-hover/card-hover.tsx.
   View Changes

2. Document the Component
   Create an MDX file inside content/components to provide detailed documentation with previews and code examples.
   Example: content/components/card-hover.mdx.
   View Changes

3. Update Documentation Config
   Add the component's documentation metadata in configs/componentsDocumentation.json.
   View Changes

4. Update Sidebar Metadata
   Add the component's name and path in configs/leftSideComponentMetaData.ts to display it in the sidebar.
   View Changes

5. (Optional) Add Component Overview
   Add metadata and a thumbnail for the component in configs/componentsOverview.ts to display it in the Components tab (/components).
   View Changes

---

👤 Author

• Numann Ahmed
  • X: @numann_dev
  • LinkedIn: in/numann-ahmed

---

🌟 Contributing

Contributions are welcome! If you'd like to contribute, please fork the repository, make your changes, and submit a pull request. For major changes, please open an issue first to discuss what you'd like to change.

---

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

---

🛡️ Support

If you encounter any issues or have questions, feel free to open an issue on GitHub or reach out to the author.

---

📷 Preview

Struct-UI: Design that really makes sense.