diff --git a/.DS_Store b/.DS_Store index 796df4e..bb7d20d 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..03dd2f8 --- /dev/null +++ b/.npmignore @@ -0,0 +1,4 @@ +node_modules +./node_modules +./node_modules/ +assets/images/ diff --git a/README.md b/README.md index 847e8dc..a38fcb6 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,10 @@ # Free Tailwind CSS UI Components by TailGrids -TailGrids is library of high-quality Tailwind CSS UI components and blocks. Crafted for - modern websites, landing pages and web apps. Comes with all essential UI components & elements, consistent design, copy-paste UI building tool and everything you can expect from a top-notch UI library. +TailGrids is a library of high-quality Tailwind CSS UI components and blocks, designed specifically for modern websites, landing pages, and web apps. It comes with all the essential UI components and elements you would expect from a top-notch UI library, featuring a consistent design and a copy-paste UI building tool. -The free core version comes with tons of free UI components along with all core components. Feel free to use it with your personal or commercial projects, and don't forget to support and inspire our team by starring this repo. +The free core version provides numerous UI components along with all core components. It is available for both personal and commercial projects. Please feel free to use it, and don't forget to support and inspire our team by starring this repo. + +It's worth noting that this same set of components is also available for React and Vue.js. ### [๐Ÿš€ Explore All Components](https://tailgrids.com/components) @@ -12,26 +14,36 @@ The free core version comes with tons of free UI components along with all core ### Installing via NPM -As a NPM package make sure that you have installed [Node.js](https://nodejs.org) and [Tailwind CSS](https://tailwindcss.com) +Ensure you've installed [Node.js](https://nodejs.org) and [Tailwind CSS](https://tailwindcss.com) before TailGrids NPM package. Here's a quick guide to get you started with Tailgrids: -1. Install Tailgrids as a dependency using NPM by running the command below: +**1. Install the [TailGrids NPM package](https://www.npmjs.com/package/tailgrids/?ref=tailgrids.com):** -``` +```bash npm i tailgrids ``` +**2. Add the TailGrids plugin to your `tailwind.config.js` file:** -2. Require Tailgrids as a plugin inside the `tailwind.config.js` file: +```javascript +module.exports = { + // Your existing Tailwind CSS configuration goes here + plugins: [require("tailgrids/plugin")], +}; ``` -module.exports = { - //... other config of your project +**3. [Browse the components](https://tailgrids.com/components) and simply copy and paste the ones you like into your projects.** - plugins: [ - require('tailgrids/plugin') - ] +And that's it! You're all set to start using TailGrids in your project. Happy coding! + +### [โšก Get PRO Version](https://tailgrids.com/pricing) + +### [๐Ÿ“„ Detailed Documentation and Usage Guide](https://tailgrids.com/docs) + +### [๐Ÿ‘‰ TailAdmin React](https://tailgrids.com/react) + +### [๐Ÿ‘‰ TailAdmin Vue](https://tailgrids.com/vue) + +### [๐Ÿ–Œ๏ธ TailGrids Figma](https://tailgrids.com/figma) -} -``` ## ๐Ÿ’™ Support @@ -40,12 +52,54 @@ and sharing with friends. If you like the the library consider purchasing the [P ## Changelog -### version 2.1.0 +### Version 2.2.0 +(May, 2024) + +- Added over 80 new components. +- Updated the core style guide. +- Revised the file structure. +- Enhanced the plugin to reduce dependencies. +- Updated the Tailwind CSS version along with other dependencies. + +### Version 2.1.0 +(October, 2023) + +- Introduced dark mode. +- Polished existing components. +- Incorporated a few core components. +- Updated dependent packages. + +## Version 2.0.0 +(February, 2023) + +- This major release doubled our components, introduced dark mode, and expanded our components & example templates. +- 500+ Tailwind UI Components (200+ Newly Added) +- 12 Templates (8 Newly Added) +- Dark mode for all Components +- Updated Figma File with New UI Components +- 2 E-Commerce Templates +- 90+ Advanced | Core, Marketing and App UI Components +- 50+ Dashboard UI Components +- 100+ eCommerce Components + +## Version 1.1.0 +(March, 2022) + +We focused on enhancing your design experience with Figma integration and new templates. + +- 2 New Templates +- Figma Source for UI Components +- Responsive Buttons / Viewport +- Dedicated Templates Gallery + +## Initial Release +(February, 2022) + +The journey began! We launched TailGrids with a strong foundation of components and templates. --Dark mode added --Polished components --Added few core components --Update dependency packages + - Initial 300+ UI Components + - Two Example Templates + - NPM Package for Open Source Version ## ๐ŸŽ License diff --git a/404.html b/application/404/404-01.html similarity index 95% rename from 404.html rename to application/404/404-01.html index cb90923..0b073f2 100644 --- a/404.html +++ b/application/404/404-01.html @@ -7,10 +7,10 @@ Error 404 | TailGrids - + diff --git a/blog.html b/application/blogs/blog-01.html similarity index 85% rename from blog.html rename to application/blogs/blog-01.html index c2cab4b..2ee6032 100644 --- a/blog.html +++ b/application/blogs/blog-01.html @@ -7,14 +7,14 @@ Blog | TailGrids - + -
+
@@ -23,7 +23,7 @@ Our Blogs

Our Recent News

@@ -40,7 +40,7 @@
image @@ -54,7 +54,7 @@

Meet AutoManage, the best AI management tools @@ -70,7 +70,7 @@

image @@ -84,7 +84,7 @@

How to earn more money as a wellness coach @@ -100,7 +100,7 @@

image @@ -114,7 +114,7 @@

The no-fuss guide to upselling and cross selling diff --git a/card.html b/application/cards/card-01.html similarity index 86% rename from card.html rename to application/cards/card-01.html index e3b0ab8..5b8f234 100644 --- a/card.html +++ b/application/cards/card-01.html @@ -7,14 +7,14 @@ Cards | TailGrids - + -
+
@@ -22,7 +22,7 @@ class="mb-10 overflow-hidden rounded-lg bg-white shadow-1 duration-300 hover:shadow-3 dark:bg-dark-2 dark:shadow-card dark:hover:shadow-3" > image @@ -30,7 +30,7 @@

50+ Best creative website themes & templates @@ -56,7 +56,7 @@

class="mb-10 overflow-hidden rounded-lg bg-white shadow-1 duration-300 hover:shadow-3 dark:bg-dark-2 dark:shadow-card dark:hover:shadow-3" > image @@ -64,7 +64,7 @@

The ultimate UX and UI guide to card design @@ -88,7 +88,7 @@

class="mb-10 overflow-hidden rounded-lg bg-white shadow-1 duration-300 hover:shadow-3 dark:bg-dark-2 dark:shadow-card dark:hover:shadow-3" > image @@ -96,7 +96,7 @@

Creative Card Component designs graphic elements diff --git a/contact.html b/application/contacts/contact-01.html similarity index 99% rename from contact.html rename to application/contacts/contact-01.html index 53f8ec3..6e45510 100644 --- a/contact.html +++ b/application/contacts/contact-01.html @@ -7,15 +7,15 @@ Contact | TailGrids - +
@@ -25,7 +25,7 @@ Contact Us

GET IN TOUCH WITH US

@@ -136,7 +136,7 @@

diff --git a/footer.html b/application/footers/footer-01.html similarity index 95% rename from footer.html rename to application/footers/footer-01.html index c95b50c..99feb2c 100644 --- a/footer.html +++ b/application/footers/footer-01.html @@ -7,15 +7,15 @@ Footer | TailGrids - +