HeroUI Figma Kit (Community)

UI 工具 · 2,811 likes

Official HeroUI Figma UI Kit 🚀 (Previously NextUI) Introducing the official HeroUI (Community) Figma UI Kit 🚀, a work-in-progress resource designed to empower your design process with HeroUI's components. Changelog January 16th Update: NextUI is now HeroUI 🔥, check it out here https://www.heroui.com/blog/introducing-heroui December 6th Update: •New Components Added: •Alert: Simplified alert messages for system feedback. •Slider: Enhanced for smoother user input from a range of values. •InputOTP (In Progress): field for entering one-time passwords, with seamless navigation for smooth authentication. •File Enhancements: Overall file structure refined for better usability. •Dark Mode & Styles: Improved dark mode consistency and styling for better accessibility and visual appeal. August 13th Update: •Input: To gather user inputs. •Slider: For selecting from a range of values. •Accordion: For collapsible content panels. •Select: For making single or multiple selections from a list. •Table: For organizing and displaying tabular data. •Divider: improved playground •CheckboxGroup: Improved variant controls •Overall: Improved controls options, with added consistency on the order of component controls [variant, color, size, radius], and the standard order of the values [e.g default / primary / secondary / success / warning / danger] July 13th Update: •Accordion: New component for managing large content areas, making it easy to toggle visibility of sections. •Table (Beta): Initial version for organizing and displaying tabular data efficiently. •Slider (Beta): Early release for selecting a value or range within a predefined spectrum. •Divider: Simple component for visually separating content areas. •Avatar: Design and functionality enhancements. •AvatarGroup: Updated design for better representation of multiple users. •Badge: Refinements for displaying statuses, notifications, or tags more effectively. •Button: Improved design for better interaction and visual consistency. •ButtonGroup: Enhanced design for better alignment and usability. •Switch: Updated design for smoother toggling between binary states. •Tabs: Enhanced for better navigation and content organization. July 13th Update: •Accordion: New component for managing large content areas, making it easy to toggle visibility of sections. •Table (Beta): Initial version for organizing and displaying tabular data efficiently. •Slider (Beta): Early release for selecting a value or range within a predefined spectrum. •Divider: Simple component for visually separating content areas. •Avatar: Design and functionality enhancements. •AvatarGroup: Updated design for better representation of multiple users. •Badge: Refinements for displaying statuses, notifications, or tags more effectively. •Button: Improved design for better interaction and visual consistency. •ButtonGroup: Enhanced design for better alignment and usability. •Switch: Updated design for smoother toggling between binary states. •Tabs: Enhanced for better navigation and content organization. July 5th Update: •Spinner: New component with playground available. •Button: Spinner updated. •Button Group: Button with spinner updated. •Checkbox: Styles fixed. •Checkbox Group: Checkbox items updated. July 2nd Update: •Flat variants improved • Button design fixed • Button Group design fixed • Chip design improved • Review and align component properties. • Badge design [quick update]. June 25th Update: •Tabs: Enhancing user navigation and organization of content. •Progress: For displaying the progress of a task or activity. •Tooltip: For providing additional information on hover or focus. •Switch: For toggling between binary states. What's Done: Figma Variables: Implemented for colors and layout tokens, providing consistency across your designs. Dark Mode Support: Now, effortlessly design for both light and dark themes. Components:Button / ButtonGroup: Versatile buttons for various use cases. Chip: Small blocks to represent an input, attribute, or action. Code: Specifically designed for displaying code snippets. Link: Perfect for navigational cues. Radio / RadioGroup: Ideal for representing a group of related options. Avatar: For representing users or entities. Checkbox: Ideal for toggling a setting on or off. CheckboxGroup: Ideal for managing a group of checkboxes. User: For detailed user profiles and interactive elements. Badge: For displaying status, notifications, or tags. • Tabs: Enhancing user navigation and organization of content. • Progress: For displaying the progress of a task or activity. • Tooltip: For providing additional information on hover or focus. • Switch: For toggling between binary states. • Input (Newly Added): To gather user inputs. • Slider (Newly Added): For selecting from a range of values. • Accordion (Newly Added): For collapsible content panels. • Select (Newly Added): For making single or multiple selections from a list. • Table (Newly Added): For organizing and displaying tabular data. In Progress: Card: Perfect for displaying a variety of content with an optional action. We're hard at work to make sure the rest of the components get done. This Figma Community File is a living project. As we continue to grow and improve NextUI, we'll be expanding and refining this Figma file. Start exploring today and elevate your designs with the building blocks of NextUI!

Open in Figma

Related resources