HeroSnips 🧩

⚠️ Disclaimer: This extension is not affiliated with HeroUI or the creators of heroui.com. It is a community-built tool to enhance productivity when working with the HeroUI React component library.

---

HeroSnips is a snippet extension for HeroUI – your go-to UI library for building stunning React + Tailwind UIs. This extension provides ready-to-use JSX snippets for all HeroUI components, helping you build faster and more consistently.

---

🚀 Features

• 🧱 Quickly insert HeroUI components like <Button />, <Card />, <Tabs />, etc.
• ⚡ Works with TypeScript React (.tsx) and JavaScript React (.jsx)
• 🎯 Snippets follow HeroUI best practices and support Tailwind utility classes
• 🛠️ Ideal for prototyping, production UI, and design systems using HeroUI

---

✨ Supported Components

✅ Includes snippets for:

• Layout: Card, Stack, Spacer, Divider, Grid
• Forms: Input, Textarea, Checkbox, Select, Date Picker, Time Input
• UI Controls: Button, Dropdown, Modal, Drawer, Switch, Tabs, Tooltip
• Feedback: Toast, Spinner, Skeleton, Alert, Progress
• Display: Avatar, Badge, Breadcrumbs, Code, Listbox, Table, User
• Navigation: Navbar, Pagination, Link
• And more...

Full coverage of https://www.heroui.com/docs/components

---

🧠 Usage

1. Open a .tsx or .jsx file
2. Start typing a snippet prefix like heroui- (e.g. heroui-button, heroui-modal)
3. Select the desired snippet from the IntelliSense popup
4. Customize the values as needed and enjoy fast UI building!

---

📦 Installation

Install from the VS Code Marketplace:

GUI method

• Open VS Code
• Go to Extensions (⇧⌘X / Ctrl+Shift+X)
• Search for HeroSnips
• Click Install

CLI method

code --install-extension devninja42.herosnips

✅ Published by devninja42

💡 Example Snippet

Typing heroui-card expands to:

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Optional description goes here</CardDescription>
  </CardHeader>
  <CardBody>Your content here</CardBody>
</Card>

🔧 Requirements

• Visual Studio Code version 1.101.0 or newer
• A project using React and Tailwind CSS
• HeroUI installed in your project:

npm install @heroui/react

• (Optional) If you're using date/time inputs:

npm install @internationalized/date

🙌 Contributing

Have ideas for improvement, or missing components? Pull requests and issues are welcome!

Feel free to:

• Request new snippets
• Submit fixes for existing ones
• Contribute documentation

Repo: https://github.com/ferouk/herosnips

🧑‍🎨 Author

Made with ❤️ by devninja42 Built for fast HeroUI-based development.

🪪 License

MIT License