Neumorphism UI

Neumorphism inspired User Interface Kit that will help you prototype and design beautiful, creative and modern websites.

Downloard

Over 200 components

Beatifully crafted and neumorphism inspired elements

10+ sections

Navigation bars, pricing cards, footers and many more sections to enhance page variety

5 example pages

We took the time to create a few example pages to show you how neumorphic pages can look like

Default Accordion

Click on the code button above to see the following component code 

            
              <div class="accordion" id="accordionExample">
            <div class="accordion-item shadow-out">
              <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                  aria-expanded="true" aria-controls="collapseOne">
                  Our Company
                </button>
              </h2>
              <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                data-bs-parent="#accordionExample">
                <div class="accordion-body">
                  <div class="fw-lighter">
                    At Themesberg, our mission has always been focused on bringing openness and transparency to the
                    design process. We've always believed that by providing a space where designers can share ongoing
                    work not only empowers them to make better products, it also helps them grow. We're proud to be a
                    part of creating a more open culture and to continue building a product that supports this vision.
                  </div>
                </div>
              </div>
            </div>
            <div class="accordion-item shadow-out">
              <h2 class="accordion-header" id="headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  Neumorphism Components
                </button>
              </h2>
              <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                data-bs-parent="#accordionExample">
                <div class="accordion-body">
                  <div class="fw-lighter">
                    At Themesberg, our mission has always been focused on bringing openness and transparency to the
                    design process. We've always believed that by providing a space where designers can share ongoing
                    work not only empowers them to make better products, it also helps them grow. We're proud to be a
                    part of creating a more open culture and to continue building a product that supports this vision.
                  </div>
                </div>
              </div>
            </div>
            <div class="accordion-item shadow-out">
              <h2 class="accordion-header" id="headingThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  Licenses
                </button>
              </h2>
              <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
                data-bs-parent="#accordionExample">
                <div class="accordion-body">
                  <div class="fw-lighter">
                    At Themesberg, our mission has always been focused on bringing openness and transparency to the
                    design process. We've always believed that by providing a space where designers can share ongoing
                    work not only empowers them to make better products, it also helps them grow. We're proud to be a
                    part of creating a more open culture and to continue building a product that supports this vision.
                  </div>
                </div>
              </div>
            </div>
          </div>

At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.

At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.

At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.

Accordion with icons

Click on the code button above to see the following component code 

            
              <div class="accordion" id="accordion2">
            <div class="accordion-item shadow-out">
              <h2 class="accordion-header" id="headingFour">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour"
                  aria-expanded="true" aria-controls="collapseFour">
                  <i class="fas fa-briefcase me-2"></i> Our Company
                </button>
              </h2>
              <div id="collapseFour" class="accordion-collapse collapse show" aria-labelledby="headingFour"
                data-bs-parent="#accordion2">
                <div class="accordion-body">
                  <div class="fw-lighter">
                    At Themesberg, our mission has always been focused on bringing openness and transparency to the
                    design process. We've always believed that by providing a space where designers can share ongoing
                    work not only empowers them to make better products, it also helps them grow. We're proud to be a
                    part of creating a more open culture and to continue building a product that supports this vision.
                  </div>
                </div>
              </div>
            </div>
            <div class="accordion-item shadow-out">
              <h2 class="accordion-header" id="headingFive">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                  <i class="fas fa-box-open me-2"></i> Neumorphism Components
                </button>
              </h2>
              <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive"
                data-bs-parent="#accordion2">
                <div class="accordion-body">
                  <div class="fw-lighter">
                    At Themesberg, our mission has always been focused on bringing openness and transparency to the
                    design process. We've always believed that by providing a space where designers can share ongoing
                    work not only empowers them to make better products, it also helps them grow. We're proud to be a
                    part of creating a more open culture and to continue building a product that supports this vision.
                  </div>
                </div>
              </div>
            </div>
            <div class="accordion-item shadow-out">
              <h2 class="accordion-header" id="headingSix">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapseSex" aria-expanded="false" aria-controls="collapseSex">
                  <i class="fas fa-certificate me-2"></i> Licenses
                </button>
              </h2>
              <div id="collapseSex" class="accordion-collapse collapse" aria-labelledby="headingSix"
                data-bs-parent="#accordion2">
                <div class="accordion-body">
                  <div class="fw-lighter">
                    At Themesberg, our mission has always been focused on bringing openness and transparency to the
                    design process. We've always believed that by providing a space where designers can share ongoing
                    work not only empowers them to make better products, it also helps them grow. We're proud to be a
                    part of creating a more open culture and to continue building a product that supports this vision.
                  </div>
                </div>
              </div>
            </div>
          </div>

At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.

At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.

At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.

Default Alerts

Click on the code button above to see the following component code 

        
          <div>
            <div class="alert text-primary shadow-out mb-4" role="alert">
              A simple primary alert—check it out!
            </div>
            <div class="alert text-success shadow-out mb-4" role="alert">
              A simple primary alert—check it out!
            </div>
            <div class="alert text-danger shadow-out mb-4" role="alert">
              A simple primary alert—check it out!
            </div>
            <div class="alert text-warning shadow-out mb-4" role="alert">
              A simple primary alert—check it out!
            </div>
            <div class="alert text-info shadow-out mb-4" role="alert">
              A simple primary alert—check it out!
            </div>
            <div class="alert text-dark shadow-out mb-4" role="alert">
              A simple primary alert—check it out!
            </div>
          </div>

Inset Shadow

Click on the code button above to see the following component code 

        
          <div>
            <div class="alert text-primary shadow-in mb-4" role="alert">
              A simple primary alert—check it out!
            </div>
            <div class="alert text-success shadow-in mb-4" role="alert">
              A simple success alert—check it out!
            </div>
            <div class="alert text-danger shadow-in mb-4" role="alert">
              A simple danger alert—check it out!
            </div>
            <div class="alert text-warning shadow-in mb-4" role="alert">
              A simple warning alert—check it out!
            </div>
            <div class="alert text-info shadow-in mb-4" role="alert">
              A simple info alert—check it out!
            </div>
            <div class="alert text-dark shadow-in mb-4" role="alert">
              A simple dark alert—check it out!
            </div>
          </div>

Badges

Click on the code button above to see the following component code 

        
          <div>
            <p class="text-center fs-4 mb-4">Default Badges</p>
            <div class="d-block d-md-flex justify-content-center text-center">
              <p><span class="badge shadow-in text-dark me-2">Dark Badge</span></p>
              <p><span class="badge shadow-in text-primary me-2">Primary Badge</span></p>
              <p><span class="badge shadow-in text-success me-2">Success Badge</span></p>
              <p><span class="badge shadow-in text-danger me-2">Danger Badge</span></p>
              <p><span class="badge shadow-in text-warning me-2">Warning Badge</span></p>
              <p><span class="badge shadow-in text-info me-2">Info Badge</span></p>
            </div>
          </div>

          <div>
            <p class="text-center fs-4 mt-4 mb-4">Rounded Pill Badges</p>
            <div class="d-block d-md-flex justify-content-center text-center">
              <p><span class="badge shadow-in rounded-pill text-dark me-2">Dark Badge</span></p>
              <p><span class="badge shadow-in rounded-pill text-primary me-2">Primary Badge</span></p>
              <p><span class="badge shadow-in rounded-pill text-success me-2">Success Badge</span></p>
              <p><span class="badge shadow-in rounded-pill text-danger me-2">Danger Badge</span></p>
              <p><span class="badge shadow-in rounded-pill text-warning me-2">Warning Badge</span></p>
              <p><span class="badge shadow-in rounded-pill text-info me-2">Info Badge</span></p>
            </div>
          </div>

          <div class="pb-2">
            <p class="text-center fs-4 mt-4 mb-4">Link Badges</p>
            <div class="d-block d-md-flex justify-content-center text-center">
              <a href="javascript:void(0)"><span class="badge mb-2 mb-md-0 shadow-in text-dark me-2">Dark Badge</span></a>
              <a href="javascript:void(0)"><span class="badge mb-2 mb-md-0 shadow-in text-primary me-2">Primary Badge</span></a>
              <a href="javascript:void(0)"><span class="badge mb-2 mb-md-0 shadow-in text-success me-2">Success Badge</span></a>
              <a href="javascript:void(0)"><span class="badge mb-2 mb-md-0 shadow-in text-danger me-2">Danger Badge</span></a>
              <a href="javascript:void(0)"><span class="badge mb-2 mb-md-0 shadow-in text-warning me-2">Warning Badge</span></a>
              <a href="javascript:void(0)"><span class="badge mb-2 mb-md-0 shadow-in text-info me-2">Info Badge</span></a>
            </div>
          </div>

          <div>
            <p class="text-center fs-4 mt-4 mb-4">Buttons Badges</p>
            <div class="d-block d-md-flex justify-content-center text-center">
              <button type="button" class="btn text-dark shadow-out-hover px-4 py-2">
                Notifications <span class="badge shadow-in text-danger">5</span>
              </button>
            </div>
          </div>

          <div>
            <p class="text-center fs-4 pt-3 mt-4 mb-4">Positioned</p>
            <div class="text-center">
              <button type="button" class="btn me-5 px-4 py-2 shadow-in-hover position-relative">
                Inbox
                <span
                  class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger shadow-out text-white">
                  99+
                  <span class="visually-hidden">unread messages</span>
                </span>
              </button>

              <button type="button" class="btn px-4 py-2 shadow-in-hover position-relative">
                Profile
                <span
                  class="position-absolute top-0 shadow-out start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
                </span>
              </button>
            </div>
          </div>

Default Badges

Dark Badge

Primary Badge

Success Badge

Danger Badge

Warning Badge

Info Badge

Rounded Pill Badges

Dark Badge

Primary Badge

Success Badge

Danger Badge

Warning Badge

Info Badge

Link Badges

Dark Badge Primary Badge Success Badge Danger Badge Warning Badge Info Badge

Buttons Badges

Positioned

Blog Cards

Click on the code button above to see the following component code 

        
          <div class="row">
        <div class="col-lg-4">
          <div class="card overflow-hidden shadow-out">
            <img src="./dist/images/blog-article-1.jpeg" class="card-img-top" alt="">
            <div class="card-body">
              <p class="fw-lighter"><i class="fas fa-seedling me-2"></i> Awards</p>
              <h5 class="fw-normal mb-3">We partnered up with Google</h5>
              <p class="fw-lighter">Some quick example text to build on the card title and make up the bulk of the
                card's content.</p>
              <a href="#" class="btn shadow-out-hover mt-3">Learn More</a>
            </div>
          </div>
        </div>

        <div class="col-lg-4">
          <div class="card overflow-hidden shadow-out">
            <div class="p-3">
              <div class="shadow-out overflow-hidden">
                <img src="./dist/images/blog-article-1.jpeg" class="card-img-top" alt="">
              </div>
            </div>
            <div class="card-body">
              <p class="fw-lighter"><i class="fas fa-calendar-alt me-2"></i> 15 March 2020</p>
              <h5 class="fw-normal mb-3">We partnered up with Google</h5>
              <p class="fw-lighter">Some quick example text to build on the card title and make up the bulk of the
                card's content.</p>
              <a href="#" class="btn shadow-out-hover mt-3">Learn More</a>
            </div>
          </div>
        </div>

        <div class="col-lg-4">
          <div class="card text-center overflow-hidden shadow-out">
            <div class="card-body">
              <p class="fw-lighter"><i class="fas fa-seedling me-2"></i> Awards</p>
              <h5 class="fw-normal mb-3">We partnered up with Google</h5>
              <p class="fw-lighter">Some quick example text to build on the card title and make up the bulk of the
                card's content.</p>
              <a href="#" class="btn shadow-out-hover mt-3">Learn More</a>
            </div>
          </div>

          <div class="card overflow-hidden shadow-in">
            <div class="card-body">
              <h5 class="fw-normal mb-3">We partnered up with Google</h5>
              <p class="fw-lighter"><i class="fas fa-calendar-alt me-2"></i> 15 March 2020</p>
              <p class="fw-lighter">This is a wider card with supporting text below as a natural lead-in to additional
                content. This content is a little bit longer.</p>
              <a href="#" class="btn shadow-out-hover mt-3">Learn More</a>
            </div>
          </div>
        </div>
      </div>

Awards

We partnered up with Google

Some quick example text to build on the card title and make up the bulk of the card's content.

Learn More

15 March 2020

We partnered up with Google

Some quick example text to build on the card title and make up the bulk of the card's content.

Learn More

Awards

We partnered up with Google

Some quick example text to build on the card title and make up the bulk of the card's content.

Learn More
We partnered up with Google

15 March 2020

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Learn More

Carousel

Click on the code button above to see the following component code 

        
          <!-- Carousel 1 Start -->
          <div class="mb-5 p-4 shadow-out">
            <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img src="./dist/images/image-1.jpeg" class="img-fluid rounded-lg" alt="...">
                </div>
                <div class="carousel-item">
                  <img src="./dist/images/image-2.jpeg" class="img-fluid rounded-lg" alt="...">
                </div>
                <div class="carousel-item">
                  <img src="./dist/images/image-3.jpeg" class="img-fluid rounded-lg" alt="...">
                </div>
              </div>
            </div>
          </div>
          <!-- Carousel 1 End -->

          <!-- Carousel 2 Start -->
          <div class="mb-5 p-4 shadow-in">
            <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img src="./dist/images/image-3.jpeg" class="img-fluid rounded-lg" alt="...">
                </div>
                <div class="carousel-item">
                  <img src="./dist/images/image-1.jpeg" class="img-fluid rounded-lg" alt="...">
                </div>
                <div class="carousel-item">
                  <img src="./dist/images/image-2.jpeg" class="img-fluid rounded-lg" alt="...">
                </div>
              </div>
              <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
              </button>
              <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
              </button>
            </div>
          </div>
          <!-- Carousel 2 End -->

          <!-- Carousel 3 Start -->
          <div class="mb-5 p-4 shadow-out">
            <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
              <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
                  aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
                  aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
                  aria-label="Slide 3"></button>
              </div>
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img src="./dist/images/image-2.jpeg" class="img-fluid rounded-lg" alt="...">
                  <div class="carousel-caption d-none d-md-block">
                    <h5 class="text-danger">First slide label</h5>
                    <p class="text-dark">Some representative placeholder content for the first slide.</p>
                  </div>
                </div>
                <div class="carousel-item">
                  <img src="./dist/images/image-3.jpeg" class="img-fluid rounded-lg" alt="...">
                  <div class="carousel-caption d-none d-md-block">
                    <h5 class="text-danger">Secound slide label</h5>
                    <p class="text-dark">Some representative placeholder content for the first slide.</p>
                  </div>
                </div>
                <div class="carousel-item">
                  <img src="./dist/images/image-1.jpeg" class="img-fluid rounded-lg" alt="...">
                  <div class="carousel-caption d-none d-md-block">
                    <h5 class="text-danger">Third slide label</h5>
                    <p class="text-dark">Some representative placeholder content for the first slide.</p>
                  </div>
                </div>
              </div>
              <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
              </button>
              <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
              </button>
            </div>
          </div>
          <!-- Carousel 3 End -->

Call to Action Cards

Click on the code button above to see the following component code

Get in touch

If you need any help with our products or services, choose one of the following ways to contact us.

Contact Us

Become one of us

Do you want to join our team and work remotely from anywhere you'd like? We can’t wait to hear from you!

Check Careers

Ready to change your life?

Download Rocket today and take the first step to organize your routine, achieve your personal goals and reflect on your life.

App Store