Discover a vast library of open-source Tailwind CSS components and Mobile UI design elements ๐Ÿš€

Overview

SundarUI ๐Ÿ˜

Discover a vast library of open-source Tailwind CSS components and Mobile UI design elements ๐Ÿš€

MIT LIcense Twitter LinkedIn

What is SundarUI?

Sundar UI is a library of prebuilt user interface (UI) components that can be easily integrated into your web projects. The library provides a variety of components that are designed to be visually appealing and functional, including buttons, forms, modals, and more.

Motivation ๐Ÿ™‚

  • Streamlining development
  • Saving time and effort
  • Improving consistency
  • Accessibility

Tech/Framework used ๐Ÿ’ป

HTML5 CSS3 React JavaScript TailwindCSS Vite Git GitHub Markdown

Features ๐Ÿ‘

  • Comprehensive component library: Sundar UI should offer a wide range of pre-built components for both Tailwind CSS and mobile applications. These components covers common UI elements such as buttons, forms, navigation and more.

  • Customization options: While the pre-built components should be useful as is, users may want to customize them to better suit their specific needs. Sundar UI could provide customization options such as color schemes and more, so users can make the components their own.

  • Code snippets: Many users will likely want to use Sundar UI components as part of their existing projects. Sundar UI provides code snippets for each component, making it easy for users to drop them into their codebase.

  • Documentation: Clear documentation is key to using any new library or framework effectively. Sundar UI provides clear and concise documentation for each component, including examples of how they can be used and customized.

  • Responsive design: Given the increasing importance of mobile devices, Sundar UI ensure that all components are fully responsive and mobile-friendly.

  • Support for multiple libraries: While Tailwind CSS and XML/XSL, Sundar UI is also useful to support other popular libraries such as React.js, Vue.js along with that normal HTML5.

Getting Started ๐Ÿš€

Getting started with Sundar UI is easy, and we've made it even easier with our step-by-step guide. Follow these detailed steps to start using our prebuilt components for Tailwind CSS and XML, XSL:

  1. Visit our website at https://sundar-ui.netlify.app/

  2. This is the first step to getting started with Sundar UI. By visiting our website, you can see our collection of prebuilt components, browse their examples, and see what's available.

  3. Choose the components you want to use in your project.

  4. Once you've visited our website and looked through our collection of prebuilt components, it's time to choose the ones you want to use in your project. You can filter components by category, or search for specific components by name or keyword.

  5. Copy the code for the component you want to use.

  6. After you've found the components you want to use, simply click on the component to see its example code. Copy the code for the component and paste it into your project's HTML or XML/XSL file.

  7. Modify the component to fit your specific needs.

  8. All of our components are fully customizable, which means you can easily modify them to fit your specific needs. Use Tailwind CSS to modify the appearance of the component, or use XML/XSL to modify its structure and content.

  9. Test your component.

  10. Once you've modified the component to fit your needs, it's important to test it thoroughly to ensure that it works as expected. Test the component on various devices and screen sizes to make sure that it's fully responsive.

  11. Repeat steps 2-5 for any additional components.

That's it! With Sundar UI, you can save time and effort by using our prebuilt components to quickly and easily create beautiful, responsive websites and applications.

Configure this project to work on your local machine ๐Ÿงฐ

๐Ÿ“‘ Prerequisites

Before starting out, you'll to install the folowing on your computer.

Vite NodeJS NPM Git

๐Ÿ› ๏ธ Installation

  1. Fork this repo by clicking on the Fork button.
  2. Clone the repository using git clone {repository url}. You can find repo url by clicking on the Code button.
  3. Run cd SundarUI to change the current directory.
  4. Install the dependencies by running the command npm install OR npm i.
  5. Start the development server by running the command npm run dev.
  6. To see the output, click on the url http://localhost:5173/ .

Components โš›๏ธ

Sundar UI provides a variety of components that you can use in your web projects. Here are some examples:

  • Buttons
  • Forms
  • Modals
  • Alerts
  • Icons

For a full list of components, please refer on the Sundar UI website.

Contribution ๐Ÿ‘จโ€๐Ÿ’ป

Any contribution are highly appreciated. ๐Ÿ™ You cam contribute in two ways:

  1. create an issue and tell us your idea ๐Ÿ’ก . Make sure that you use the enhancement label in this case.
  2. fork the project and submit a PR with your new idea. Before doing that, please make sure that you read and follow the Contribution Guide.

Code of Conduct ๐Ÿ“˜

Please refer to our Code of Conduct to ensure that your contributions align with our community values and standards of conduct.

Spread the word! ๐ŸŒ

If the information from this repo was useful to you in any way, make sure you give it a star ๐ŸŒŸ , this way others can find it and benefit too! Together we can grow and make our community better! ๐Ÿ˜ƒ

Do you have any suggestions on how we could improve this project overall? Let us know! We'd love to hear your feedback!

Maintainers

Raj Patel Raj Patel - Maintainer

Upendra Sahni Upendra Sahni - Maintainer

Dipesh Patel Dipesh Patel - Maintainer

Thanks to all the contributors โค๏ธ

License ๐Ÿ’ณ

Code is under the MIT License. See LICENSE for more information.

ยฉ 2023-24 SundarUI โค๏ธ

You might also like...

A Single place to Discover, Collaborate, and Get your data right

A Single place to Discover, Collaborate, and Get your data right

A Single place to Discover, Collaborate, and Get your data right Darkseal Darkseal includes the following: Metadata schemas - Defines core abstraction

Dec 28, 2022

An open-source Typing-effect Library, That enables potential users to add a typing effect to mere DOM Elements.

Typing Effect Library An open-source Typing-effect Library I created. That enables potential users to add a typing effect to mere DOM Elements. Tool P

Oct 3, 2022

NativeScript + Tailwind CSS + Angular Mobile Starter

NativeScript + Tailwind CSS + Angular Mobile Starter

NativeScript + Tailwind CSS + Angular Mobile Starter This repo is a small starting point for building a native iOS and Android app with Tailwind CSS,

Nov 4, 2022

Web UI kit following simply superb.'s design system, based on Tailwind CSS.

ui-kit TailwindCSS powered UI kit following simply superb.'s design system. โžก๏ธ Demo available here Why I am building few applications (iOS / Android /

Mar 4, 2022

A utility-first universal design system - powered by Tailwind CSS

tailwindcss-react-native tailwindcss-react-native uses Tailwind CSS as universal design system for all React Native platforms. It lets you share code

Jan 4, 2023

Ready-to-use Remix + Tailwind CSS routes and components.

Ready-to-use Remix + Tailwind CSS routes and components.

remix-blocks What is RemixBlocks? Ready-to-use Remix + Tailwind CSS routes, and UI components, all blocks: Are full-stack routes. Are independent of e

Jan 5, 2023

This project is for hacktoberfest to encourage new developer and open source developers to contribute to open source and improve skills which require debugging, write testable code, industry standards, problem solving and many more,

This project is for hacktoberfest to encourage new developer and open source developers to contribute to open source and improve skills which require debugging, write testable code, industry standards, problem solving and many more,

๐Ÿš€ Blog project for hacktoberfest In this repository, you can find issues related to a blog project that is built on top of Next.js. The project is a

Oct 9, 2022

DripUI a collection of free Tailwind CSS components to bootstrap your new apps, projects or landing sites!

DripUI a collection of free Tailwind CSS components to bootstrap your new apps, projects or landing sites!

DripUI - Tailwind Components DripUI is an amazing collection of free UI components to help you develop projects faster and easier. The most elegant co

Nov 27, 2022

Next.js app using some dummy Tailwind CSS components

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Oct 12, 2022
Comments
  • Design layout changes for Our Purpose section

    Design layout changes for Our Purpose section

    We would like to improve the design layout of the Our Purpose section in our website. Currently, the section looks cluttered and doesn't effectively communicate our message to visitors. We would like to create a more visually appealing and engaging layout.

    Some specific changes we would like to make include:

    • Adding images to break up the text and make it more engaging
    • Adjusting the spacing and alignment of the text and images to make the section more visually appealing
    • Considering different layout options, such as using columns or a grid

    Here I attached a image of that section. Screenshot (415)

    We would like to work with a designer to make these changes, and we are open to suggestions for other improvements as well. Please let us know if you have any questions or suggestions for how we can improve this section. Thank you!

    enhancement help wanted good first issue 
    opened by rajpatelbot 2
Owner
Raj Patel
I'm a programmer, To save the time, Let's just assume that MY CODE is always BUG FREE. ๐Ÿ˜„
Raj Patel
Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework. Why use Preline UI? Based on the Tailwin

Html Stream 1.1k Jan 3, 2023
Material Design implemented in Web Components (Custom Elements v1)

Material Web Components Material Design implemented in Web Components (Custom Elements v1) https://dannymoerkerke.github.io/material-webcomponents/ Ge

Danny Moerkerke 110 Nov 14, 2022
Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

Macaron 334 Dec 29, 2022
Reference for How to Write an Open Source JavaScript Library - https://egghead.io/series/how-to-write-an-open-source-javascript-library

Reference for How to Write an Open Source JavaScript Library The purpose of this document is to serve as a reference for: How to Write an Open Source

Sarbbottam Bandyopadhyay 175 Dec 24, 2022
A recreation of a startpage posted on Reddit without the source, so I rewrote it in Next.js + Tailwind for the open source community.

Startpage "Figma Balls" Rewrite Why Did I Make This I saw a startpage posted on the subreddit r/startpages that I thought looked nice, but when I look

Thomas Leon Highbaugh 5 Mar 29, 2022
A responsive and open source portfolio for software developers (Next.js & Tailwind CSS version).

Software Developer Portfolio ?? A responsive and open source portfolio for software developers (Next.js & Tailwind CSS version). Website Screenshot In

Ismailium 10 Nov 28, 2022
Big Chief is a website where you find and share everyday cooking inspiration. Discover recipes, cooks, videos, and how-tos based on the food you love.

Big Chief Big Chief is a website where you find and share everyday cooking inspiration. Discover recipes, cooks, videos, and how-tos based on the food

AVLESSI Matchoudi 7 Jun 1, 2022
โช Rewinds โ€“ Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more

โช Rewinds โ€“ Remix Tailwind Starter Kit Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries. This is an example demo to combine the

M Haidar Hanif 81 Dec 24, 2022
An easy way to discover and manage your cloud like a local filesystem

cfs An easy way to discover and manage your cloud like a local filesystem. The swiss army knife for finding any resource in your AWS account. โฌ instal

Khalid Zoabi 4 Jun 4, 2022
Make friends through music. Discover great sound tracks on Solana and play them with your buddies :dancer:.

Acoustic Licious COVID-19 has significantly impacted the mental health of children and adults alike. Globally, the population suffering from lonelines

Devyansh Chawla 4 Oct 28, 2022