⋆⁺｡☆ Darkly ☆｡⁺⋆

Dark React Starter Template + UI Kit.

!Darkly Preview

Features

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

Usage

1. First install the module from npm:

``shell
npm i darkly
`

2. Then copy one of the templates.

3. Import CSS file:

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

Components

Bars


- Top Bar
`ts
export interface ITopBar {
children?: React.ReactNode;
classes?: string;
style?: CSSProperties;
}
`

`tsx
...
`
- Bottom Bar
`ts
export interface IBottomBar {
children?: React.ReactNode;
classes?: string;
style?: CSSProperties;
}
`

`tsx
...
`

Boxes

- Stretch Box

`ts
export interface IStretchBox {
children?: React.ReactNode;
classes?: string;
style?: CSSProperties;
}
`

`tsx
...
`


Buttons

- Button

`ts
export enum EButtonType {
Primary = 1,
OutlinePrimary = 2,
Secondary = 3,
OutlineSecondary = 4,
}

export interface IButton {
children?: React.ReactNode;
classes?: string;
style?: CSSProperties;
type?: EButtonType;
onClick?: Function;
}
`

`tsx
Reset
`



Dividers

- Horizontal Splitter

`ts
export interface IHSplitter {
classes?: string;
style?: CSSProperties;
}
`

`tsx

`

Form

- Buttons Group

`ts
export interface IButtonsGroup {
children?: React.ReactNode;
classes?: string;
style?: CSSProperties;
}

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

`tsx

{
setMyValue(0);
}}>My Value 1

{
setMyValue(1);
}}>My Value 2

{
setMyValue(2);
}}>My Value 3

`

- Icons Radio Buttons

`ts
export interface IIconRadioButtonGroup {
children?: React.ReactNode;
classes?: string;
style?: CSSProperties;
}

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

`tsx

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


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



`

- Color Picker

`ts
export interface IColorPicker {
color: string;
setColor?: Function;
children?: React.ReactNode;
classes?: string;
style?: CSSProperties;
popupPosition?: string;
buttonWidth?: string;
buttonHeight?: string;
buttonPadding?: string;
}
`

`tsx

Color

`

- Numbers TextBox

`ts
export interface INumberTextBox {
children?: React.ReactNode;
classes?: string;
style?: CSSProperties;
width?: string|number;

min?: number | string;
max?: number | string;
step?: number | string;
decimalPlaces?: number;
removeRegex?: RegExp;

value?: number | string;
setValue?: Function;
}
`

`tsx

Size

`

Images

- Framed Image

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

`tsx
...
`

Menus

- Vertical Icons Menu

`ts
export interface IVIconsMenu {
children?: React.ReactNode;
classes?: string;
style?: CSSProperties;
}

export interface IVIconsMenuButton {
children?: React.ReactNode;
classes?: string;
style?: CSSProperties;
title?: string;
selected?: boolean;
onClick?: Function;
}

export interface IVIconsMenuLogo {
href?: string;
children?: React.ReactNode;
classes?: string;
style?: CSSProperties;
title?: string;
}
`

`tsx












...


`

- Mobile Menu

`ts
export interface ICloseMobileMenuButton {
classes?: string;
style?: CSSProperties;
}

export interface IHamburgerButton {
classes?: string;
style?: CSSProperties;
}
`

Panels

- Panel

`ts
export interface IPanel {
children?: React.ReactNode;
classes?: string;
style?: CSSProperties;
slideOnMobile?: boolean;
}

export interface IPanelTitle {
classes?: string;
style?: CSSProperties;
children?: React.ReactNode;
}

export interface IPanelSection {
children?: React.ReactNode;
classes?: string;
style?: CSSProperties;
fullHeight?: boolean;
scrollable?: boolean;
}
`

`tsx


Stripes








...

`



SideBars

- SideBar

`ts
export interface ISideBar {
children?: React.ReactNode;
classes?: string;
style?: CSSProperties;
}
`

`tsx
...
``