@discovery-dao/ui
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    dapper-ui

    Get Started

    yarn
    
    cd examples && npm i
    

    Development

    Watch styles changes

    yarn start
    

    Inside example

    npm run dev
    

    Workflow suggestions

    Create the desired styles with storybook: yarn storybook and yarn start.

    Then stop them and run Inside example npm run dev to start the application.

    Notes

    Right now use chakra-ui components. Use this custom library only for customTheme.

    Publish

    • Change the package name to one that is available on npm.

    Setup semantic release

    npx semantic-release-cli setup
    

    Update package-lock with the latest dependencies

    npm i
    

    Commit

    npm run acp
    

    Usage

    import { extendTheme } from "@chakra-ui/react";
    import { customTheme } from "@discovery-dao/ui";
    
    const theme = extendTheme(customTheme);
    
    ...
    
    <ChakraProvider theme={theme}>
        <Component {...pageProps} />
    </CacheProvider>

    Extend the theme

    const myTheme = {
      components: {
        Button: {
          // 1. We can update the base styles
          baseStyle: {
            fontWeight: 'bold', // Normally, it is "semibold"
          },
          // 2. We can add a new button size or extend existing
          sizes: {
            xl: {
              h: '56px',
              fontSize: 'lg',
              px: '32px',
            },
          },
          // 3. We can add a new visual variant
          variants: {
            'with-shadow': {
              bg: 'red.400',
              boxShadow: '0 0 2px 2px #efdfde',
            },
            // 4. We can override existing variants
            solid: (props) => ({
              bg: props.colorMode === 'dark' ? 'red.300' : 'red.500',
            }),
          },
        },
      },
    };
    const theme = extendTheme(customTheme, myTheme);

    Keywords

    none

    Install

    npm i @discovery-dao/ui

    DownloadsWeekly Downloads

    66

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    812 kB

    Total Files

    114

    Last publish

    Collaborators

    • aeither
    • discovery-labs