manfromexistence

1. auth
2. ux
3. media
4. ui
5. blockchain
6. design-pattern
7. test
8. documentation
9. tool
10. intregation

UI libraries

1. Shadcnui -> https://github.com/shadcn-ui/ui
2. Nextui -> https://github.com/nextui-org/nextui.git
3. Materialui -> https://github.com/mui/material-ui.git
4. Antdesign -> https://github.com/ant-design/ant-design.git https://github.com/antvis
5. Fluent -> https://github.com/microsoft/fluentui.git
6. Chakraui -> https://github.com/chakra-ui/chakra-ui.git
7. React Admin -> https://github.com/marmelab/react-admin.git
8. Primereact -> https://github.com/primefaces/primereact.git
9. Semanticui -> https://github.com/Semantic-Org/Semantic-UI.git
10. Grommet -> https://github.com/grommet/grommet.git
11. Mantine -> https://github.com/mantinedev/mantine.git
12. Virtualized -> https://github.com/bvaughn/react-virtualized.git
13. Bootstrap -> https://github.com/twbs/bootstrap.git https://github.com/react-bootstrap/react-bootstrap.git https://github.com/mdbootstrap/mdb-ui-kit.git

Components

1. Two-Step Popover
2. Action Toolbar
3. Dynamic Settings

ui

BETTER UI

git clone https://github.com/shadcn-ui/ui.git shadcnui && cd shadcnui && rm -rf .git && cd ..
git clone https://github.com/nextui-org/nextui.git nextui && cd nextui && rm -rf .git && cd ..
git clone https://github.com/ant-design/ant-design.git antdui && cd antdui && rm -rf .git && cd ..
git clone https://github.com/mui/material-ui.git materialui && cd materialui && rm -rf .git && cd ..
git clone https://github.com/chakra-ui/chakra-ui.git chakraui && cd chakraui && rm -rf .git && cd ..
git clone https://github.com/microsoft/fluentui fluentui && cd fluentui && rm -rf .git && cd ..
git clone https://github.com/tailwindlabs/headlessui headlessui && cd headlessui && rm -rf .git && cd ..
git clone https://github.com/react-bootstrap/react-bootstrap bootstrapui && cd bootstrapui && rm -rf .git && cd ..
git clone https://github.com/mantinedev/mantine mantineui && cd mantineui && rm -rf .git && cd ..
git clone https://github.com/grommet/grommet grommetui && cd grommetui && rm -rf .git && cd ..
git clone https://github.com/Semantic-Org/Semantic-UI-React semanticui && cd semanticui && rm -rf .git && cd ..
git clone https://github.com/chakra-ui/zag zagui && cd zagui && rm -rf .git && cd ..
git clone https://github.com/mdbootstrap/mdb-ui-kit mdbui && cd mdbui && rm -rf .git && cd ..

Components that I will make:

1. friday
2. hello
3. multiverse
4. aladdin
5. flow
6. neonslash
7. multiversal-input
8. multiversal-lang
9. mediaflow
10. mate
11. ai
12. algorithm
13. auth
14. backend
15. blockchain
16. config
17. database
18. design-pattern
19. documentation
20. frontend
21. infrastructure
22. media
23. observability
24. package
25. payment
26. platform
27. privacy
28. script
29. security
30. test
31. theory
32. tool
33. ui
34. ux
35. workspace
36. calendar-widget
37. flexible-tags-container
38. elastic-cards
39. animated-cards
40. parameter-ios-slider
41. dynamic-header-dropdown
42. dynamic-footer-widget
43. navbar
44. footer
45. acivitybar
46. primary-sidebar
47. secondary-sidebar
48. video-player
49. audio-player
50. charts

Components I will create for shadcn-ui:

1. autocomplete
2. floating-action-button
3. bottom-navigation
4. speed-dial
5. stepper
6. pop-confirm
7. cascader
8. color-picker
9. tree-select
10. transfer
11. upload
12. qr-code

Some useful commands while running this project in github ~

npm install -g npm@10.8.2
npm install -g bun
bun pm trust

Inspiration codebase's for this project

1. tailwindcss(v4): https://github.com/tailwindlabs/tailwindcss.git
2. Typescript: https://github.com/microsoft/TypeScript.git
3. sass: https://github.com/sass/sass.git
4. postcss: https://github.com/postcss/postcss.git
5. pacocoursey/next-themes: https://github.com/pacocoursey/next-themes.git
6. lukeed/clsx: https://github.com/lukeed/clsx.git
7. dcastil/tailwind-merge: https://github.com/dcastil/tailwind-merge.git
8. recharts: https://github.com/recharts/recharts.git
9. material-foundation: https://github.com/material-foundation/material-color-utilities.git
10. shadcn-ui/ui: https://github.com/shadcn-ui/ui.git
11. mui/material-ui: https://github.com/mui/material-ui.git
12. ant-design: https://github.com/ant-design/ant-design.git
13. nextui-org/nextui: https://github.com/nextui-org/nextui.git
14. zig: https://github.com/ziglang/zig.git
15. bun: https://github.com/oven-sh/bun.git
16. NixOs(nixpkgs): https://github.com/NixOS/nixpkgs.git

Some more stuff

• Ant Design Magic: https://ant-design-charts.antgroup.com/en/
• colinkhacks/zod: https://github.com/colinhacks/zod.git
• swr: https://github.com/vercel/swr.git
• lovell/sharp: https://github.com/lovell/sharp.git
• dart(language): https://github.com/dart-lang/language.git
• swift: https://github.com/swiftlang/swift.git

This list is not related to this codebase but still, I am too lazy to put this info in the correct repo right now

1. TanStack/query: https://github.com/TanStack/query.git
2. d3: https://github.com/d3/d3.git + Same but specially for React: https://github.com/recharts/recharts.git
3. airbnb/visx: https://github.com/airbnb/visx.git
4. MrBlenny/react-flow-charts: https://github.com/airbnb/visx.git
5. react-financial: https://github.com/react-financial/react-financial-charts.git
6. ant-design-charts: https://github.com/ant-design/ant-design-charts.git
7. plouc/nivo: https://github.com/plouc/nivo.git
8. dsherret/ts-morph(I don't know what is this): https://github.com/dsherret/ts-morph.git
9. gpbl/react-day-picker: https://github.com/gpbl/react-day-picker.git
10. geist(Just a useless font family): https://github.com/vercel/geist-font.git

import {
  MotionValue,
  motion,
  useMotionValue,
  useSpring,
  useTransform,
} from "framer-motion";
import { useRef } from "react";

function Dock() {
  let mouseX = useMotionValue(Infinity);

  return (
    <motion.div
      onMouseMove={(e) => mouseX.set(e.pageX)}
      onMouseLeave={() => mouseX.set(Infinity)}
      className="mx-auto flex h-16 items-end gap-4 rounded-2xl bg-gray-700 px-4 pb-3"
    >
      {[...Array(8).keys()].map((i) => (
        <AppIcon mouseX={mouseX} key={i} />
      ))}
    </motion.div>
  );
}

function AppIcon({ mouseX }: { mouseX: MotionValue }) {
  let ref = useRef<HTMLDivElement>(null);

  let distance = useTransform(mouseX, (val) => {
    let bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };

    return val - bounds.x - bounds.width / 2;
  });

  let widthSync = useTransform(distance, [-150, 0, 150], [40, 100, 40]);
  let width = useSpring(widthSync, { mass: 0.1, stiffness: 150, damping: 12 });

  return (
    <motion.div
      ref={ref}
      style={{ width }}
      className="aspect-square w-10 rounded-full bg-gray-400"
    />
  );
}