comet-ui-kit

comet-ui-kit is a library of [React](https://reactjs.org/) components built with [styled-components](https://www.styled-components.com/).

0.1.7

latest

npm

Version published: 4 years ago

Weekly downloads: 13

Maintainers: 1

Weekly downloads

Created: 4 years ago

Source

Comet UI Kit

comet-ui-kit is a library of React components built with styled-components.

Getting started with Next.js project

Install dependencies

yarn add comet-ui-kit react-spring styled-components polished
yarn add --dev @types/styled-components

Use <CometThemeProvider /> with no props at the root of your app so that you get automatic theme switching out of the box. Or you may pass the theme props as "auto" | "light" | "dark".
Optionally, you may also use <CometGlobalStyles />.
If you are using Next.js, you should use <CometThemeProvider /> in your _app.tsx or Layout file.

// index.tsx
import React from 'react';
import {
  CometThemeProvider,
  Button,
  CometGlobalStyles,
  CometToastContainer,
  COMET_GLOBAL_FONT_HREF,
} from 'comet-ui-kit';

export const MyApp = () => {
  // Get theme properties
  const theme = useTheme();
  const color = theme.comet.color.text.accent;

  return (
    <CometThemeProvider>
      <Head>
        <link rel="stylesheet" href={COMET_GLOBAL_FONT_HREF} />
      </Head>
      <CometGlobalStyles /> {/* Option */}
      <h1 style={{ color: color }}>My cool app</h1>
      <Button variant="primary" size="country">
        Click here!
      </Button>
      <CometToastContainer />{' '}
      {/* Put this somewhere near the root of your app if you are going to use toasts */}
    </CometThemeProvider>
  );
};

// styled.tsx
import { Text } from 'comet-ui-kit';
import { rem } from 'polished';
import styled from 'styled-components';

export const TextExample = styled(Text)`
  font-size: ${({ theme }) => rem(theme.comet.size.room)};

  @media (min-width: ${rem(720)}) {
    font-size: ${({ theme }) => rem(theme.comet.size.street)};
  }
`;

TypeScrip integration

Add a definitions file like the following anywhere in your project.

// DefaultTheme.d.ts
import 'styled-components';
import { CometThemeProvider } from 'comet-ui-kit';

declare module 'styled-components' {
  export interface DefaultTheme extends CometThemeProvider {}
}

How To Contribute

When you push your branch to remote ones, please run yarn lint --fix to comply to the code convention.

When you add a new library, please make sure its license is not GPL. And please use -D for @types.

FAQs

What is comet-ui-kit?

Is comet-ui-kit popular?

Is comet-ui-kit well maintained?

Package last updated on 07 Nov 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install