new block's and component's added

README.md

@@ -1,25 +1,22 @@
-<div align="center"> 
+<div align="center">
   <h1>UIAble</h1>
+  <p><strong>A modern UI component library built with Tailwind CSS and Shadcn architecture.</strong></p>
   <p>
-    <strong>A modern UI component library built with Tailwind CSS and Shadcn architecture.</strong>
+    <a href="https://react.dev"><img src="https://img.shields.io/badge/React-19%2B-007ec6?style=flat-square&logo=react&logoColor=61DAFB" alt="React"></a>
+    <a href="https://nextjs.org"><img src="https://img.shields.io/badge/Next.js-16%2B-007ec6?style=flat-square&logo=next.js&logoColor=white" alt="Next.js"></a>
+    <a href="https://tailwindcss.com/"><img src="https://img.shields.io/badge/Tailwind_CSS-4%2B-007ec6?style=flat-square&logo=tailwind-css&logoColor=white" alt="Tailwind CSS"></a>
+    <a href="https://ui.shadcn.com/"><img src="https://img.shields.io/badge/shadcn%2Fui-4%2B-007ec6?style=flat-square&logo=shadcnui&logoColor=white" alt="shadcn/ui"></a>
+    <a href="https://base-ui.com/"><img src="https://img.shields.io/badge/Base_UI-1%2B-007ec6?style=flat-square" alt="Base UI"></a>
+    <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-007ec6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript Ready"></a>
+    <br />
+    <a href="https://discord.com/invite/txPuEn5atw"><img src="https://img.shields.io/badge/Discord-5865F2?style=flat-square&logo=discord&logoColor=white" alt="Discord"></a>
+    <a href="https://x.com/uiable"><img src="https://img.shields.io/badge/@uiable-black?style=flat-square&logo=x&logoColor=white" alt="X"></a>
   </p>
 </div>
 
-<p align="center">
-  <a href="https://react.dev"><img src="https://img.shields.io/badge/React-19%2B-007ec6?style=flat-square&logo=react&logoColor=61DAFB" alt="React"></a>
-  <a href="https://nextjs.org"><img src="https://img.shields.io/badge/Next.js-16%2B-007ec6?style=flat-square&logo=next.js&logoColor=white" alt="Next.js"></a>
-  <a href="https://tailwindcss.com/"><img src="https://img.shields.io/badge/Tailwind_CSS-4%2B-007ec6?style=flat-square&logo=tailwind-css&logoColor=white" alt="Tailwind CSS"></a>
-  <a href="https://ui.shadcn.com/"><img src="https://img.shields.io/badge/shadcn%2Fui-4%2B-007ec6?style=flat-square&logo=shadcnui&logoColor=white" alt="shadcn/ui"></a>
-  <a href="https://base-ui.com/"><img src="https://img.shields.io/badge/Base_UI-1%2B-007ec6?style=flat-square" alt="Base UI"></a>
-  <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-007ec6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript Ready"></a>
-  <br />
-  <a href="https://discord.com/invite/txPuEn5atw"><img src="https://img.shields.io/badge/Discord-5865F2?style=flat-square&logo=discord&logoColor=white" alt="Discord"></a>
-  <a href="https://x.com/uiable"><img src="https://img.shields.io/badge/@uiable-black?style=flat-square&logo=x&logoColor=white" alt="X"></a>
-</p>
-
 UIAble is an open-source collection of reusable UI components designed for developers who want clean, practical, and fully customizable building blocks for modern frontend projects, without lock-in, without unnecessary abstraction, and without rebuilding the same UI patterns from scratch every time.
 
-![Uiable Banner](public/assets/images/banner/free-version-banner.gif)
+![UIAble Banner](public/assets/images/banner/free-version-banner.gif)
 
 ---
 
@@ -79,101 +76,198 @@ The entire component library is transparent and open for contribution. No gated
 
 ## Components
 
-UIAble v1.0 ships with the following components:
-
 ### Form Controls
 
-- `Button`
-- `Button Group`
-- `Checkbox`
-- `Combobox`
-- `Command Palette`
-- `Date Picker`
-- `Input`
-- `Input Group`
-- `Input OTP`
-- `Native Select`
-- `Radio`
-- `Radio Group`
-- `Select`
-- `Slider`
-- `Switch`
-- `Textarea`
-- `Toggle`
-- `Toggle Group`
+<div>
+  <a href="https://uiable.com/components/button" title="Button"><kbd>Button</kbd></a>
+  <a href="https://uiable.com/components/button-group" title="Button Group"><kbd>Button Group</kbd></a>
+  <a href="https://uiable.com/components/checkbox" title="Checkbox"><kbd>Checkbox</kbd></a>
+  <a href="https://uiable.com/components/combobox" title="Combobox"><kbd>Combobox</kbd></a>
+  <a href="https://uiable.com/components/command" title="Command Palette"><kbd>Command Palette</kbd></a>
+  <a href="https://uiable.com/components/date-picker" title="Date Picker"><kbd>Date Picker</kbd></a>
+  <a href="https://uiable.com/components/input" title="Input"><kbd>Input</kbd></a>
+  <a href="https://uiable.com/components/input-group" title="Input Group"><kbd>Input Group</kbd></a>
+  <a href="https://uiable.com/components/input-otp" title="Input OTP"><kbd>Input OTP</kbd></a>
+  <a href="https://uiable.com/components/native-select" title="Native Select"><kbd>Native Select</kbd></a>
+  <a href="https://uiable.com/components/radio" title="Radio"><kbd>Radio</kbd></a>
+  <a href="https://uiable.com/components/radio-group" title="Radio Group"><kbd>Radio Group</kbd></a>
+  <a href="https://uiable.com/components/select" title="Select"><kbd>Select</kbd></a>
+  <a href="https://uiable.com/components/slider" title="Slider"><kbd>Slider</kbd></a>
+  <a href="https://uiable.com/components/switch" title="Switch"><kbd>Switch</kbd></a>
+  <a href="https://uiable.com/components/textarea" title="Textarea"><kbd>Textarea</kbd></a>
+  <a href="https://uiable.com/components/toggle" title="Toggle"><kbd>Toggle</kbd></a>
+  <a href="https://uiable.com/components/toggle-group" title="Toggle Group"><kbd>Toggle Group</kbd></a>
+</div>
 
 ### Data Display
 
-- `Avatar`
-- `Badge`
-- `Card`
-- `Carousel`
-- `Chart`
-- `Data Table`
-- `Empty State`
-- `Hover Card`
-- `KBD`
-- `Label`
-- `List Group`
-- `Table`
-- `Tooltip`
-- `Skeleton`
-- `Calendar`
+<div>
+  <a href="https://uiable.com/components/avatar" title="Avatar"><kbd>Avatar</kbd></a>
+  <a href="https://uiable.com/components/badge" title="Badge"><kbd>Badge</kbd></a>
+  <a href="https://uiable.com/components/card" title="Card"><kbd>Card</kbd></a>
+  <a href="https://uiable.com/components/carousel" title="Carousel"><kbd>Carousel</kbd></a>
+  <a href="https://uiable.com/components/chart" title="Chart"><kbd>Chart</kbd></a>
+  <a href="https://uiable.com/components/data-table" title="Data Table"><kbd>Data Table</kbd></a>
+  <a href="https://uiable.com/components/empty" title="Empty State"><kbd>Empty State</kbd></a>
+  <a href="https://uiable.com/components/hover-card" title="Hover Card"><kbd>Hover Card</kbd></a>
+  <a href="https://uiable.com/components/kbd" title="KBD"><kbd>KBD</kbd></a>
+  <a href="https://uiable.com/components/label" title="Label"><kbd>Label</kbd></a>
+  <a href="https://uiable.com/components/list-group" title="List Group"><kbd>List Group</kbd></a>
+  <a href="https://uiable.com/components/table" title="Table"><kbd>Table</kbd></a>
+  <a href="https://uiable.com/components/tooltip" title="Tooltip"><kbd>Tooltip</kbd></a>
+  <a href="https://uiable.com/components/skeleton" title="Skeleton"><kbd>Skeleton</kbd></a>
+  <a href="https://uiable.com/components/calendar" title="Calendar"><kbd>Calendar</kbd></a>
+</div>
 
 ### Feedback & Overlays
 
-- `Alert`
-- `Alert Dialog`
-- `Dialog`
-- `Drawer`
-- `Progress`
-- `Sheet`
-- `Sonner`
-- `Spinner`
+<div>
+  <a href="https://uiable.com/components/alert" title="Alert"><kbd>Alert</kbd></a>
+  <a href="https://uiable.com/components/alert-dialog" title="Alert Dialog"><kbd>Alert Dialog</kbd></a>
+  <a href="https://uiable.com/components/dialog" title="Dialog"><kbd>Dialog</kbd></a>
+  <a href="https://uiable.com/components/drawer" title="Drawer"><kbd>Drawer</kbd></a>
+  <a href="https://uiable.com/components/progress" title="Progress"><kbd>Progress</kbd></a>
+  <a href="https://uiable.com/components/sheet" title="Sheet"><kbd>Sheet</kbd></a>
+  <a href="https://uiable.com/components/sonner" title="Sonner"><kbd>Sonner</kbd></a>
+  <a href="https://uiable.com/components/spinner" title="Spinner"><kbd>Spinner</kbd></a>
+</div>
 
 ### Navigation
 
-- `Breadcrumb`
-- `Dropdown Menu`
-- `Menubar`
-- `Navbar`
-- `Navigation Menu`
-- `Pagination`
-- `Tabs`
-- `Sidebar`
+<div>
+  <a href="https://uiable.com/components/breadcrumb" title="Breadcrumb"><kbd>Breadcrumb</kbd></a>
+  <a href="https://uiable.com/components/dropdown-menu" title="Dropdown Menu"><kbd>Dropdown Menu</kbd></a>
+  <a href="https://uiable.com/components/menubar" title="Menubar"><kbd>Menubar</kbd></a>
+  <a href="https://uiable.com/components/navbar" title="Navbar"><kbd>Navbar</kbd></a>
+  <a href="https://uiable.com/components/navigation-menu" title="Navigation Menu"><kbd>Navigation Menu</kbd></a>
+  <a href="https://uiable.com/components/pagination" title="Pagination"><kbd>Pagination</kbd></a>
+  <a href="https://uiable.com/components/tabs" title="Tabs"><kbd>Tabs</kbd></a>
+  <a href="https://uiable.com/components/sidebar" title="Sidebar"><kbd>Sidebar</kbd></a>
+</div>
 
 ### Layout & Interaction
 
-- `Accordion`
-- `Collapsible`
-- `Context Menu`
-- `Item`
-- `Popover`
+<div>
+  <a href="https://uiable.com/components/accordion" title="Accordion"><kbd>Accordion</kbd></a>
+  <a href="https://uiable.com/components/collapsible" title="Collapsible"><kbd>Collapsible</kbd></a>
+  <a href="https://uiable.com/components/context-menu" title="Context Menu"><kbd>Context Menu</kbd></a>
+  <a href="https://uiable.com/components/item" title="Item"><kbd>Item</kbd></a>
+  <a href="https://uiable.com/components/popover" title="Popover"><kbd>Popover</kbd></a>
+</div>
 
-> Components are added based on practical frontend needs, not trend-driven requests. If you need something that isn't here, open a discussion or a PR.
+### Other Components
+
+<div>
+  <a href="https://uiable.com/components/aspect-ratio" title="Aspect Ratio"><kbd>Aspect Ratio</kbd></a>
+  <a href="https://uiable.com/components/attachment" title="Attachment"><kbd>Attachment</kbd></a>
+  <a href="https://uiable.com/components/bubble" title="Bubble"><kbd>Bubble</kbd></a>
+  <a href="https://uiable.com/components/command" title="Command"><kbd>Command</kbd></a>
+  <a href="https://uiable.com/components/empty" title="Empty"><kbd>Empty</kbd></a>
+  <a href="https://uiable.com/components/field" title="Field"><kbd>Field</kbd></a>
+  <a href="https://uiable.com/components/marker" title="Marker"><kbd>Marker</kbd></a>
+  <a href="https://uiable.com/components/message" title="Message"><kbd>Message</kbd></a>
+  <a href="https://uiable.com/components/message-scroller" title="Message Scroller"><kbd>Message Scroller</kbd></a>
+  <a href="https://uiable.com/components/resizable" title="Resizable"><kbd>Resizable</kbd></a>
+  <a href="https://uiable.com/components/scroll-area" title="Scroll Area"><kbd>Scroll Area</kbd></a>
+  <a href="https://uiable.com/components/separator" title="Separator"><kbd>Separator</kbd></a>
+  <a href="https://uiable.com/components/typography" title="Typography"><kbd>Typography</kbd></a>
+</div>
 
 ---
 
-## Installation
+## Blocks
+
+Pre-built page sections ready to drop into your project.
+
+### Contact
+
+<div>
+  <a href="https://uiable.com/blocks/contact" title="Contact 1"><kbd>Contact 1</kbd></a>
+</div>
+
+### Content
+
+<div>
+  <a href="https://uiable.com/blocks/content" title="Content 1"><kbd>Content 1</kbd></a>
+</div>
+
+### CTA
+
+<div>
+  <a href="https://uiable.com/blocks/cta" title="Call To Action 1"><kbd>Call To Action 1</kbd></a>
+  <a href="https://uiable.com/blocks/cta" title="Call To Action 2"><kbd>Call To Action 2</kbd></a>
+</div>
+
+### Faq
 
-Clone the repository from Github:
+<div>
+  <a href="https://uiable.com/blocks/faq" title="FAQ 1"><kbd>FAQ 1</kbd></a>
+</div>
+
+### Feature
+
+<div>
+  <a href="https://uiable.com/blocks/feature" title="Feature 1"><kbd>Feature 1</kbd></a>
+  <a href="https://uiable.com/blocks/feature" title="Feature 2"><kbd>Feature 2</kbd></a>
+</div>
+
+### Footer
+
+<div>
+  <a href="https://uiable.com/blocks/footer" title="Footer 1"><kbd>Footer 1</kbd></a>
+  <a href="https://uiable.com/blocks/footer" title="Footer 2"><kbd>Footer 2</kbd></a>
+  <a href="https://uiable.com/blocks/footer" title="Footer 3"><kbd>Footer 3</kbd></a>
+</div>
+
+### Gallery
+
+<div>
+  <a href="https://uiable.com/blocks/gallery" title="Gallery 1"><kbd>Gallery 1</kbd></a>
+  <a href="https://uiable.com/blocks/gallery" title="Gallery 2"><kbd>Gallery 2</kbd></a>
+  <a href="https://uiable.com/blocks/gallery" title="Gallery 3"><kbd>Gallery 3</kbd></a>
+  <a href="https://uiable.com/blocks/gallery" title="Gallery 4"><kbd>Gallery 4</kbd></a>
+</div>
 
-```bash
-git clone https://github.com/codedthemes/uiable.git
-```
+### Hero
 
-Navigate into the directory and install dependencies:
+<div>
+  <a href="https://uiable.com/blocks/hero" title="Hero 1"><kbd>Hero 1</kbd></a>
+  <a href="https://uiable.com/blocks/hero" title="Hero 2"><kbd>Hero 2</kbd></a>
+</div>
+
+### Portfolio
+
+<div>
+  <a href="https://uiable.com/blocks/portfolio" title="Portfolio 1"><kbd>Portfolio 1</kbd></a>
+  <a href="https://uiable.com/blocks/portfolio" title="Portfolio 2"><kbd>Portfolio 2</kbd></a>
+  <a href="https://uiable.com/blocks/portfolio" title="Portfolio 3"><kbd>Portfolio 3</kbd></a>
+  <a href="https://uiable.com/blocks/portfolio" title="Portfolio 4"><kbd>Portfolio 4</kbd></a>
+</div>
+
+### Landing
 
-```bash
-cd uiable
-npm install
-```
+<div>
+  <a href="https://uiable.com/blocks/landing" title="Landing Header"><kbd>Landing Header</kbd></a>
+  <a href="https://uiable.com/blocks/landing" title="Hero"><kbd>Hero</kbd></a>
+  <a href="https://uiable.com/blocks/landing" title="Component 1"><kbd>Component 1</kbd></a>
+  <a href="https://uiable.com/blocks/landing" title="Component 2"><kbd>Component 2</kbd></a>
+  <a href="https://uiable.com/blocks/landing" title="Feature"><kbd>Feature</kbd></a>
+  <a href="https://uiable.com/blocks/landing" title="Contact"><kbd>Contact</kbd></a>
+  <a href="https://uiable.com/blocks/landing" title="Footer"><kbd>Footer</kbd></a>
+</div>
+
+### Portfolio
 
-Start the Next.js development server:
+<div>
+  <a href="https://uiable.com/blocks/portfolio" title="Portfolio 1"><kbd>Portfolio 1</kbd></a>
+  <a href="https://uiable.com/blocks/portfolio" title="Portfolio 2"><kbd>Portfolio 2</kbd></a>
+  <a href="https://uiable.com/blocks/portfolio" title="Portfolio 3"><kbd>Portfolio 3</kbd></a>
+  <a href="https://uiable.com/blocks/portfolio" title="Portfolio 4"><kbd>Portfolio 4</kbd></a>
+</div>
 
-```bash
-npm run dev
-```
+<br />
+
+> Components are added based on practical frontend needs, not trend-driven requests. If you need something that isn't here, open a discussion or a PR.
 
 ---