Node's Pastoral Musicians

    kaidohussar-ui
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.40 • Public • Published

    Set of UI components made by Kaido Hussar (WIP)

    Install the library

    npm install kaidohussar/ui --save
    yarn add kaidohussar/ui

    Set up theme

    Default values for light theme are displayed here:

    {
        "name": "light",
        "colors": {
            "textColorDarkBg": "#FFFFFF",
            "textColorLightBg": "#1A1A1A",
            "accentColor": "#1A1A1A",
            "backgroundColor": "#FCFCFD",
            "dangerColor": "#FF3F00",
            "linkColor": "blue",
            "linkFocusedColor": "darkblue"
        },
        "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
        "uiSpeed": "0.2s",
        "breakpoints": {
            "xs": "0px",
            "sm": "576px",
            "md": "768px",
            "lg": "992px",
            "xl": "1200px",
            "xxl": "1392px",
            "xxxl": "1600px"
        },
        "fontWeights": {
            "thin": 100,
            "extralight": 200,
            "light": 300,
            "regular": 400,
            "medium": 500,
            "semibold": 600,
            "bold": 700,
            "extrabold": 800
        },
        "fontSizes": {
            "xs": "12px",
            "sm": "14px",
            "md": "16px",
            "lg": "18px",
            "xl": "24px",
            "xxl": "32px",
            "xxxl": "48px"
        },
        "spacing": {
            "gridunit": 8,
            "xxs": "2px",
            "xs": "4px",
            "sm": "8px",
            "md": "16px",
            "lg": "32px",
            "xl": "64px",
            "xxl": "128px",
            "xxxl": "192px"
        },
        "defaultBorderRadius": "4px"
    }

    Usage with React

    Default and recommended usage. All components are available as modules and you can use them as any other React component.

    import { Button } from 'kaidohussar/ui';
    
    <Button>Click me</Button>

    Theming

    Theming is as easy as it can be

    Wrap your application with StylesProvider

    import { StylesProvider } from 'kaidohussar/ui';
    
    <StylesProvider themes={[myCustomLightTheme, myCustomDarkTheme]}>
        <App />
    </StylesProvider>

    Change your theme with a useTheme hook

    import { useTheme } from 'kaidohussar/ui';
    
    const { setTheme, theme } = useTheme();
    
    console.log('currently active theme', theme);
    
    <Button onClick={() => setTheme("dark")}>
      Switch to dark theme
    </Button>

    Keywords

    none

    Install

    npm i kaidohussar-ui

    DownloadsWeekly Downloads

    101

    Version

    1.0.40

    License

    ISC

    Unpacked Size

    973 kB

    Total Files

    44

    Last publish

    Collaborators

    • kaidohussar