Nearly-Pickled Module


    0.3.7 • Public • Published

    NPM version

    Basic UI

    One UI is a fully customized front-end UI library based on the Styled-Components framework and React component thinking. Use Flex layout and CSS3 style to write specifications.


    With One UI, you can build any front-end UI interface you want. Flexible, customize any of your UI interface. Follow the All in js idea, let CSS styles pass parameters like React components, and compile front-end CSS styles through Styled-Components. One UI has now released the official version, but you can still fix some problems in complex usage scenarios through pull request.


    Why invented One UI? Alright... (note, this part contains some of my personal opinions!) Before inventing One UI, I tried many different front-end UI libraries. I found that although they are basically no problem when writing simple examples, once you want to build some complex and beautiful pages with a high degree of freedom, you will find some deep-seated problems. For example, the UI library hard-codes the document structure specification , Difficult to customize. Similar layout structures can be used out of the box, but in many cases you can't customize them for personal needs.


    One UI tries to solve the problem of arbitrary customization through some principles:

    Based on Styled-Components. Use Styled-Components consistent construction method to compile CSS styles Flex Box layout mode Flexible native HTML tag switching. Reconstruct native HTML tags such as div to Div, React components starting with capital letters When you don’t want to use One UI, you can use native tags directly Concise parameter transfer. Reduce the native CSS style to one letter as much as possible


    use npm
    npm i -s @eugle/oneui

    use yarn
    yarn add @eugle/oneui

    import {Div} from '@eugle/oneui'



    Customize the default color

    	primary: '#35b8e0',  
    	primaryRGB: '53,184,224',  
    	primaryG: '#0081ee',  
    	success: '#10c469',  
    	successRGB: '16,196,105',  
    	successG: '#009f5a',   
    	danger: '#ff5b5b',  
    	dangerRGB: '255,93,93',
    	dangerG: '#e02e2e',
    	warning: '#f9c851',
    	warningRGB: '249,200,81',
    	warningG: '#ff8a00',
    	info: '#002fa7',
    	infoRGB: '0,47,167',
    	infoG: '#002687',

    RGB at the end represents the format of '255,255,255' for transparency G at the end is used to set the color at the end of the gradient


    Styled-Components. Official document
    HTML5. Guide
    CSS3. Guide
    JavaScript. Web development technology
    React. Official document

    If this is not enough, you can also read the heavily annotated source code of One UI at any time.


    Contributions in all forms are welcome!


    npm i @eugle/oneui

    DownloadsWeekly Downloads






    Unpacked Size

    77 kB

    Total Files


    Last publish


    • eugle