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.
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
To get started with Struct-UI, install the required dependencies:
npm install framer-motion clsx tailwind-mergeAdd the following utility function to utils.ts:
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}For media queries, use the following custom hook:
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;
}Follow these steps to add a new component: View Full PR
-
Create the Component
Add your component insideregistry/components. For example:
registry/components/card-hover/card-hover.tsx.
View Changes -
Document the Component
Create an MDX file insidecontent/componentsto provide detailed documentation with previews and code examples.
Example:content/components/card-hover.mdx.
View Changes -
Update Documentation Config
Add the component's documentation metadata inconfigs/componentsDocumentation.json.
View Changes -
Update Sidebar Metadata
Add the component's name and path inconfigs/leftSideComponentMetaData.tsto display it in the sidebar.
View Changes -
(Optional) Add Component Overview
Add metadata and a thumbnail for the component inconfigs/componentsOverview.tsto display it in the Components tab (/components).
View Changes
- Numann Ahmed
- X: @numann_dev
- LinkedIn: in/numann-ahmed
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.
This project is licensed under the MIT License. See the LICENSE file for details.
If you encounter any issues or have questions, feel free to open an issue on GitHub or reach out to the author.
Struct-UI: Design that really makes sense.