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

Open a .tsx or .jsx file
Start typing a snippet prefix like heroui- (e.g. heroui-button, heroui-modal)
Select the desired snippet from the IntelliSense popup
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

HeroSnips

DevNinja42