You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Go to file

Juan Olvera 35d2c49313 0.1.2		11 months ago
.storybook	feat: new components and a example	11 months ago
src	fix: remove unused prop	11 months ago
.babelrc.json	first commit	12 months ago
.buildpacks	first commit	12 months ago
.gitignore	first commit	12 months ago
.npmignore	first commit	12 months ago
.npmrc	add registry	11 months ago
README.md	first commit	12 months ago
jest.config.js	first commit	12 months ago
package-lock.json	0.1.2	11 months ago
package.json	0.1.2	11 months ago
static.json	first commit	12 months ago
tailwind.config.js	feat: new components and a example	11 months ago
tsconfig.json	first commit	12 months ago
tsup.config.ts	first commit	12 months ago

README.md

Ew UI

Probably the most opinionated React UI library.

Type of pages

App pages. Pages behind the login.
Public pages. Pages accessible to everyone.

Dashboard

You build your own Dashboard using the DashboardContent component and the sidebar, like so:

function Dashboard() {
  return (
    <>
      <Sidebar />
      <DashboardContent />
    </>
  )
}

Color palette

You need to define these values:

"ew-primary": {
  DEFAULT: "#7F5aF0",
},
"ew-accent": {
  DEFAULT: "#444652",
},
"ew-text": {
  DEFAULT: "#333",
},
"ew-text-light": {
  DEFAULT: "#fff",
},
"ew-link": {
  DEFAULT: "#006bb8",
},
"ew-success": {
  DEFAULT: "#12E999",
},
"ew-warning": {
  DEFAULT: "#FBBD23",
},
"ew-error": {
  DEFAULT: "#BD271E",
},
"ew-bg": {
  DEFAULT: "#fff",
},
"ew-bg-dark": {
  DEFAULT: "#333",
}

Then, generate the shades for each color using https://www.tints.dev/ and fill the objects as:

"ew-primary": {
  DEFAULT: "#7F5aF0",
  50: "#F1ECFD",
  100: "#E6DEFC",
  200: "#CCBEF9",
  300: "#B39DF6",
  400: "#9A7CF3",
  500: "#7F5AF0",
  600: "#521FEB",
  700: "#3A11B6",
  800: "#270B7A",
  900: "#13063D",
  950: "#09031C",
},
"ew-accent": {
  DEFAULT: "#444652",
  50: "#E9EAF1",
  100: "#D0D2E2",
  200: "#A1A4C4",
  300: "#757AA9",
  400: "#505581",
  500: "#333652",
  600: "#292C42",
  700: "#1F2132",
  800: "#14151F",
  900: "#0A0A10",
  950: "#060609",
},
"ew-text": {
  DEFAULT: "#333",
  50: "#EBEBEB",
  100: "#D6D6D6",
  200: "#ADADAD",
  300: "#858585",
  400: "#5C5C5C",
  500: "#333333",
  600: "#292929",
  700: "#1F1F1F",
  800: "#141414",
  900: "#0A0A0A",
  950: "#050505",
},
"ew-text-light": {
  DEFAULT: "#fff",
  50: "#FFFFFF",
  100: "#FFFFFF",
  200: "#FFFFFF",
  300: "#FFFFFF",
  400: "#FFFFFF",
  500: "#FFFFFF",
  600: "#CCCCCC",
  700: "#999999",
  800: "#666666",
  900: "#333333",
  950: "#1A1A1A",
},
"ew-link": {
  DEFAULT: "#006bb8",
  50: "#E0F2FF",
  100: "#BDE3FF",
  200: "#7AC8FF",
  300: "#3DAEFF",
  400: "#0092FA",
  500: "#006BB8",
  600: "#005694",
  700: "#004170",
  800: "#002A47",
  900: "#001524",
  950: "#000C14",
},
"ew-success": {
  DEFAULT: "#12E999",
  50: "#E7FDF5",
  100: "#D0FBEB",
  200: "#A0F8D8",
  300: "#71F4C4",
  400: "#3DF0AE",
  500: "#12E999",
  600: "#0EB97A",
  700: "#0B8E5E",
  800: "#075F3F",
  900: "#042F1F",
  950: "#021810",
},
"ew-warning": {
  DEFAULT: "#FBBD23",
  50: "#FFF9EB",
  100: "#FEF2D2",
  200: "#FDE4A5",
  300: "#FDD87D",
  400: "#FCCB50",
  500: "#FBBD23",
  600: "#E1A304",
  700: "#AA7B03",
  800: "#6E5002",
  900: "#372801",
  950: "#1E1601",
},
"ew-error": {
  DEFAULT: "#BD271E",
  50: "#FBE6E5",
  100: "#F7D1CF",
  200: "#EF9E9A",
  300: "#E77069",
  400: "#DF3D35",
  500: "#BD271E",
  600: "#961E18",
  700: "#721712",
  800: "#4B0F0C",
  900: "#280806",
  950: "#120403",
},
"ew-bg": {
  DEFAULT: "#fff",
  50: "#FFFFFF",
  100: "#FFFFFF",
  200: "#FFFFFF",
  300: "#FFFFFF",
  400: "#FFFFFF",
  500: "#FFFFFF",
  600: "#CCCCCC",
  700: "#999999",
  800: "#666666",
  900: "#333333",
  950: "#1A1A1A",
},
"ew-bg-dark": {
  DEFAULT: "#333",
  50: "#EBEBEB",
  100: "#D6D6D6",
  200: "#ADADAD",
  300: "#858585",
  400: "#5C5C5C",
  500: "#333333",
  600: "#292929",
  700: "#1F1F1F",
  800: "#141414",
  900: "#0A0A0A",
  950: "#050505",
},

Resources: