Dash: A tiny, powerful, framework-agnostic CSS-in-JS library

A tiny, powerful, framework-agnostic CSS-in-JS library

Your next design system starts hereCombining the simplicity of CSS with the versatility of JavaScript, Dash contains all of the tools necessary for rapid, scalable UI development

StylesCSS Variables

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 👋 Hi friend, you can edit me :)
const button = styles({
  // The object in this callback is a mapping to CSS variables, 
  // editable in the right tab above
  default: ({radius}) => `
    display: inline-block;
    border: none;
    background: transparent;
    padding: 0.5rem 1rem;
    font-weight: 700;
    border-radius: ${radius.primary};
    &:active {
      transform: translateY(1px);
    }
  `,
  solid: ({color, elevation}) => `
    box-shadow: ${elevation.resting};
    background-color: ${color.brand};
    color: ${color.white};
  `,
  outline: ({color}) => `
    box-shadow: inset 0 0 0 1px ${color.brand};
    color: ${color.brand};
  `
})
const container = styles.one(({gap}) => `
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
styles.variables({
  color: {
    brand: '#ee5b5f',
    white: '#fafafa',
  },
  elevation: {
    resting: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
  },
  radius: {
    primary: '4px',
  },
  gap: {
    sm: '4px',
    md: '8px',
    lg: '16px',
  },
})
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX