Tiger UI React is a CSS-IN-JS library. It leverages ancillary UI tools like Emotion React and allows you to easily create stylizable and flexible UI components. Tiger UI React aims to provide you with useful tools to easily create a Design System.
Install the package in your project directory with:
npm install @tiger-ui/react
yarn add @tiger-ui/react
Tiger UI React is a React.JS component tool that allows you to write your stylized components in a fast, practical and readable way. It offers powerful CSS-IN-JS support using the Emotion React library in its infrastructure. This library aims to make it easier for you to create your own design system.
- Getting Started
- Element Props
- Extending Elements
- Defaults Attributes / Props
- Children Content
- Theming
- CSSX / Custom Styling
The component logic on tiger-ui/react
is based on html elements. The simplest way to create a customizable element is as follows:
import { createElement } from '@tiger-ui/react'
const Container = createElement('div')({
style: {
padding: '6rem',
},
});
const Button = createElement('button')({
style: {
backgroundColor: 'green',
color: 'white',
border: 'none',
padding: '0.7rem 2rem',
borderRadius: '0.6rem',
cursor: 'pointer',
fontWeight: 'bold',
':hover': {
backgroundColor: 'darkgreen',
},
},
});
export default function Page() {
return (
<Container>
<Button>Click</Button>
</Container>
)
}
Output:
You can add props that change the style state of the elements you create. You can use this feature in two different ways:
Way 1
import { createElement } from '@tiger-ui/react'
const Container = createElement('div')({
style: {
padding: '6rem',
},
});
interface ButtonProps {
variant: 'contained' | 'outlined';
}
const Button = createElement('button')<ButtonProps>({
style: {
padding: '0.7rem 2rem',
borderRadius: '0.6rem',
cursor: 'pointer',
fontWeight: 'bold',
},
props: {
variant: {
contained: {
backgroundColor: 'green',
color: 'white',
border: 'none',
':hover': {
backgroundColor: 'darkgreen',
},
},
outlined: {
backgroundColor: 'transparent',
color: 'green',
border: 'solid 1px green',
},
},
},
});
export default function Page() {
return (
<Container>
<Button variant="outlined">Click</Button>
</Container>
)
}
Output:
Way 2
import { createElement } from '@tiger-ui/react'
const Container = createElement('div')({
style: {
padding: '6rem',
},
});
interface ButtonProps {
variant: 'contained' | 'outlined';
}
const Button = createElement('button')<ButtonProps>({
style: {
padding: '0.7rem 2rem',
borderRadius: '0.6rem',
cursor: 'pointer',
fontWeight: 'bold',
},
props: {
variant: (value /* prop value */) => {
// variant === outlined :
if (value === 'outlined') return {
backgroundColor: 'transparent',
color: 'green',
border: 'solid 1px green',
}
// variant === contained :
return {
backgroundColor: 'green',
color: 'white',
border: 'none',
':hover': {
backgroundColor: 'darkgreen',
},
};
},
},
});
export default function Page() {
return (
<Container>
<Button variant="outlined">Click</Button>
</Container>
)
}
Both ways used above give the same result. Depending on your use case, you can use either method.
It is also possible to assign values responsively while using the props you added.
Code
import { createElement } from '@tiger-ui/react'
const Wrapper = createElement('div')({
style: {
display: 'flex',
justifyContent: 'center',
padding: '6rem',
},
});
interface ButtonProps {
variant: 'contained' | 'outlined';
}
const Button = createElement('button')<ButtonProps>({
style: {
padding: '0.7rem 2rem',
borderRadius: '0.6rem',
cursor: 'pointer',
fontWeight: 'bold',
},
props: {
variant: {
outlined: {
backgroundColor: 'transparent',
color: 'green',
border: 'solid 1px green',
},
contained: {
backgroundColor: 'green',
color: 'white',
border: 'none',
}
},
},
});
export default function Page() {
return (
<Wrapper>
<Button
variant={{
xs: 'contained',
lg: 'outlined',
}}
>
Click
</Button>
</Wrapper>
)
}
output:
Note that the responsive values here are determined by the breakpoints in your theme. Breakpoints in the theme system use media queries in css. If you want to customize these media queries, you can update the breakpoints values in your theme according to yourself.
For more information about the theme, check here.
You can reuse a previously created element by wrapping it with createElement
and create a new element that uses the properties of that element. This method will pass the element properties to the new element and allow you to add new properties to it.
Example Code
import { createElement } from '@tiger-ui/react';
const Container = createElement('div')({
style: {
padding: '6rem',
},
});
const Button = createElement('button')({
style: {
padding: '0.7rem 2rem',
borderRadius: '0.6rem',
cursor: 'pointer',
fontWeight: 'bold',
fontSize: '15px',
backgroundColor: 'green',
color: 'white',
border: 'none',
},
});
const OutlinedButton = createElement(Button)({
style: {
backgroundColor: 'transparent',
color: 'green',
border: 'solid 1px green',
},
});
export default function Page() {
return (
<Container>
<Button cssx={{ marginRight: '1rem' }}>Default</Button>
<OutlinedButton>Outlined</OutlinedButton>
</Container>
)
}
output:
In some cases you may want to change the html tag of an element with the same properties. In this case you can use the as property.
As Prop
import { createElement } from '@tiger-ui/react'
const Container = createElement('div')({
style: {
padding: '6rem',
},
});
const Button = createElement('button')({
style: {
padding: '0.7rem 2rem',
borderRadius: '0.6rem',
cursor: 'pointer',
fontWeight: 'bold',
fontSize: '15px',
backgroundColor: 'green',
color: 'white',
border: 'none',
},
});
export default function Page() {
return (
<Container>
<Button cssx={{ marginRight: '1rem' }}>Default</Button>
<Button as="a" href="/">Link</Button>
</Container>
)
}
output:
You can use the 'defaults' value when you want to define default attributes for the elements you create.
Default Attribute Value
import { createElement } from '@tiger-ui/react'
const Container = createElement('div')({
style: {
padding: '6rem',
},
});
const Input = createElement('input')({
style: {
backgroundColor: 'green',
border: '1px solid white',
borderRadius: '5px',
padding: '0.5rem',
color: 'white',
},
defaults: {
element: {
type: 'password',
},
},
});
export default function Page() {
return (
<Container>
<Input />
</Container>
)
}
You can also use this feature for style props that you define yourself:
Default Props Value
import { createElement } from '@tiger-ui/react'
const Container = createElement('div')({
style: {
padding: '6rem',
},
});
interface InputProps {
size?: 'small' | 'medium'
}
const Input = createElement('input')<InputProps>({
style: {
backgroundColor: 'green',
border: '1px solid white',
borderRadius: '5px',
color: 'white',
'::placeholder': {
color: 'white',
},
},
props: {
size: {
small: {
padding: '0.5rem',
},
medium: {
padding: '0.8rem',
},
},
},
defaults: {
element: {
type: 'password',
},
custom: {
size: 'medium',
},
},
});
export default function Page() {
return (
<Container>
<Input placeholder="default input" cssx={{ marginRight: '1rem' }} />
<Input placeholder="small input" size="small" />
</Container>
)
}
output:
You can add a children content inside the elements you created. This children content will import all the props and attributes used in your element as in a React Component Props. This feature allows the element you create to have a more flexible UI structure.
Example Code
import { createElement } from '@tiger-ui/react'
const Container = createElement('div')({
style: {
padding: '6rem',
},
});
interface LinkProps {
color?: string;
}
const Link = createElement('a')<LinkProps>({
style: {
backgroundColor: 'green',
padding: '0.5rem',
borderRadius: '5px',
},
props: {
color: (propValue) => ({
color: propValue,
}),
},
Children: ({ href, color }) => {
return (
<span>
Link: {href} - Color: {color}
</span>
);
},
});
export default function Page() {
return (
<Container>
<Link href="/home" color="white" />
</Container>
)
}
output:
html output:
Tiger UI React library provides you with a theme structure and you can update this theme according to your own wishes. This theme structure allows you to style your UI components in a more organized way. This method is not mandatory because Tiger UI provides you with a default theme. However, you may want to customize it according to your own corporate identity or for any other reason.
To create a customizable theme, you must first create a theme with TigerTheme
and wrap your application with ThemeProvider.
Code
'use client'
import { ThemeProvider, TigerTheme } from "@tiger-ui/react";
const theme = new TigerTheme({
themeName: 'my-theme',
colors: {
base: {
primary: {
main: '#26dbb0',
},
},
background: {
default: '#1c1c1c',
}
},
});
export default function ThemeRegistery({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider
theme={theme}
globalStyle={{
'body': {
backgroundColor: theme.tokens.colors.background.default,
fontFamily: '"Poppins", sans-serif',
margin: 0,
},
}}
>
{children}
</ThemeProvider>
);
}
You can also define a global style in this theme wrapper.
The next step is to wrap your app with the theme component you created.
Code
import { Metadata } from "next";
import ThemeRegistery from "../lib/ThemeRegistery";
export const metadata: Metadata = {
title: "Tiger UI - Next JS App",
description: "Tiger UI Next JS App",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}): JSX.Element {
return (
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
</head>
<body>
<ThemeRegistery>
{children}
</ThemeRegistery>
</body>
</html>
);
}
Now you are ready to use your theme. Let's make an example:
Code
import { createElement } from '@tiger-ui/react'
const Container = createElement('div')({
style: {
padding: '6rem',
},
});
interface LinkProps {
size?: 'small' | 'medium';
}
const Link = createElement('a')<LinkProps>({
style: ({ theme }) => ({
backgroundColor: theme.colors.base.primary.main,
color: theme.colors.base.primary.contrast,
transition: `opacity ${theme.transitions.duration.mid} ${theme.transitions.easing.ease}`,
display: 'inline-block',
':hover': {
opacity: theme.opacities.values.lg,
},
}),
props: {
size: {
small: ({ theme }) => ({
borderRadius: theme.radius.values.sm,
padding: '0.5rem',
}),
medium: ({ theme }) => ({
borderRadius: theme.radius.values.xl,
padding: '0.8rem',
}),
},
},
});
export default function Page() {
return (
<Container>
<Link href="/" size="small" cssx={{ marginRight: '1rem' }}>
Click Here
</Link>
<Link href="/" size="medium">
Click Here
</Link>
</Container>
)
}
output:
Even if you do not create a theme, there is a predefined theme by default.
You can review the default theme here:
Tokens
{
themeName: "",
shadows: {
values: {
none: "none",
xs: "0 0 45px rgba(0, 0, 0, 0.1)",
sm: "0 0 45px rgba(0, 0, 0, 0.3)",
md: "0 0 45px rgba(0, 0, 0, 0.5)",
lg: "0 0 45px rgba(0, 0, 0, 0.8)",
xl: "0 0 45px rgba(0, 0, 0, 1)"
}
},
breakpoints: {
keys: [
"xs",
"sm",
"md",
"lg",
"xl",
"xxl"
],
values: {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1400
},
unit: "px"
},
colors: {
common: {
black: "#000000",
white: "#ffffff"
},
grey: {
50: "#fafafa",
100: "#f5f5f5",
200: "#eeeeee",
300: "#e0e0e0",
400: "#bdbdbd",
500: "#9e9e9e",
600: "#757575",
700: "#616161",
800: "#424242",
900: "#212121"
},
base: {
primary: {
main: "#26dbb0",
dark: "#22cfa7",
light: "#33ddb5",
contrast: "#000000"
},
secondary: {
main: "#27d86e",
dark: "#25cb67",
light: "#34da77",
contrast: "#000000"
},
error: {
main: "#d32f2f",
dark: "#c82a2a",
light: "#d63c3c",
contrast: "#ffffff"
},
info: {
main: "#0288d1",
dark: "#027fc2",
light: "#0293e0",
contrast: "#ffffff"
},
warning: {
main: "#ed6c02",
dark: "#de6502",
light: "#fc7302",
contrast: "#000000"
}
},
baseColorsOptions: {},
text: {
primary: "rgba(0, 0, 0, 0.87)",
secondary: "rgba(0, 0, 0, 0.6)",
disabled: "rgba(0, 0, 0, 0.38)"
},
divider: "rgba(0, 0, 0, 0.12)",
background: {
default: "#ffffff",
layer: "#E2E2E2"
},
actions: {
disabled: "rgba(255, 255, 255, 0.3)",
disabledBackground: "rgba(255, 255, 255, 0.12)"
}
},
radius: {
values: {
none: "0px",
xs: "2px",
sm: "4px",
md: "6px",
lg: "8px",
xl: "10px",
xxl: "12px",
full: "50px"
}
},
fonts: {
roboto: "Roboto",
poppins: "Poppins",
montserrat: "Montserrat"
},
opacities: {
values: {
hidden: 0,
xs: 0.15,
sm: 0.3,
md: 0.5,
lg: 0.7,
xl: 0.85,
visible: 1,
disabled: 0.5
}
},
typography: {
h1: {
fontSize: "48px",
fontWeight: 500,
lineHeight: 1.25
},
h2: {
fontSize: "36px",
fontWeight: 500,
lineHeight: 1.3
},
h3: {
fontSize: "30px",
fontWeight: 500,
lineHeight: 1.375
},
h4: {
fontSize: "24px",
fontWeight: 500,
lineHeight: 1.375
},
h5: {
fontSize: "20px",
fontWeight: 500,
lineHeight: 1.375
},
h6: {
fontSize: "16px",
fontWeight: 500,
lineHeight: 1.625
},
paragraph: {
fontSize: "15px",
fontWeight: 300,
lineHeight: 1.3
}
},
transitions: {
duration: {
slow: "0.7s",
mid: "0.3s",
fast: "0.1s"
},
easing: {
ease: "ease",
easeIn: "ease-in",
easeInOut: "ease-in-out",
easeOut: "ease-out",
moment: "cubic-bezier(0, 1.63, 0.56, 1.85)"
}
}
}
You may also need to use dark, light and contrast colors of the colors you will use in the theme from time to time. Especially when developing a design system, for example, you may want a button you have created to take on a darker color when hovered over.
When you create your theme, the dark, light and contrast colors of all the main
colors you add to colors.base
are created automatically. You can customize these colors yourself if you wish.
Code
const theme = new TigerTheme({
themeName: 'my-theme',
colors: {
base: {
primary: {
main: '#26dbb0',
contrast: '#000000',
dark: '#22cfa7',
light: '#33ddb5',
},
secondary: {
main: '#27d86e',
contrast: '#000000',
dark: '#25cb67',
light: '#34da77',
},
},
},
});
You can follow a path like below to use the colors in the theme you created:
Code
const Button = createElement('button')({
style: ({ theme }) => ({
backgroundColor: theme.colors.base.primary.main,
color: theme.colors.base.primary.contrast,
padding: '1rem 1.3rem',
border: 'none',
borderRadius: '5px',
fontSize: '15px',
fontWeight: 'bold',
cursor: 'pointer',
':hover': {
backgroundColor: theme.colors.base.primary.dark,
},
}),
});
output:
Also, when defining your colors, if you want other color types to be created by default, just define the main
color:
Code
const theme = new TigerTheme({
themeName: 'my-theme',
colors: {
base: {
primary: {
main: '#26dbb0',
},
secondary: {
main: '#27d86e',
},
},
},
});
console output:
We have also provided some options that allow you to customize the dark, light and contrast values of the colors. For example, you can adjust the darkness of your dark color. Or if your contrast color is close to white, you can also customize this white color.
Example Code
const theme = new TigerTheme({
themeName: 'my-theme',
colors: {
base: {
primary: {
main: '#26dbb0',
},
secondary: {
main: '#27d86e',
},
},
baseColorsOptions: {
primary: {
darkColorIntensity: 20, // %20 (default: %3)
contrastDarkValue: '#022d23',
},
},
},
});
output:
You can use the links below to learn more about @tiger-ui/color-palette-generator
and @tiger-ui/contrast-color
:
When creating a theme, you may want to consider adding your own values in addition to the default values.
If you are working in a typescript project, to add your own values you need to declare it to the default theme.
The following section contains the type values of the default theme. You can update the theme key you want to update in your project according to the type values here:
Default Theme Types
import type { RequiredKeyOnly } from '@tiger-ui/utils'
import type { Breakpoints, BreakpointsOptions } from './createBreakpoints'
// --- SHADOW --- //
export interface ShadowsValues {
none: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
};
export interface Shadows {
values: ShadowsValues;
};
// --- COLORS --- //
// - Common Colors
export interface CommonColors {
black: string;
white: string;
};
// - Grey Colors
export interface GreyColors {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
// - Text Colors
export interface TextColors {
primary: string;
secondary: string;
disabled: string;
};
// - Background Colors
export interface BackgroundColors {
default: string;
layer: string;
};
// - Actions Colors
export interface ActionsColors {
disabled: string;
disabledBackground: string;
}
// - Base Colors
export interface BaseColorsTypes {
main: string;
dark: string;
light: string;
contrast: string;
}
export interface BaseColors {
primary: BaseColorsTypes;
secondary: BaseColorsTypes;
error: BaseColorsTypes;
warning: BaseColorsTypes;
info: BaseColorsTypes;
}
// --- RADIUS --- //
// - Values
export interface RadiusValues {
none: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
full: string;
};
export interface Radius {
values: RadiusValues;
}
// --- FONTS --- //
export interface Fonts {
[key: string]: string;
}
// --- OPACITIES --- //
// - Values
export interface OpacitiesValues {
hidden: number;
xs: number;
sm: number;
md: number;
lg: number;
xl: number;
visible: number;
disabled: number;
}
export interface Opacities {
values: OpacitiesValues;
}
// --- TYPOGRAPHY --- //
export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'paragraph';
export type TypographiesVariants = Record<
TypographyVariant,
{
fontSize: string;
fontWeight: number;
lineHeight: number;
}
>
export interface Typographies extends TypographiesVariants {}
// --- TRANSITIONS --- //
// - Durations
export interface TransitionsDurations {
slow: string;
mid: string;
fast: string;
}
// - Easing
export interface TransitionsEasing {
easeInOut: string;
easeOut: string;
easeIn: string;
ease: string;
moment: string;
}
export interface Transitions {
duration: TransitionsDurations;
easing: TransitionsEasing;
}
// --- THEME --- //
export interface Theme {
themeName: string;
shadows: Shadows;
breakpoints: Breakpoints;
colors: {
common: CommonColors;
grey: GreyColors;
text: TextColors;
divider: string;
background: BackgroundColors;
actions: ActionsColors;
base: BaseColors;
};
radius: Radius;
fonts: Fonts;
opacities: Opacities;
typography: Typographies;
transitions: Transitions;
};
/**
* Theme values entered by the user.
*/
export interface ThemeOptions {
themeName?: string;
shadows?: Shadows;
breakpoints?: BreakpointsOptions;
colors?: Partial<{
common: Partial<CommonColors>;
grey: Partial<GreyColors>;
text: Partial<TextColors>;
divider: string;
background: Partial<BackgroundColors>;
actions: Partial<ActionsColors>;
base:
Partial<Record<keyof BaseColors, RequiredKeyOnly<Partial<BaseColorsTypes>, 'main'>>>
| Record<string, RequiredKeyOnly<Partial<BaseColorsTypes>, 'main'>>;
}>;
radius?: Radius;
fonts?: Fonts;
opacities?: Opacities;
typography?: Typographies;
transitions?: Transitions;
}
For example, let's add our own custom color to the base colors in our project:
import '@tiger-ui/react';
import { BaseColorsTypes } from '@tiger-ui/react';
declare module '@tiger-ui/react' {
export interface BaseColors {
apple: BaseColorsTypes;
}
}
Now, when creating a theme, we can add our own color accordingly to the type control.
Code
import { ThemeProvider, TigerTheme } from "@tiger-ui/react";
const theme = new TigerTheme({
themeName: 'my-theme',
colors: {
base: {
primary: {
main: '#26dbb0',
},
apple: {
main: '#f02416'
},
},
background: {
default: '#1c1c1c',
}
},
});
export default function ThemeRegistery({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider
theme={theme}
globalStyle={{
'body': {
backgroundColor: theme.tokens.colors.background.default,
fontFamily: '"Poppins", sans-serif',
margin: 0,
},
}}
>
{children}
</ThemeProvider>
);
}
Every element you create comes with a cssx prop defined by default. This prop allows you to quickly define css definitions on the JSX element.
This style object also supports css properties like :hover
, :focus
, :disabled
, :active
.
Code
import { createElement } from '@tiger-ui/react'
const Container = createElement('div')({
style: {
padding: '6rem',
},
});
interface LinkProps {
color?: string;
}
const Link = createElement('a')<LinkProps>({
style: {
backgroundColor: 'green',
padding: '0.5rem',
borderRadius: '5px',
display: 'inline-block'
},
props: {
color: (propValue) => ({
color: propValue,
}),
},
});
export default function Page() {
return (
<Container>
<Link
href="/"
color="white"
cssx={{
marginRight: '1rem',
cursor: 'default',
':hover': {
transform: 'scale(1.3)',
},
}}
>
Link 1
</Link>
<Link
href="/"
color="white"
>
Link 2
</Link>
</Container>
)
}
output:
You can also access the current theme values with a parameter by giving a callback value.
Code
import { createElement } from '@tiger-ui/react'
const Container = createElement('div')({
style: {
padding: '6rem',
},
});
const Div = createElement('div')({});
export default function Page() {
return (
<Container>
<Div
cssx={(theme) => ({
backgroundColor: theme.colors.base.primary.main,
fontSize: theme.typography.h5.fontSize,
borderRadius: theme.radius.values.md,
padding: '0.7rem 1rem',
})}
>
Hello World
</Div>
</Container>
)
}
output: