-Float UI is collection of modern UI components and website templates built on top of React, and Vue (soon) with Tailwind CSS, the components are beautiful designed, expertly crafted, allow you to build beautiful websites.
+Float UI is a collection of modern UI components and website templates built on top of React, and soon, Vue. With Tailwind CSS, the components are beautifully designed and expertly crafted, allowing you to build beautiful websites.
## Why Float UI?
-First, Float UI is fully free, and open source, you don't need to pay anything to use it, and we are working on it full-time, so we'll keep improving, and adding more UIs, the second thing if you’re working on a large project that requires a high level of UI customization or you find yourself repeating the same UI patterns across projects, consider creating an internal UI library, and in this case Float UI is a great choice. You should definitely use it.
+Float UI is fully free and open source. You don't need to pay anything to use it, and we are working on it full-time, so we'll keep improving and adding more UIs. If you’re working on a large project that requires a high level of UI customization or you find yourself repeating the same UI patterns across projects, consider creating an internal UI library. In this case, Float UI is a great choice. You should definitely use it.
+
+## Prerequisites
+
+Before you begin, ensure you have met the following requirements:
+
+* You have installed the latest version of npm/yarn/pnpm.
+* You have a `Windows/Linux/Mac` machine.
## Getting Started
-First, install the dependencies we highly recommend using pnpm, and run the development server:
+First, install the dependencies. We highly recommend using pnpm, and run the development server:
```bash
npm run dev
@@ -18,7 +25,6 @@ npm run dev
yarn dev
# or
pnpm dev
-```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
diff --git a/componentsDB/footers/footers-0da45f93945f.mdx b/componentsDB/footers/footers-0da45f93945f.mdx
index a2b0e29..1682f36 100644
--- a/componentsDB/footers/footers-0da45f93945f.mdx
+++ b/componentsDB/footers/footers-0da45f93945f.mdx
@@ -3,7 +3,7 @@ title: Dark Footer
category: Marketing
paid: false
isActive: true
-ltr: {"preview":"function App() {\n\n const footerNavs = [\n {\n label: \"Resources\",\n items: [\n {\n href: 'javascript:void()',\n name: 'contact'\n },\n {\n href: 'javascript:void()',\n name: 'Support'\n },\n {\n href: 'javascript:void()',\n name: 'Documentation'\n },\n {\n href: 'javascript:void()',\n name: 'Pricing'\n },\n ],\n },\n {\n label: \"About\",\n items: [\n {\n href: 'javascript:void()',\n name: 'Terms'\n },\n {\n href: 'javascript:void()',\n name: 'License'\n },\n {\n href: 'javascript:void()',\n name: 'Privacy'\n },\n {\n href: 'javascript:void()',\n name: 'About US'\n },\n ]\n },\n {\n label: \"Explore\",\n items: [\n {\n href: 'javascript:void()',\n name: 'Showcase'\n },\n {\n href: 'javascript:void()',\n name: 'Roadmap'\n },\n {\n href: 'javascript:void()',\n name: 'Languages'\n },\n {\n href: 'javascript:void()',\n name: 'Blog'\n },\n ]\n },\n {\n label: \"Company\",\n items: [\n {\n href: 'javascript:void()',\n name: 'Partners'\n },\n {\n href: 'javascript:void()',\n name: 'Team'\n },\n {\n href: 'javascript:void()',\n name: 'Careers'\n },\n ],\n }\n ]\n\n return (\n \n )\n}","svelte":{"svelteTail":[{"label":"App.svelte","code":"\n\n\n","label":"index.html"}]},"react":{"jsxTail":[{"code":"export default () => {\n\n const footerNavs = [\n {\n label: \"Resources\",\n items: [\n {\n href: 'javascript:void()',\n name: 'contact'\n },\n {\n href: 'javascript:void()',\n name: 'Support'\n },\n {\n href: 'javascript:void()',\n name: 'Documentation'\n },\n {\n href: 'javascript:void()',\n name: 'Pricing'\n },\n ],\n },\n {\n label: \"About\",\n items: [\n {\n href: 'javascript:void()',\n name: 'Terms'\n },\n {\n href: 'javascript:void()',\n name: 'License'\n },\n {\n href: 'javascript:void()',\n name: 'Privacy'\n },\n {\n href: 'javascript:void()',\n name: 'About US'\n },\n ]\n },\n {\n label: \"Explore\",\n items: [\n {\n href: 'javascript:void()',\n name: 'Showcase'\n },\n {\n href: 'javascript:void()',\n name: 'Roadmap'\n },\n {\n href: 'javascript:void()',\n name: 'Languages'\n },\n {\n href: 'javascript:void()',\n name: 'Blog'\n },\n ]\n },\n {\n label: \"Company\",\n items: [\n {\n href: 'javascript:void()',\n name: 'Partners'\n },\n {\n href: 'javascript:void()',\n name: 'Team'\n },\n {\n href: 'javascript:void()',\n name: 'Careers'\n },\n ],\n }\n ]\n\n return (\n \n )\n}","label":"App.jsx"}],"jsxCss":[]},"vue":{"vueTail":[{"code":"\n \n\n\n","label":"App.vue"}],"vueCss":[]}}
+ltr: {"preview":"function App() {\n\n const footerNavs = [\n {\n label: \"Resources\",\n items: [\n {\n href: 'javascript:void()',\n name: 'contact'\n },\n {\n href: 'javascript:void()',\n name: 'Support'\n },\n {\n href: 'javascript:void()',\n name: 'Documentation'\n },\n {\n href: 'javascript:void()',\n name: 'Pricing'\n },\n ],\n },\n {\n label: \"About\",\n items: [\n {\n href: 'javascript:void()',\n name: 'Terms'\n },\n {\n href: 'javascript:void()',\n name: 'License'\n },\n {\n href: 'javascript:void()',\n name: 'Privacy'\n },\n {\n href: 'javascript:void()',\n name: 'About US'\n },\n ]\n },\n {\n label: \"Explore\",\n items: [\n {\n href: 'javascript:void()',\n name: 'Showcase'\n },\n {\n href: 'javascript:void()',\n name: 'Roadmap'\n },\n {\n href: 'javascript:void()',\n name: 'Languages'\n },\n {\n href: 'javascript:void()',\n name: 'Blog'\n },\n ]\n },\n {\n label: \"Company\",\n items: [\n {\n href: 'javascript:void()',\n name: 'Partners'\n },\n {\n href: 'javascript:void()',\n name: 'Team'\n },\n {\n href: 'javascript:void()',\n name: 'Careers'\n },\n ],\n }\n ]\n\n return (\n \n )\n}","svelte":{"svelteTail":[{"label":"App.svelte","code":"\n\n\n","label":"index.html"}]},"react":{"jsxTail":[{"code":"export default () => {\n\n const footerNavs = [\n {\n label: \"Resources\",\n items: [\n {\n href: 'javascript:void()',\n name: 'contact'\n },\n {\n href: 'javascript:void()',\n name: 'Support'\n },\n {\n href: 'javascript:void()',\n name: 'Documentation'\n },\n {\n href: 'javascript:void()',\n name: 'Pricing'\n },\n ],\n },\n {\n label: \"About\",\n items: [\n {\n href: 'javascript:void()',\n name: 'Terms'\n },\n {\n href: 'javascript:void()',\n name: 'License'\n },\n {\n href: 'javascript:void()',\n name: 'Privacy'\n },\n {\n href: 'javascript:void()',\n name: 'About US'\n },\n ]\n },\n {\n label: \"Explore\",\n items: [\n {\n href: 'javascript:void()',\n name: 'Showcase'\n },\n {\n href: 'javascript:void()',\n name: 'Roadmap'\n },\n {\n href: 'javascript:void()',\n name: 'Languages'\n },\n {\n href: 'javascript:void()',\n name: 'Blog'\n },\n ]\n },\n {\n label: \"Company\",\n items: [\n {\n href: 'javascript:void()',\n name: 'Partners'\n },\n {\n href: 'javascript:void()',\n name: 'Team'\n },\n {\n href: 'javascript:void()',\n name: 'Careers'\n },\n ],\n }\n ]\n\n return (\n \n )\n}","label":"App.jsx"}],"jsxCss":[]},"vue":{"vueTail":[{"code":"\n \n\n\n","label":"App.vue"}],"vueCss":[]}}
slug: /footers
id: 53796d66-3ed3-4669-bc5e-0da45f93945f
created_at: 1670156038670
diff --git a/componentsDB/footers/footers-181aeccbae3c.mdx b/componentsDB/footers/footers-181aeccbae3c.mdx
index 66b0c0e..84617bf 100644
--- a/componentsDB/footers/footers-181aeccbae3c.mdx
+++ b/componentsDB/footers/footers-181aeccbae3c.mdx
@@ -3,7 +3,7 @@ title: Footer with Download links
category: Marketing
paid: false
isActive: true
-ltr: {"react":{"jsxCss":[],"jsxTail":[{"label":"App.jsx","code":"export default () => {\n\n const footerNavs = [\n {\n href: 'javascript:void()',\n name: 'Terms'\n },\n {\n href: 'javascript:void()',\n name: 'License'\n },\n {\n href: 'javascript:void()',\n name: 'Privacy'\n },\n {\n href: 'javascript:void()',\n name: 'About us'\n }\n ]\n return (\n \n )\n}"}]},"svelte":{"svelteTail":[{"code":"\n\n\n","label":"App.svelte"}]},"preview":"function App() {\n\n const footerNavs = [\n {\n href: 'javascript:void()',\n name: 'Terms'\n },\n {\n href: 'javascript:void()',\n name: 'License'\n },\n {\n href: 'javascript:void()',\n name: 'Privacy'\n },\n {\n href: 'javascript:void()',\n name: 'About us'\n }\n ]\n return (\n \n )\n}","vue":{"vueTail":[{"code":"\n \n\n\n","label":"App.vue"}],"vueCss":[]},"html":{"htmlTail":[{"label":"index.html","code":"![](\"https://www.floatui.com/logo.svg\"){kind=logo}
\n \n Lorem Ipsum has been the industry's standard dummy text ever\n since the 1500s.\n
\n\n \n Lorem Ipsum has been the industry's standard dummy text ever\n since the 1500s.\n
\n\n \n Lorem Ipsum has been the industry's standard dummy text ever since\n the 1500s, when an unknown printer took a galley of type and\n scrambled it to make a type specimen book.\n
\n\n \n Lorem Ipsum has been the industry's standard dummy text ever since\n the 1500s, when an unknown printer took a galley of type and\n scrambled it to make a type specimen book.\n
\n