Universal and Performant Styling library

Made for React, Next.js & React Native

Solid

Outline

Button.tsx

ButtonText.tsx

App.tsx

import { styled } from "@dank-style/react"
export const Button = styled(
  Pressable,
  {
    rounded: "$lg",
    py: "$3",
    px: "$9",
    variants: {
      variant: {
        solid: { bg: "$backgroundLight100" },
        outline: {
          bg: " rgba(255, 255, 255, 0.24)",
          borderWidth: "$1",
          borderColor: "$borderLight100",
        },
      },
    },
  },
  {}
)

Highly Performant

Dank can work with Zero JavaScript when combined with Next’s SSR & SSG. Dank comes packed with a babel-plugin that brings the runtime token interpolation to zero and reduces the hydration resulting in faster runtime. We aim to reduce it further, maybe with bundler plugins in the future.

Key Features

Styling solution with universal compatibility, media query & variants.

Universal

Media Query

Variants

Theme & token

Utility & SX props

Zero JavaScript with SSR

Universal

Media Query

Variants

Theme & token

Utility & SX props

Zero JavaScript with SSR

Best-in-class DX

With the goodness of TypeScript, you get the best developer experience. The types are generated for every feature, including variants, state, sx, utility props, and tokens!

Write once, run anywhere.

Dank enhances the universal nature of React Native and extends it with features like variants and media-queries and reduces the JS runtime overhead on web wherever necessary.

<12kb gzip

Bundle Size

Zero

Runtime style calculation

All

Platforms

Token and theme

Design tokens are the values or constants needed to construct a design system. These values can represent spacing, color, typography etc. Design tokens help to achieve consistency in building user interfaces across all platforms.

Learn more

Token

Theme

const config = {
  tokens: {
    colors: {
      primary50: "#dbf4ff",
      primary100: "#addbff",
      primary200: "#7cc2ff",
      primary300: "#4aa9ff",
      primary400: "#1a91ff",
    },
    space: {
      "0": 0,
      "0.5": 2,
      "1": 4,
      "1.5": 6,
    },
    fontSizes: {
      "2xs": 10,
      xs: 12,
      sm: 14,
      md: 16,
    },
    fontWeights: {},
    fonts: {},
    borderWidths: {},
    radii: {},
  },
}

Universal

Dank offers a universal styling solution for React, Next.js, and React Native. With optimized performance, you can enjoy consistent and reliable styling across all your applications.

Learn more

Platform

Descendant Styling

function App() {
  const Box = styled(View, {
    borderRadius: "$md",
    h: "$20",
    w: "$20",
    _web: {
      bg: "$violet600",
    },
    _ios: {
      bg: "$blue600",
    },
    _android: {
      bg: "$red600",
    },
  })
  return (
    <Provider config={config}>
      <Box />
    </Provider>
  )
}

Utility Props

Utility props are a way to alter the style of a component by simply passing props to it. It helps to save time by providing helpful shorthand ways to style components.

Learn more

function App() {
  const Box = styled(View, {})
  return (
    <Provider config={config}>
      <Box bg="$cyan600" h="$20" w="$20" rounded="$md" />
    </Provider>
  )
}

Variants

Dank allows you to easily create different variations of a component with different styles. Using variant props in a UI component library allows for more flexibility and reusability of components.

Learn more

Variants

Sizes

States

function App() {
  const Button = styled(
    Pressable,
    {
      px: "$3.5",
      py: "$2.5",
      rounded: "$md",
      variants: {
        variant: {
          solid: {
            bg: "$indigo600",
            _text: {
              color: "$white",
            },
          },
          outlined: {
            bg: "transparent",
            borderWidth: "$1",
            borderColor: "$indigo500",
            _text: {
              color: "$indigo300",
            },
          },
          subtle: {
            bg: "$indigo800_50",
            _text: {
              color: "$indigo300",
            },
          },
        },
      },
      defaultProps: {
        variant: "solid",
      },
    },
    {
      descendantStyle: ["_text"],
    }
  )
  const ButtonText = styled(
    Text,
    {
      textAlign: "center",
      fontSize: "$md",
      lineHeight: "$md",
    },
    { ancestorStyle: ["_text"] }
  )
  return (
    <Provider config={config}>
      <View style={{ flexDirection: "row", gap: 16 }}>
        <Button variant="solid">
          <ButtonText>Solid</ButtonText>
        </Button>
        <Button variant="outlined">
          <ButtonText>Outlined</ButtonText>
        </Button>
        <Button variant="subtle">
          <ButtonText>Sublte</ButtonText>
        </Button>
      </View>
    </Provider>
  )
}

Media Query

Dank provides support for responsive styles through the use of media queries.

Learn more

Media Query

Color Mode

function App() {
  const Button = styled(Pressable, {
    bg: "$red500",
    p: "$3",
    rounded: "$md",
    shadow: "$4",
    ":hover": {
      bg: "$red600",
    },
    ":active": {
      bg: "$red700",
    },
    "@md": {
      bg: "$blue500",
      ":hover": {
        bg: "$blue600",
      },
      ":active": {
        bg: "$blue700",
      },
    },
  })
  const ButtonText = styled(Text, {
    color: "$textDark50",
    fontSize: "$md",
    lineHeight: "$md",
    textAlign: "center",
  })
  const [isHovered, setIsHovered] = useState(false)
  const [isActive, setIsActive] = useState(false)
  return (
    <Provider config={config}>
      <Button
        states={{ hover: isHovered, active: isActive }}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        onMouseDown={() => setIsActive(true)}
        onMouseUp={() => setIsActive(false)}
      >
        <ButtonText>Hello World</ButtonText>
      </Button>
    </Provider>
  )
}

Inspiration

This project wouldn't have been possible without the great work of community members and inspiration from these libraries.

Community

Get involved in our community. Everyone is welcome!

Twitter

Follow us on Twitter for updates and helpful tips on our community and projects.

GitHub

To file issues, request features, and contribute, check out our GitHub.

Discord

To get involved in the community, ask questions, and share tips.

Our Ecosystem

Want beautifully designed, accessible and universal components?

gluestack-ui

alpha

Looking for a full-stack framework that simplifies the process of building modern web & mobile apps?

gluestack

alpha

Meet the Creators

GeekyAnts - An OSS-loving, community-driven team of geeks!

We are a team of development experts who love open-source and solving developer problems. We've built more than 500 products for organizations across the globe ranging from startups to big enterprises!

Visit GeekyAnts