DEV Community

Cover image for TailGrids: Pre-Built Tailwind Components for Web Apps
jQueryScript
jQueryScript

Posted on

TailGrids: Pre-Built Tailwind Components for Web Apps

TailGrids: a Tailwind CSS component library that installs as an npm plugin and gives you 600+ pre-built UI components for HTML, React, and Vue.

The setup hooks into your existing Tailwind compilation process, so you import the plugin directive in your CSS, run the build command, and start copying markup directly into your files.

It covers core UI components, application blocks, marketing sections, e-commerce layouts, and dashboard elements.

Worth checking out if you want to skip writing repetitive component markup and focus on building features instead.

Core Components

Alerts (11), List Styles (9), Tabs (11), Accordions (5), Form Elements (4), Paginations (6), Buttons (33), Badges (9), Breadcrumbs (12), Progress Bars (4), Checkbox (5), Toast (8), Avatars (12), Toggle and Switch (13), Button Group (3), Dropdown Buttons (4), Tooltips (3), Page Titles (5), Gallery (5), Mega Menus (3), Verification Code Input (4), Sticky Bars (4), Spinners (4), Skeleton (3), Account Dropdown (4), Clipboards (4), Date Picker (4), Time Picker (1).

Application UI Blocks

Error Pages (8), Tables (12), Navbars (8), Auth/Sign In/Up (8), Cookies (4), Table Grids (4), Contacts (14), Footers (7), Cards (16), Blogs (10), Modals (11).

Marketing UI Blocks

Headers & Hero Area (13), Videos (3), Call To Actions (10), Teams (8), Pricing Tables (11), Stats (5), Features & Services (11), Portfolios (7), Testimonials (6), About (13), Brands (8), Newsletter Forms (2).

E-Commerce Blocks

E-Commerce Headers (5), Customer Reviews (5), Featured Products (5), Product Details (5), Checkouts (5), E-Commerce Footers (5), Order Summaries (4), Quick Views (4), Product Grids (9), E-Commerce Navbars (5), Recent Products (5), Product Categories (5), Product Carousels (5), Filters (5), Shopping Carts (4), Wishlists (3), Promo Banner (1).

Dashboard Blocks

Maps (4), Profiles (5), Table Stacks (5), Drawers (2), Dashboard Dropdowns (3), Data Stats (10), Chat Boxes (4), Steps (8), Settings Pages (2), Charts (10), Chat List (3), Popovers (6), Calendars (4), Vertical Navbars (7), Select Box (4), Horizontal Menus (6).

AI Components

AI Navbars (4), AI Hero (6), Prompt to Text Generator (2), Image Generators (4), Code Generators (2), Video Generators.

πŸ‘‰ https://next.jqueryscript.net/tailwind-css/components-html-react-vue-tailgrids/

πŸ‘‰ GitHub Repo

πŸ‘‰ Browse All Components

Top comments (0)