{"id":22873947,"url":"https://github.com/angleprotocol/dappkit","last_synced_at":"2025-07-05T01:36:41.655Z","repository":{"id":266507970,"uuid":"854631956","full_name":"AngleProtocol/dappkit","owner":"AngleProtocol","description":"🧰 React Component Kit for developing dApps","archived":false,"fork":false,"pushed_at":"2025-04-30T13:58:11.000Z","size":151852,"stargazers_count":1,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-30T15:08:11.617Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AngleProtocol.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-09-09T14:10:56.000Z","updated_at":"2025-04-29T12:30:27.000Z","dependencies_parsed_at":"2024-12-26T18:26:41.670Z","dependency_job_id":"554b782d-8c87-40cf-8d42-ce4604aed103","html_url":"https://github.com/AngleProtocol/dappkit","commit_stats":null,"previous_names":["angleprotocol/dappkit"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AngleProtocol/dappkit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AngleProtocol%2Fdappkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AngleProtocol%2Fdappkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AngleProtocol%2Fdappkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AngleProtocol%2Fdappkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AngleProtocol","download_url":"https://codeload.github.com/AngleProtocol/dappkit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AngleProtocol%2Fdappkit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263644316,"owners_count":23493899,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-13T14:31:55.859Z","updated_at":"2025-07-05T01:36:41.615Z","avatar_url":"https://github.com/AngleProtocol.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n## License\n\nThis project is licensed under the **BSD 3-Clause License with Specific Usage Restrictions**.\n\n### Key Terms\n\n- **Permitted Use**: This software may only be used to develop applications (frontend or backend) that directly interface with the Merkl incentive distribution solution.\n- **Prohibited Uses**:\n  - Developing standalone applications unrelated to the original backend.\n  - Creating competitive backend services or applications.\n  - Reverse engineering the core backend logic.\n  - Developing alternative backend implementations.\n- **Commercial Use**: Commercial use of this software, including incorporating it into paid products or services, is **strictly prohibited without prior written approval** from Angle Labs, Inc. For inquiries regarding commercial use, contact [contact@merkl.xyz](contact@merkl.xyz)\n\n### Full License\n\nFor detailed terms and conditions, refer to the [`LICENSE`](./LICENSE) file in this repository.\n\n\n# Welcome to Merkl's DappKit !\n\nA component library designed to quickly create customizable and accessible user interfaces for EVM decentralized applications.\n\nBuilt upon [React](https://react.dev/), [Tailwind](https://tailwindcss.com/) + [Variants](https://www.tailwind-variants.org/), [Radix Primitives](https://www.radix-ui.com/primitives) and [Wagmi](https://wagmi.sh/react/getting-started).\n\n## Concept\n\nThe DappKit theme exposes 3 scales of 12 colors that can be customized using the Radix Colors guidelines:\n\n### Tailwind Variables\n\nTo be able to define some component styling with abstract colors, we define scales of 12 colors and use them according to the [radix color guidelines](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale):\n\n![image](https://github.com/user-attachments/assets/67109bff-eb4c-43a6-8e5a-7f50773dcc65)\n\nRadix also provides a way to generate appropriates scales from a single color ([preview](https://www.radix-ui.com/colors/custom)), we can then make the configuration only be one color per scale. Instead of defining tailwind color classes with colors, we map them to css variables (`bg-main-2: 'var(--main-2)'`), which gives us room to add a variable declaration later on to assign a color to that class.\n\n![image](https://github.com/user-attachments/assets/6c38d21c-0b5e-4c2a-ac0d-5f46fb0050ce)\n\n### Tailwind Variants\n\nOnce we have access to variables through tailwind classes, for each component we can define variants, and map each one to tailwind classes thanks to the [tailwind-variants](https://www.tailwind-variants.org/docs/variants) library.\n\n![image](https://github.com/user-attachments/assets/5e64ace6-c88e-4d8f-b6a7-c9f16521c70f)\n\nThanks to some generic typing and utility functions we can elegantly define components:\n\n```tsx\nimport { mergeClass } from 'src/utils/css'\nimport type { Component, Styled } from 'src/utils/types'\nimport { tv } from 'tailwind-variants'\n\nexport const buttonStyles = tv({\n  base:\n    'text-main-11 flex items-center   border-1 outline-offset-0 outline-0 text-nowrap',\n  variants: {\n    look: {\n      base:\n        'bg-main-4 border-main-7 hover:bg-main-5 active:bg-main-3 text-main-12 focus-visible:border-main-9',\n      soft:\n        'bg-main-0 border-main-0 hover:bg-main-4 active:bg-main-3 hover:text-main-12  focus-visible:border-main-9',\n      bold:\n        'bg-accent-4 border-accent-6 hover:bg-accent-5 active:bg-accent-3 text-main-12 focus-visible:border-accent-9',\n      hype:\n        'bg-accent-9 border-accent-6 hover:bg-accent-10 active:bg-accent-8 text-accent-12 focus-visible:border-accent-10',\n    },\n    size: {\n      xs: 'px-2 py-1 text-xs rounded',\n      sm: 'px-3 py-2 text-sm rounded-sm',\n      md: 'px-4 py-3 text-md rounded-md',\n      lg: 'px-5 py-4 text-lg rounded-lg',\n      xl: 'px-6 py-5 text-xl rounded-xl',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    look: 'base',\n  },\n})\n\nexport type ButtonProps = Component\u003c\n  Styled\u003ctypeof buttonStyles\u003e,\n  HTMLButtonElement\n\u003e\n\nexport default function Button({\n  look,\n  size,\n  className,\n  ...props\n}: ButtonProps) {\n  return (\n    \u003cbutton\n      className={mergeClass(buttonStyles({ look, size }), className)}\n      {...props}\n      type=\"button\"\n    /\u003e\n  )\n}\n```\n\nWe then use them in the code in an abstract manner, the configuration of the theme and the variables will take care of styling it:\n\n```tsx\nfunction AnAbstractedButton() {\n  return (\n    \u003cButton size=\"lg\" look=\"hype\"\u003e\n      Explore opportunities\n    \u003c/Button\u003e\n  )\n}\n```\n\n### Sizing\n\nWe use a straightforward scale for every sizing variable: `xs, sm, md, lg, xl` that applies to radius, padding, gaps... The border radius also has a composed scale to be able to create boxes that perfectly wrap their content: `xs+sm, xs+md, xs+lg...`.\n\n## Usage\n\nAs of now, DappKit can be used as a submodule. It exposes the .ts sources directly from the package. Our preferred way of intergrating the dappkit is through git submodules \u0026 workspaces:\n\nAdd the submodule into `packages/` in your repository:\n\n```bash\ngit submodule add https://github.com/AngleProtocol/dappkit packages/dappkit\n```\n\nConfigure workspaces in yout `package.json`\n\n```jsonc\n{\n  \"workspaces\": [\"packages/*\"]\n  //...\n}\n```\n\nUpdate your packages (`bun i`), you will see `+ dappkit@workspace:packages/dappkit`, the package is now installed as `dappkit`:\n\n```ts\nimport { Button } from 'dappkit'\n```\n\nTo import the tailwind config:\n\n```ts\n//tailwind.config.ts\nimport { generateTailwindConfig } from \"dappkit/src/utils/tailwind\";\nimport type { Config } from \"tailwindcss\";\n\nexport default {\n\tcontent: [\"./{app,src,packages}/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}\"],\n\ttheme: generateTailwindConfig(),\n\tplugins: [],\n} satisfies Config;\n```\n\n## Development\n\nYou can preview and develop component using the included [Remix](https://remix.run/) app.\n\n```shellscript\nnpm run dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangleprotocol%2Fdappkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangleprotocol%2Fdappkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangleprotocol%2Fdappkit/lists"}