Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mosaicra-ui/mosaicra-ui

Modern UI library built to streamline the development
https://github.com/mosaicra-ui/mosaicra-ui

bootstrap code css design designsystem django flask hacktoberfest hacktoberfest-accepted hacktoberfest-approved hacktoberfest2024 html js mosaicra mosaicra-ui nextjs reactjs tailwindcss ui-libray vuejs

Last synced: 2 months ago
JSON representation

Modern UI library built to streamline the development

Awesome Lists containing this project

README 

        
# Mosaicra UI Library



**Mosaicra UI** is a versatile, modern UI library built to streamline the development of sleek, responsive, and user-friendly interfaces. With a collection of highly customizable components, Mosaicra UI empowers developers to create visually stunning and functional UIs using **HTML**, **CSS**, and **Tailwind CSS**.



Whether you need basic buttons or complex modals, Mosaicra UI has you covered with a wide range of components to enhance your project's interactivity and aesthetic appeal.



---



## 📚 **Components Overview**



### 1. **Buttons**



- **Primary Buttons**: Standard buttons for primary actions.

- **Secondary Buttons**: Supporting actions or alternative choices.

- **Icon Buttons**: Buttons with embedded icons for visual clarity.

- **Floating Action Buttons**: Circular buttons for emphasized actions.



### 2. **Forms**



- **Input Fields**: Standard text input fields.

- **Checkboxes**: For binary selections.

- **Radio Buttons**: Choose one option from multiple.

- **Dropdowns**: Compact selection menus.

- **Toggles/Switches**: On/Off state toggles.



### 3. **Navigation**



- **Menus**: Vertical and horizontal menu layouts.

- **Tabs**: Tabbed content navigation.

- **Breadcrumbs**: Hierarchical navigation indicators.

- **Sidebars**: Collapsible side navigation.

- **Pagination**: Numeric page navigation components.



### 4. **Typography**



- **Headings**: Semantic and styled heading tags.

- **Paragraphs**: Standard text blocks for readability.

- **Blockquotes**: Stylized text blocks for quoting content.

- **Lists**: Ordered and unordered list elements.



### 5. **Modals**



- **Dialog Boxes**: Pop-up interaction windows.

- **Pop-ups**: Temporary overlay windows for user prompts.

- **Overlays**: Background overlays for focused interaction.



### 6. **Tables**



- **Data Tables**: Display and organize tabular data.

- **Sortable Tables**: Sortable data columns for improved usability.

- **Paginated Tables**: Split data into multiple pages for easy navigation.



### 7. **Cards**



- **Information Cards**: Compact blocks for quick data display.

- **Profile Cards**: Cards showcasing user profiles or personas.

- **Product Cards**: Display product details in a neat format.



### 8. **Notifications**



- **Alerts**: Banner notifications for warnings, info, and success messages.

- **Toast Messages**: Small pop-up messages for quick feedback.

- **Snackbars**: Low-profile notifications that disappear after a timeout.



### 9. **Icons**



- **SVG Icons**: Scalable vector icons for sharp display on all screens.

- **Font Icons**: Icons implemented through web fonts.



### 10. **Media**



- **Image Galleries**: Dynamic image display with lightbox effects.

- **Video Players**: Customizable video player components.

- **Audio Players**: Simple and interactive audio controls.



### 11. **Charts**



- **Line Charts**: Plot continuous data trends.

- **Bar Charts**: Visualize categorical data with bars.

- **Pie Charts**: Display data proportions with a circular graph.

- **Scatter Plots**: Graphs for showing relationships between two variables.



### 12. **Loaders**



- **Spinners**: Visual indicators for loading processes.

- **Progress Bars**: Horizontal bars indicating progress percentage.

- **Skeleton Screens**: Placeholder animations for loading content.



### 13. **Grid and Layout**



- **Grid Systems**: Responsive grid layouts for structured content.

- **Flexbox Layouts**: Flexible box models for dynamic layouts.

- **Container Components**: Wrapping components for consistent layout spacing.



### 14. **Accessibility**



- **Screen Reader Text**: Text content specifically for screen readers.

- **Focus Indicators**: Visual cues for focused elements.

- **Keyboard Navigation**: Components optimized for keyboard interaction.



---



## 🚀 **Getting Started**



To start using **Mosaicra UI** components, visit the GitHub repository for installation and usage details. Whether you’re developing a new project or improving an existing one, Mosaicra UI provides you with the building blocks to create powerful and beautiful UIs.



---



**Mosaicra UI** simplifies complex UI tasks, so you can focus on building extraordinary web and mobile applications. Happy coding! 🎨💻