# Mavka Design System

- [Introduction](https://mds.stepanu.com/documentation/introduction.md): Mavka is a premier ecosystem of production-ready React components built with Tailwind CSS and React Aria.
- [Installation](https://mds.stepanu.com/documentation/installation.md): Step-by-step guide to installing Mavka in your project.
- [Theming](https://mds.stepanu.com/documentation/theming.md): Learn how to customize and extend the Mavka theme to match your brand identity.
- [Dark Mode](https://mds.stepanu.com/documentation/dark-mode.md): Implement and configure dark mode support across all Mavka components.
- [Typography](https://mds.stepanu.com/documentation/typography.md): Typography scales, font families, and text styling guidelines for Mavka.
- [CLI](https://mds.stepanu.com/documentation/cli.md): Use the Mavka CLI to scaffold components, generate tokens, and automate workflows.
- [Icons](https://mds.stepanu.com/documentation/icons.md): Browse and integrate the Mavka icon set into your application.
- [Integrations](https://mds.stepanu.com/documentation/integrations.md): Integrate Mavka with popular frameworks, tools, and design platforms.
- [Figma Files](https://mds.stepanu.com/resources/figma-files.md): Download and use the official Mavka Figma design files and libraries.
- [Icons](https://mds.stepanu.com/resources/icons.md): A comprehensive collection of icons available in the Mavka Design System.
- [File Icons](https://mds.stepanu.com/resources/file-icons.md): File type icons for documents, media, code, and other file formats.
- [Flag Icons](https://mds.stepanu.com/resources/flag-icons.md): Country and region flag icons for internationalization and localization.
- [Avatars](https://mds.stepanu.com/resources/avatars.md): Pre-built avatar assets and placeholder images for user profiles.
- [Logos](https://mds.stepanu.com/resources/logos.md): Official Mavka brand logos, usage guidelines, and downloadable assets.
- [Overview](https://mds.stepanu.com/base-components/overview.md): Mavka UI React is the world’s largest collection of open-source React components built with Tailwind CSS and React Aria.
- [Featured Icons](https://mds.stepanu.com/base-components/featured-icons.md): Highlighted icon components with enhanced visual treatments and sizes.
- [Illustrations](https://mds.stepanu.com/base-components/illustrations.md): Decorative illustration components for empty states, onboarding, and branding.
- [Button](https://mds.stepanu.com/base-components/buttons.md): High-performance, accessible React button components built for modern applications and websites. These buttons are built using React Aria and styled with Tailwind CSS.
- [Social Buttons](https://mds.stepanu.com/base-components/social-buttons.md): High-performance, accessible React social button components built for modern applications and websites. These components are built using React Aria and styled with Tailwind CSS.
- [Mobile App Store Buttons](https://mds.stepanu.com/base-components/mobile-app-store-buttons.md): High-performance, accessible React mobile app store button components built for modern applications and websites. These components are built using React Aria and styled with Tailwind CSS.
- [Utility Buttons](https://mds.stepanu.com/base-components/utility-buttons.md): High-performance, accessible React utility button components built for modern applications and websites. These components are built using React Aria and styled with Tailwind CSS.
- [Button Group](https://mds.stepanu.com/base-components/button-groups.md): High-performance, accessible React button group components built for modern applications and websites. These components are built using React Aria and styled with Tailwind CSS.
- [Badges](https://mds.stepanu.com/base-components/badges.md): Status indicators and labels to highlight states, counts, and categories.
- [Badge Groups](https://mds.stepanu.com/base-components/badge-groups.md): Collections of badges arranged together for multi-status displays.
- [Tags](https://mds.stepanu.com/base-components/tags.md): Compact elements for labeling, categorizing, and filtering content.
- [Rating badge and stars](https://mds.stepanu.com/base-components/rating-badge-and-stars.md): Display user ratings or scores using stars and badge indicators.
- [Dropdowns](https://mds.stepanu.com/base-components/dropdowns.md): Expandable menu components for displaying a list of options and actions.
- [Select](https://mds.stepanu.com/base-components/select.md): Form select components for choosing from predefined option lists.
- [Inputs](https://mds.stepanu.com/base-components/inputs.md): Text input fields with validation, icons, and various states.
- [Textarea](https://mds.stepanu.com/base-components/textarea.md): Multi-line text input components for longer form content.
- [Verification Code Inputs](https://mds.stepanu.com/base-components/verification-code-inputs.md): Segmented input fields for OTP, PIN, and verification code entry.
- [Text Editors](https://mds.stepanu.com/base-components/text-editors.md): Rich text editing components with formatting toolbars and markdown support.
- [Toggles](https://mds.stepanu.com/base-components/toggles.md): Switch components for toggling between two states like on and off.
- [Checkboxes](https://mds.stepanu.com/base-components/checkboxes.md): Checkbox components for selecting one or more options from a set.
- [Radio Buttons](https://mds.stepanu.com/base-components/radio-buttons.md): Radio button components for selecting a single option from a group.
- [Radio Groups](https://mds.stepanu.com/base-components/radio-groups.md): Grouped radio buttons for organized single-selection choices.
- [Avatars](https://mds.stepanu.com/base-components/avatars.md): User avatar components with image, initials, and status indicator support.
- [Tooltips](https://mds.stepanu.com/base-components/tooltips.md): Contextual information popups triggered by hover or focus interactions.
- [Progress Indicators](https://mds.stepanu.com/base-components/progress-indicators.md): Visual indicators for task completion, loading states, and progress tracking.
- [Sliders](https://mds.stepanu.com/base-components/sliders.md): Range input components for selecting values within a defined range.
- [Video Players](https://mds.stepanu.com/base-components/video-players.md): Embedded video player components with playback controls and customization.
- [Credit Cards](https://mds.stepanu.com/base-components/credit-cards.md): Visual credit card components for payment forms and wallet displays.
- [QR Codes](https://mds.stepanu.com/base-components/qr-codes.md): QR code generator and display components for links and data encoding.
- [Overview](https://mds.stepanu.com/app-ui-components/overview.md): Mavka UI React is the world’s largest collection of open-source React components built with Tailwind CSS and React Aria.
- [Page Headers](https://mds.stepanu.com/app-ui-components/page-headers.md): Full-width page header components with titles, breadcrumbs, and actions.
- [Card Headers](https://mds.stepanu.com/app-ui-components/card-headers.md): Header sections for card components with titles, subtitles, and controls.
- [Section Headers](https://mds.stepanu.com/app-ui-components/section-headers.md): Headers for content sections with titles, descriptions, and action buttons.
- [Section Footers](https://mds.stepanu.com/app-ui-components/section-footers.md): Footer areas for sections with supplementary actions and information.
- [Sidebar Navigations](https://mds.stepanu.com/app-ui-components/sidebar-navigations.md): Vertical navigation components for application sidebars and panels.
- [Header Navigations](https://mds.stepanu.com/app-ui-components/header-navigations.md): Horizontal navigation bars for application headers and top bars.
- [Breadcrumbs](https://mds.stepanu.com/app-ui-components/breadcrumbs.md): Breadcrumb navigation components for showing hierarchical page location.
- [Tabs](https://mds.stepanu.com/app-ui-components/tabs.md): Tab navigation components for switching between content panels.
- [Modals](https://mds.stepanu.com/app-ui-components/modals.md): Dialog and modal components for focused user interactions and confirmations.
- [Command Menus](https://mds.stepanu.com/app-ui-components/command-menus.md): Keyboard-driven command palette components for quick navigation and actions.
- [Slideout Menus](https://mds.stepanu.com/app-ui-components/slideout-menus.md): Slide-in panel components for secondary navigation and detail views.
- [Line & Bar Charts](https://mds.stepanu.com/app-ui-components/line-bar-charts.md): Data visualization components for line charts and bar charts.
- [Activity Gauges](https://mds.stepanu.com/app-ui-components/activity-gauges.md): Circular and linear gauge components for displaying activity and metrics.
- [Pie Charts](https://mds.stepanu.com/app-ui-components/pie-charts.md): Pie and donut chart components for proportional data visualization.
- [Radar Charts](https://mds.stepanu.com/app-ui-components/radar-charts.md): Radar and spider chart components for multi-dimensional data comparison.
- [Metrics](https://mds.stepanu.com/app-ui-components/metrics.md): Metric display components for KPIs, stats, and numerical highlights.
- [Tables](https://mds.stepanu.com/app-ui-components/tables.md): Data table components with sorting, filtering, and pagination support.
- [Carousels](https://mds.stepanu.com/app-ui-components/carousels.md): Swipeable carousel components for showcasing content in a horizontal scroll.
- [Paginations](https://mds.stepanu.com/app-ui-components/paginations.md): Page navigation components for browsing through large data sets.
- [Progress Steps](https://mds.stepanu.com/app-ui-components/progress-steps.md): Multi-step progress indicators for wizards and onboarding flows.
- [Activity Feeds](https://mds.stepanu.com/app-ui-components/activity-feeds.md): Timeline and feed components for displaying sequential activities and events.
- [Messaging](https://mds.stepanu.com/app-ui-components/messaging.md): Chat and messaging UI components for real-time communication interfaces.
- [Inline CTAs](https://mds.stepanu.com/app-ui-components/inline-ctas.md): Inline call-to-action components for contextual prompts within content.
- [Content Dividers](https://mds.stepanu.com/app-ui-components/content-dividers.md): Visual separator components for dividing sections of content.
- [Code Snippets](https://mds.stepanu.com/app-ui-components/code-snippets.md): Syntax-highlighted code display components with copy functionality.
- [Alerts](https://mds.stepanu.com/app-ui-components/alerts.md): Alert banner components for success, warning, error, and info messages.
- [Notifications](https://mds.stepanu.com/app-ui-components/notifications.md): Toast and notification components for real-time system and user alerts.
- [Loading Indicators](https://mds.stepanu.com/app-ui-components/loading-indicators.md): Spinner, skeleton, and progress bar components for loading states.
- [Empty States](https://mds.stepanu.com/app-ui-components/empty-states.md): Placeholder components for screens with no content or data.
- [Date Pickers](https://mds.stepanu.com/app-ui-components/date-pickers.md): Calendar-based date and time selection components.
- [Calendars](https://mds.stepanu.com/app-ui-components/calendars.md): Full calendar view components for scheduling and event display.
- [File Uploaders](https://mds.stepanu.com/app-ui-components/file-uploaders.md): Drag-and-drop and button-based file upload components.
- [Overview](https://mds.stepanu.com/app-ui-examples/overview.md): Mavka UI React is the world’s largest collection of open-source React components built with Tailwind CSS and React Aria.
- [Dashboards 01](https://mds.stepanu.com/app-ui-examples/dashboards-01.md): A complete dashboard layout example with metrics, charts, and data tables.
- [Dashboards 02](https://mds.stepanu.com/app-ui-examples/dashboards-02.md): An alternative dashboard layout with activity feeds and progress tracking.
- [Settings Pages 01](https://mds.stepanu.com/app-ui-examples/settings-pages-01.md): A settings page example with profile editing, preferences, and toggles.
- [Settings Pages 02](https://mds.stepanu.com/app-ui-examples/settings-pages-02.md): An advanced settings page layout with sections, tabs, and confirmation dialogs.
- [Informational Pages 01](https://mds.stepanu.com/app-ui-examples/informational-pages-01.md): An informational page example with rich text content and media.
- [Informational Pages 02](https://mds.stepanu.com/app-ui-examples/informational-pages-02.md): An alternative informational layout with sidebars and table of contents.
- [Overview](https://mds.stepanu.com/shared-page-examples/overview.md): Mavka UI React is the world’s largest collection of open-source React components built with Tailwind CSS and React Aria.
- [Log In Pages](https://mds.stepanu.com/shared-page-examples/log-in-pages.md): Authentication login page examples with various form layouts.
- [Sign Up Pages](https://mds.stepanu.com/shared-page-examples/sign-up-pages.md): User registration page examples with form validation and social sign-up.
- [Verification Pages](https://mds.stepanu.com/shared-page-examples/verification-pages.md): Email and phone verification page examples with code input fields.
- [Forgot Password Pages](https://mds.stepanu.com/shared-page-examples/forgot-password-pages.md): Password recovery flow pages with email input and reset confirmation.
- [404 Pages](https://mds.stepanu.com/shared-page-examples/404-pages.md): Custom error page examples for handling missing or unavailable content.
- [Email Templates](https://mds.stepanu.com/shared-page-examples/email-templates.md): Responsive email template examples for transactional and marketing emails.
- [Overview](https://mds.stepanu.com/marketing-components/overview.md): Mavka UI React is the world’s largest collection of open-source React components built with Tailwind CSS and React Aria.
- [Header Navigations](https://mds.stepanu.com/marketing-components/header-navigations.md): Marketing site navigation headers with menus, CTAs, and branding.
- [Header Sections](https://mds.stepanu.com/marketing-components/header-sections.md): Hero and header sections for marketing landing pages.
- [Footers](https://mds.stepanu.com/marketing-components/footers.md): Marketing site footer components with links, socials, and branding.
- [Banners](https://mds.stepanu.com/marketing-components/banners.md): Promotional and announcement banner components for page tops.
- [Features Sections](https://mds.stepanu.com/marketing-components/features-sections.md): Feature showcase sections with icons, descriptions, and visual layouts.
- [Pricing Sections](https://mds.stepanu.com/marketing-components/pricing-sections.md): Pricing table and plan comparison sections for SaaS and product pages.
- [CTA Sections](https://mds.stepanu.com/marketing-components/cta-sections.md): Call-to-action sections designed to drive user conversions.
- [Metrics Sections](https://mds.stepanu.com/marketing-components/metrics-sections.md): Statistics and metrics display sections for social proof and impact.
- [Newsletter CTA Sections](https://mds.stepanu.com/marketing-components/newsletter-cta-sections.md): Email subscription and newsletter signup sections.
- [Testimonial Sections](https://mds.stepanu.com/marketing-components/testimonial-sections.md): Customer testimonial and review sections with quotes and avatars.
- [Social Proof Sections](https://mds.stepanu.com/marketing-components/social-proof-sections.md): Logo walls, client lists, and trust badge sections.
- [Blog Sections](https://mds.stepanu.com/marketing-components/blog-sections.md): Blog post listing and featured article sections.
- [Content & Rich Text Sections](https://mds.stepanu.com/marketing-components/content-rich-text-sections.md): Long-form content sections with rich typography and media.
- [Contact Sections](https://mds.stepanu.com/marketing-components/contact-sections.md): Contact form and information sections with maps and details.
- [Team Sections](https://mds.stepanu.com/marketing-components/team-sections.md): Team member display sections with photos, roles, and bios.
- [Careers Sections](https://mds.stepanu.com/marketing-components/careers-sections.md): Job listing and careers page sections with filters and descriptions.
- [FAQ Sections](https://mds.stepanu.com/marketing-components/faq-sections.md): Frequently asked questions sections with expandable accordions.
- [Overview](https://mds.stepanu.com/marketing-examples/overview.md): Mavka UI React is the world’s largest collection of open-source React components built with Tailwind CSS and React Aria.
- [Landing Pages](https://mds.stepanu.com/marketing-examples/landing-pages.md): Full landing page examples with hero sections, features, and CTAs.
- [Pricing Pages](https://mds.stepanu.com/marketing-examples/pricing-pages.md): Complete pricing page examples with plan comparisons and FAQs.
- [Blogs](https://mds.stepanu.com/marketing-examples/blogs.md): Blog listing page examples with categories, search, and featured posts.
- [Blog Posts](https://mds.stepanu.com/marketing-examples/blog-posts.md): Individual blog post page examples with rich content and sharing.
- [About Pages](https://mds.stepanu.com/marketing-examples/about-pages.md): Company about page examples with team, mission, and history sections.
- [Contact Pages](https://mds.stepanu.com/marketing-examples/contact-pages.md): Contact page examples with forms, maps, and office information.
- [Team Pages](https://mds.stepanu.com/marketing-examples/team-pages.md): Dedicated team page examples showcasing members and departments.
- [Legal Pages](https://mds.stepanu.com/marketing-examples/legal-pages.md): Privacy policy, terms of service, and legal document page examples.
- [FAQ Pages](https://mds.stepanu.com/marketing-examples/faq-pages.md): Standalone FAQ page examples with search and categorized questions.

## Optional

- [Storybook](https://storybook.stepanu.com/?path=/story/overview-welcome-to-mds--welcome)
- [Figma](https://www.figma.com/design/)
- [Support](mailto:mavka.agcy@gmail.com)