darkly

⋆⁺｡☆ Darkly ☆｡⁺⋆

Dark React Starter Template + UI Kit.

Features

• Responsive
• Written in TypeScript
• Based on Tailwind CSS framework
• Uses esbuild bundler

Usage

1. First install the module from npm:

   npm i darkly
   

2. Then copy one of the templates.

3. Import CSS file:

import 'darkly/dist/darkly.min.css';

Components

Bars

• Top Bar

  export interface ITopBar {
      children?: React.ReactNode;
      classes?: string;
  }
  

  <BottomBar classes="justify-end">...</BottomBar> 
  

• Bottom Bar

  export interface IBottomBar {
      children?: React.ReactNode;
      classes?: string;
  }
  

  <TopBar classes="text-center justify-center">...</TopBar>
  

Boxes

• Stretch Box

  export interface IStretchBox {
      children?: React.ReactNode;
      classes?: string;
  }
  

  <StretchBox classes="flex justify-center items-center p-4">...</StretchBox>
  

Buttons

• Button

  export enum EButtonType {
      Primary = 1,
      OutlinePrimary = 2,
      Secondary = 3,
      OutlineSecondary = 4,
  }
  
  export interface IButton {
      children?: React.ReactNode;
      classes?: string;
      type?: EButtonType;
      onClick?: Function;
  }
  

  <Button type={ EButtonType.OutlineSecondary }>Reset</Button>
  

Dividers

• Horizontal Splitter

  export interface IHSplitter {
      classes?: string;
  }
  

  <HSplitter classes="mb-4" />
  

Form

• Buttons Group

  export interface IButtonsGroup {
      children?: React.ReactNode;
      classes?: string;
  }
  
  export interface IButtonsGroupButton {
      children?: React.ReactNode;
      classes?: string;
      title?: string;
      selected?: boolean;
      onClick?: Function;
  }
  

  <ButtonsGroup>
      <ButtonsGroupButton selected={ myValue === 0 } onClick={ () => {
          setMyValue(0);
      }}>My Value 1</ButtonsGroupButton>
  
      <ButtonsGroupButton selected={ myValue === 1 } onClick={ () => {
          setMyValue(1);
      }}>My Value 2</ButtonsGroupButton>
  
      <ButtonsGroupButton selected={ myValue === 2 } onClick={ () => {
          setMyValue(2);
      }}>My Value 3</ButtonsGroupButton>
  </ButtonsGroup>
  

• Icons Radio Buttons

  export interface IIconRadioButtonGroup {
      children?: React.ReactNode;
      classes?: string;
  }
  
  export interface IIconRadioButton {
    groupName: string;
    children?: React.ReactNode;
    classes?: string;
    title?: string;
    checked?: boolean;
    onChange?: Function;
  }
  

  <IconRadioButtonGroup>
      <IconRadioButton
          groupName="my-group"
          title="My Title 1"
          checked={ myValue === 0 }
          onChange={ () => {
              setValue(0);
          }}>
          My Radio 1
      </IconRadioButton>
  
      <IconRadioButton
          groupName="my-group"
          title="My Title 2"
          checked={ myValue === 1 }
          onChange={ () => {
            setValue(1);
          }}>
        My Radio 2
      </IconRadioButton>
  
  </IconRadioButtonGroup>
  

• Color Picker

  export interface IColorPicker {
      color: string;
      setColor?: Function;
      children?: React.ReactNode;
      classes?: string;
  }
  

  <ColorPicker classes="m-4" color={ color } setColor={ setColor }>
      Color
  </ColorPicker>
  

• Numbers TextBox

  export interface INumberTextBox {
      children?: React.ReactNode;
      classes?: string;
      width?: string|number;
  
      min?: number | string;
      max?: number | string;
      step?: number | string;
      decimalPlaces?: number;
      removeRegex?: RegExp;
  
      value?: number | string;
      setValue?: Function;
  }
  

  <NumberTextBox classes="m-4" width="100px" value={ size } setValue={ setSize }>
      Size
  </NumberTextBox>
  

Images

• Framed Image

  export interface IFramedImage {
      children?: React.ReactNode;
      classes?: string;
      width?: string|number;
      height?: string|number;
  }
  

  <FramedImage width={ '500px' } height={ '270px' } classes="mx-auto">...</FramedImage>
  

Menus

• Vertical Icons Menu

  export interface IVIconsMenu {
      children?: React.ReactNode;
      classes?: string;
  }
  
  export interface IVIconsMenuButton {
    children?: React.ReactNode;
    classes?: string;
    title?: string;
    selected?: boolean;
    onClick?: Function;
  }
  
  export interface IVIconsMenuLogo {
    href?: string;
    children?: React.ReactNode;
    classes?: string;
    title?: string;
  }
  

  <VIconsMenu>
  
      <div className="flex">
          <HamburgerButton />
  
          <VIconsMenuLogo href="/">
              <svg>...</svg>
          </VIconsMenuLogo>
      </div>
  
      <HSplitter classes="mb-4" />
  
      <VIconsMenuButton title="Image Size" selected={ true }>
        <svg>...</svg>
      </VIconsMenuButton>
    
      ...
  
  </VIconsMenu>
  

• Mobile Menu

  export interface ICloseMobileMenuButton {
      classes?: string;
  }
  
  export interface IHamburgerButton {
    classes?: string;
  }
  

Panels

• Panel

  export interface IPanel {
      children?: React.ReactNode;
      classes?: string;
      slideOnMobile?: boolean;
  }
  
  export interface IPanelTitle {
    classes?: string;
    children?: React.ReactNode;
  }
  

  <Panel slideOnMobile={ true }>
      <PanelTitle>
          Stripes
          <CloseMobileMenuButton />
      </PanelTitle>
      <HSplitter />
  
      ...
  </Panel>
  

SideBars

• SideBar

  export interface ISideBar {
      children?: React.ReactNode;
      classes?: string;
  }
  

  <SideBar>...</SideBar>