This is an info Alert.
  • Home
  • Components
  • Pages
    • Marketing
      • /assets/images/menu/marketing.webp
      • Landing
      • Services
      • Case studies
      • Case study
      • Posts
      • Post
      • About
      • Contact
    • Travel
      • /assets/images/menu/travel.webp
      • Landing
      • Tours
      • Tour
      • Checkout
      • Order completed
      • Posts
      • Post
      • About
      • Contact
    • Career
      • /assets/images/menu/career.webp
      • Landing
      • Jobs
      • Job
      • Posts
      • Post
      • About
      • Contact
    • E-learning
      • /assets/images/menu/e-learning.webp
      • Landing
      • Courses
      • Course
      • Posts
      • Post
      • About
      • Contact
    • E-commerce
      • /assets/images/menu/e-commerce.webp
      • Landing
      • Products
      • Product
      • Cart
      • Checkout
      • Order completed
      • Wishlist
      • Compare
      • Account personal
      • Account wishlist
      • Account vouchers
      • Account orders
      • Account payment
    • Common
      • Sign in (split)
      • Sign up (split)
      • Sign in (centered)
      • Sign up (centered)
      • Sign in (illustration)
      • Sign up (illustration)
      • Reset password
      • Update password
      • Verify
      • 404 error
      • 500 error
      • Maintenance
      • Coming soon
      • Pricing cards
      • Pricing columns
      • Payment
      • Support
  • Docs
Purchase
Utilities
  1. Components
  2. Utilities
    • Animate
    • Carousel
    • Form validation
    • Form wizard
    • Icons
    • Image
    • Label
    • Lightbox
    • Markdown
    • Mega menu
    • Navigation bar
    • Player
    • Scroll progress
    • Scrollbar
    • Utilities
Text max line
1 Line

Donec posuere vulputate arcu. Fusce vulputate eleifend sapien. Phasellus magna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.

2 Line

Donec posuere vulputate arcu. Fusce vulputate eleifend sapien. Phasellus magna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.

3 Line

Donec posuere vulputate arcu. Fusce vulputate eleifend sapien. Phasellus magna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.

4 Line

Donec posuere vulputate arcu. Fusce vulputate eleifend sapien. Phasellus magna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.

As Link
Donec posuere vulputate arcu. Fusce vulputate eleifend sapien. Phasellus magna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.
Persistent
Donec posuere vulputate arcu.
Copy to clipboard
onChange
onDoubleClick

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Cras non dolor.

Gradient
Text

Minimals UI

Border
Content
Background
Paper
Countdown
Date
- -
days
- -
hours
- -
minutes
- -
seconds
Seconds
Number input
Basic
With helper text
Bedrooms
Helper text
Disabled
Bedrooms
Phone input
Auto
National: -International: -Raw: -
Default value
National: (02) 9876 5432International: +61 2 9876 5432Raw: +61298765432
Default country
National: -International: -Raw: -
Fixed country
National: (02) 9876 5432International: +61 2 9876 5432Raw: +61298765432
Fixed country + international
National: (02) 9876 5432International: +61 2 9876 5432Raw: +61298765432
Fixed country + international + hideSelect
National: (02) 9876 5432International: +61 2 9876 5432Raw: +61298765432
Styled

Styling methods with Sx function.


Styling methods with styled() function.


Styling methods with styled() function with state.

Open
Active
Focused
Disabled

Styling methods with keyframes().

With styled()
With sx()
  • On this page
  • 1 - Text max line
  • 2 - Copy to clipboard
  • 3 - Gradient
  • 4 - Countdown
  • 5 - Number input
  • 6 - Phone input
  • 7 - Styled

The starting point for your next project based on easy-to-customize Material-UI © helps you build apps faster and better.

Community
DocumentationChangelogContributing
Let’s stay in touch
Ubscribe to our newsletter to receive latest articles to your inbox weekly.
Social
Apps
  • Marketing
    • Landing
    • Services
    • Case studies
    • Case study
    • Posts
    • Post
    • About
    • Contact
  • Travel
    • Landing
    • Tours
    • Tour
    • Checkout
    • Order completed
    • Posts
    • Post
    • About
    • Contact
  • Career
    • Landing
    • Jobs
    • Job
    • Posts
    • Post
    • About
    • Contact
  • E-learning
    • Landing
    • Courses
    • Course
    • Posts
    • Post
    • About
    • Contact
  • E-commerce
    • Landing
    • Products
    • Product
    • Cart
    • Checkout
    • Order completed
    • Wishlist
    • Compare
    • Account personal
    • Account wishlist
    • Account vouchers
    • Account orders
    • Account payment
  • Common
    • Sign in (split)
    • Sign up (split)
    • Sign in (centered)
    • Sign up (centered)
    • Sign in (illustration)
    • Sign up (illustration)
    • Reset password
    • Update password
    • Verify
    • 404 error
    • 500 error
    • Maintenance
    • Coming soon
    • Pricing cards
    • Pricing columns
    • Payment
    • Support

© All rights reserved.Help center
Terms of service