marble-ui
v1.1.0
Published
Marble UI is a specialized user interface (UI) library that contains some elegant and fascinating designs that can take your UI to the next level. Built on the React framework, this library offers a wide range of customizable UI components that are tailor
Downloads
4
Maintainers
Readme
Devsinc UI Library
Devsinc UI Library, is a specialized user interface (UI) library that has been developed by RAPP Team for internal use within all Devsinc's products. By utilizing this custom react based library, Devsinc is able to enhance the functionality and aesthetic appeal of their products while maintaining a high level of consistency and efficiency in their development process.
Table of Contents
Installation
Please use the following command to use this package in your project
npm i devsinc-lib
Status
Website Hosting
You can access the live version of the Devsinc Ui Library at Vercel.
Components
Following are the components that can be used from this library to enhance the functionality and aesthetic appeal while maintaining a high level of consistency in all products.
- Button
- Typography
- CheckBox
- TextField
- ToggleSwitch
- Counter
- SearchInput
- TextArea
- DropDownComponent
- PopUp
- Color
Code Examples
Following are the examples of devsinc-lib componenets usage
Button Component
import { Button } from 'devsinc-lib'
const App = () => (
<Button
label='Primary Button'
type='primary'
variant='success'
postPosition
onClick={() => console.log('Button clicked!')}
style={{ width: '250px' }}
/>
)
ToggleSwitch Component
import { ToggleSwitch } from 'devsinc-lib'
const App = () => (
<>
<h1>ToggleSwitch Example</h1>
<ToggleSwitch
onToggle={() => console.log('ToggleSwitch clicked!')}
textLabel='Toggle Switch Label'
/>
</>
)
TextField Component
import { useState } from 'react'
import { TextField } from 'devsinc-lib'
const App = () => {
const [name, setName] = useState('')
const handleNameChange = updatedName => {
setName(updatedName)
}
return (
<>
<h1>TextField Example</h1>
<TextField
TextLabel='Enter your name:'
value={name}
onChange={handleNameChange} />
</>
)
}
TextArea Component
import { useState } from 'react'
import { TextArea } from 'devsinc-lib'
const App = () => {
const [feedback, setFeedback] = useState('')
const handleFeedbackChange = e => {
setFeedback(e.target.value)
}
return (
<>
<h1>TextArea Example </h1>
<TextArea
textLabel='Feedback:'
placeHolder='Enter your feedback here'
value={feedback}
onChange={handleFeedbackChange} />
</>
)
}
Typography Component
import { Typography } from 'devsinc-lib'
const App = () => (
<>
<h1>Typography Example</h1>
<Typography children='My text' size='h1' />
<Typography children='My text' size='h2' />
<Typography children='My text' size='h3' />
<Typography children='My text' size='h4' />
<Typography children='My text' size='h5' />
<Typography children='My text' size='h6' />
</>
)
CheckBox Component
import { useState } from 'react'
import { CheckBox } from 'devsinc-lib'
const App = () => {
const [isChecked, setIsChecked] = useState(false)
const handleCheckBoxChange = checked => {
setIsChecked(checked)
}
return (
<>
<h1>CheckBox Example</h1>
<CheckBox
onClick={handleCheckBoxChange}
textLabel='Female' />
<p>{isChecked ? 'The checkbox is clicked' : 'The checkbox is not clicked'}</p>
</>
)
}
Counter Component
import { useState } from 'react'
import { Counter } from 'devsinc-lib'
const App = () => {
const [value,setValue]=useState(0)
return (
<>
<h1>Counter Example</h1>
<Counter
textLable='Quantity'
placeHolder='Enter quantity'
value={value}
onChange={value => setValue(value)}
disabled={false}
labelClasses='myLabelClasses'
className='myInputClasses'
style={{ backgroundColor: '#F5F5F5' }}
labelStyle={{ fontWeight: 'bold' }}
/>
</>
)
}
SearchInput Component
import { useState } from 'react'
import { SearchInput } from 'devsinc-lib'
const App = () => {
const [product, setProduct] = useState('')
return (
<>
<h1>SearchInput Example</h1>
<SearchInput
placeholder='Search Product'
value={value}
onChange={productName => setValue(productName)}
/>
</>
)
}
PopUp Component
import { PopUp } from 'devsinc-lib'
const App = () => {
return (
<>
<h1>PopUp Example</h1>
<PopUp
title='Warning!'
message='Do you want to delete this file?'
leftButtonLabel='No'
rightButtonLable='Yes'
onClickRight={() => console.log('Right button clicked')}
onClickLeft={() => console.log('Left button clicked')}
/>
</>
)
}
Bugs and Feature Requests
Have a bug or a feature request? Contact Us
Frameworks
Devsinc Ui Library supports these frameworks.
- React.js
- Next.js
- Ruby
- Vue.js