React Components Snippet Extension
- Beautifully designed components (login, signup, profile, dashboard card, pricing, testimonial, settings panel, navbar, modal, notification, hero) with the `rc-beauty-` prefix
- Alternative styles for all beautifully designed components with the `rc-beauty-alt-` prefix
Features
- 🚀 Quickly insert React + Tailwind CSS code for:
- Navigation bars (various layouts)
- Hero sections (multiple styles)
- Sidebars
- Footers
- Layouts (2/3 column, grid, sidebar, header-sidebar)
- Cards (simple, with badge)
- Forms (login, with checkbox)
- Search bars
- Avatars, buttons, alerts
- Modals, tabs, accordions, dropdowns
- Toast notifications
- Progress bars, loaders/spinners
- Breadcrumbs, pagination
- Tooltips, steppers, rating stars
- Timeline, file upload, date picker
- Cart panel, dashboard analytics
- Website templates: portfolio (now with Skills & Testimonials), ecommerce (now with Categories & Cart Sidebar), blog (now with Categories sidebar)
- Social templates: Chat Screen, Social Media Feed
- All snippets are responsive and use Tailwind utility classes
- Placeholders and comments for easy customization
- Command to check for Tailwind CSS and install/configure it automatically for React, Next.js, and TypeScript projects.
Requirements
- React project (JSX/TSX)
- Tailwind CSS installed and configured in your project
Usage
- Install this extension in VS Code.
- To check and install Tailwind CSS, open the Command Palette (
Ctrl+Shift+P or Cmd+Shift+P) and run:
React UI Snippets: Check & Install Tailwind CSS- The extension will detect your project type and install/configure Tailwind CSS if needed.
- Open a React component file (
.jsx, .tsx, etc.).
- Type a snippet prefix (see list below) and select the snippet from IntelliSense.
- Customize the placeholder content as needed.
Snippet Prefixes
| Component |
Prefix |
| Navbar (logo left) |
rc-navbar-logo-left |
| Navbar (logo center) |
rc-navbar-logo-center |
| Hero (centered) |
rc-hero-centered |
| Hero (split bg) |
rc-hero-split-bg |
| Sidebar |
rc-sidebar-simple |
| Footer |
rc-footer-centered |
| Layout (2 col) |
rc-layout-2col |
| Layout (3 col) |
rc-layout-3col |
| Layout (sidebar + content) |
rc-layout-sidebar-content |
| Layout (header + sidebar + main) |
rc-layout-header-sidebar-content |
| Card (simple) |
rc-card-simple |
| Card (with badge) |
rc-card-badge |
| Form (simple) |
rc-form-simple |
| Form (with checkbox) |
rc-form-checkbox |
| Search bar |
rc-search-bar |
| Avatar |
rc-avatar-circle |
| Button |
rc-button-primary |
| Alert |
rc-alert-info |
| Modal |
rc-modal-simple |
| Tabs |
rc-tabs-basic |
| Accordion |
rc-accordion-simple |
| Dropdown |
rc-dropdown-simple |
| Toast |
rc-toast-notification |
| Progress bar |
rc-progress-bar |
| Loader/spinner |
rc-loader-spinner |
| Breadcrumbs |
rc-breadcrumbs-simple |
| Pagination |
rc-pagination-simple |
| Tooltip |
rc-tooltip-simple |
| Stepper |
rc-stepper-horizontal |
| Rating |
rc-rating-stars |
| Timeline |
rc-timeline-vertical |
| File upload |
rc-file-upload-simple |
| Date picker |
rc-date-picker-simple |
| Cart (panel) |
rc-cart-panel |
| Dashboard (analytics) |
rc-dashboard-analytics |
| Portfolio website template |
rc-template-portfolio |
| Ecommerce website template |
rc-template-ecommerce |
| Blog website template |
rc-template-blog |
| Chat screen template |
rc-template-chat |
| Social media feed template |
rc-template-social-feed |
| Beautiful Login |
rc-beauty-login / rc-beauty-alt-login |
| Beautiful Signup |
rc-beauty-signup / rc-beauty-alt-signup |
| Beautiful Profile |
rc-beauty-profile / rc-beauty-alt-profile |
| Beautiful Dashboard Card |
rc-beauty-dashboard-card / rc-beauty-alt-dashboard-card |
| Beautiful Pricing |
rc-beauty-pricing / rc-beauty-alt-pricing |
| Beautiful Testimonial |
rc-beauty-testimonial / rc-beauty-alt-testimonial |
| Beautiful Settings Panel |
rc-beauty-settings / rc-beauty-alt-settings |
| Beautiful Navbar |
rc-beauty-navbar / rc-beauty-alt-navbar |
| Beautiful Modal |
rc-beauty-modal / rc-beauty-alt-modal |
| Beautiful Notification/Toast |
rc-beauty-notification / rc-beauty-alt-notification |
| Beautiful Hero Section |
rc-beauty-hero / rc-beauty-alt-hero |
Example
Type rc-navbar-logo-left in a React file and select the snippet to insert a responsive navbar with logo left, links center, and buttons right.
Type rc-beauty-login or rc-beauty-alt-login for two visually distinct beautiful login forms. The same applies for all other beautifully designed components (see table above for all prefixes).
Type rc-template-portfolio to scaffold a portfolio website layout (now with Skills and Testimonials), rc-template-ecommerce for an ecommerce site (now with Categories and Cart Sidebar), or rc-template-blog for a blog layout (now with Categories sidebar).
Type rc-template-chat for a chat screen, or rc-template-social-feed for a social media feed template.
Known Issues
- Snippets assume Tailwind CSS is set up in your project.
- Some interactive components (modals, tabs, accordions) are static and may require additional JS/React logic for full functionality.
Release Notes
2025-09-01
- Improved: Portfolio template now includes Skills and Testimonials sections.
- Improved: Ecommerce template now includes Categories and a responsive Cart Sidebar.
- Improved: Blog template now includes a Categories sidebar.
- Added: Social templates — Chat Screen (
rc-template-chat) and Social Media Feed (rc-template-social-feed).
1.0.0
- Initial release: Includes a comprehensive set of React + Tailwind CSS UI component snippets.
- All snippet prefixes now begin with
rc- for consistency.
- Added cart, dashboard, and additional layout components.
- Added barebones portfolio, ecommerce, and blog website template snippets.
Unreleased
- Added command to check for Tailwind CSS and install/configure it automatically for React, Next.js, and TypeScript projects.
Enjoy building beautiful UIs faster!
| |
