{"id":13406694,"url":"https://github.com/kata-ai/aksara-ui","last_synced_at":"2025-04-05T19:09:10.125Z","repository":{"id":42576931,"uuid":"133833318","full_name":"kata-ai/aksara-ui","owner":"kata-ai","description":"Aksara Design System, from Kata.ai.","archived":false,"fork":false,"pushed_at":"2023-03-06T15:47:12.000Z","size":11020,"stargazers_count":193,"open_issues_count":28,"forks_count":26,"subscribers_count":18,"default_branch":"master","last_synced_at":"2024-10-09T20:36:03.451Z","etag":null,"topics":["aksara-ui","component-library","design-system","react","typescript","ui-kit"],"latest_commit_sha":null,"homepage":"https://aksara.kata.ai/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kata-ai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-05-17T15:29:12.000Z","updated_at":"2024-08-30T16:49:20.000Z","dependencies_parsed_at":"2024-01-06T14:13:04.584Z","dependency_job_id":"b697a8f9-bd59-429f-bc65-0c0fb04a2883","html_url":"https://github.com/kata-ai/aksara-ui","commit_stats":{"total_commits":979,"total_committers":19,"mean_commits":"51.526315789473685","dds":"0.25740551583248217","last_synced_commit":"544b7a04039cd14cece375107d6d27e24d51d934"},"previous_names":["kata-ai/wicara"],"tags_count":543,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kata-ai%2Faksara-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kata-ai%2Faksara-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kata-ai%2Faksara-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kata-ai%2Faksara-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kata-ai","download_url":"https://codeload.github.com/kata-ai/aksara-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247386263,"owners_count":20930618,"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":["aksara-ui","component-library","design-system","react","typescript","ui-kit"],"created_at":"2024-07-30T19:02:36.784Z","updated_at":"2025-04-05T19:09:10.072Z","avatar_url":"https://github.com/kata-ai.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","JavaScript","A"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Aksara UI\" src=\"assets/aksara-banner.svg\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eaksara /ak·sa·ra/ noun\u003c/strong\u003e\u003cbr\u003e\n  is a system of visual symbol, usually stamped on paper or other media (stone, wood, leaf, and fabric), to express thoughts and ideas.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/kata-ai/aksara-ui/actions?query=workflow%3ACI\"\u003e\u003cimg alt=\"Build Status\" src=\"https://github.com/kata-ai/aksara-ui/workflows/CI/badge.svg\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/kata-ai/aksara-ui\"\u003e\u003cimg alt=\"codecov\" src=\"https://codecov.io/gh/kata-ai/aksara-ui/branch/next/graph/badge.svg\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://sonarcloud.io/dashboard?id=kata-ai_aksara-ui\"\u003e\u003cimg alt=\"Quality Gate Status\" src=\"https://sonarcloud.io/api/project_badges/measure?project=kata-ai_aksara-ui\u0026metric=alert_status\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://lernajs.io/\"\u003e\u003cimg alt=\"Build Status\" src=\"https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n**Aksara** is Kata.ai's design system. It contains foundations, voice and tone guidelines, component standards, and other guidelines that systematically improve quality, timeliness, and consistency to our product.\n\n**Aksara UI** is an implementation of Aksara using the React framework. It is the true implementation of Aksara in raw code form, designed to communicate with users and bring delightful experiences. Aksara UI is the designation for Aksara React components.\n\n---\n\n## Contributing\n\nAksara UI is developed by the help of developers like you! Please read our [Contributing Guidelines](CONTRIBUTING.md) to get started on developing Aksara UI.\n\nThis project is bound by a [Code of Conduct](CODE_OF_CONDUCT.md).\n\n## Usage\n\n### Prerequisites\n\nAksara UI requires `styled-components` v4+. First, install the core Aksara UI package, Aksara UI React icon library, and `styled-components`.\n\n```bash\n# yarn\n$ yarn add styled-components @aksara-ui/react @aksara-ui/icons\n\n# npm\n$ npm install --save styled-components @aksara-ui/react @aksara-ui/icons\n```\n\nThen, you will need to apply the theme provider as well as the default global styles. Wrap your app inside the `AksaraProvider` to do so.\n\n```jsx\nimport { AksaraProvider } from '@aksara-ui/react';\n\nexport default function MyApp({ children }) {\n  return \u003cAksaraProvider\u003e{children}\u003c/AksaraProvider\u003e;\n}\n```\n\nIf you would like to use additional styles for `AksaraProvider`, add the `disableInjection` prop to `AksaraProvider` and add your custom styles as follows.\n\n```jsx\nimport { css } from 'styled-components';\nimport { AksaraProvider, injectGlobalStyles } from '@aksara-ui/react';\n\nconst styles = css`\n  [data-reach-tooltip] {\n    z-index: 1;\n    pointer-events: none;\n    position: absolute;\n    padding: 0.25em 0.5em;\n    box-shadow: 2px 2px 10px hsla(0, 0%, 0%, 0.1);\n    white-space: nowrap;\n    font-size: 85%;\n    background: #f0f0f0;\n    color: #444;\n    border: solid 1px #ccc;\n  }\n`;\n\nconst { GlobalStyles } = injectGlobalStyles(styles);\n\nexport default function MyApp({ children }) {\n  return (\n    \u003cAksaraProvider disableInjection\u003e\n      \u003cGlobalStyles /\u003e\n      {children}\n    \u003c/AksaraProvider\u003e\n  );\n}\n```\n\nOnce you've applied the provider, you can use Aksara UI components in your app. See the example below.\n\n### Example\n\nAksara UI is built in React, with styling done in styled-components. To use these components, import them as follows:\n\n```jsx\n// Example for `\u003cButton /\u003e` component.\n\nimport * as React from 'react';\nimport { Button } from '@aksara-ui/react';\n\nexport default function Component() {\n  return \u003cButton\u003ePush Me\u003c/Button\u003e;\n}\n```\n\nRead the [Storybook](https://aksara-ui.now.sh/) for more examples.\n\n## Fonts\n\nWe use multiple fonts in Aksara UI:\n\n- The system font stack, for all UI elements within the platform.\n- The [**Inter**](https://rsms.me/inter/) font as our primary brand typeface.\n\n### Using brand fonts\n\nFirst, you should install the brand fonts into your project.\n\n```bash\n# yarn\n$ yarn add typeface-inter\n\n# npm\n$ npm install --save typeface-inter\n```\n\nThen, in any typography component (e.g. `Text`, `Heading`), you can use the `brand` token in `fontFamily`.\n\n```jsx\nimport * as React from 'react';\nimport { Heading } from '@aksara-ui/react';\n\nexport default function Component() {\n  return (\n    \u003cHeading scale={700} fontFamily=\"brand\"\u003e\n      Heading Text\n    \u003c/Heading\u003e\n  );\n}\n```\n\n## License\n\nAll packages in this repoare released under the [Apache 2.0 license](LICENSE). Please note that some packages (like our fonts package) may contain third-party materials with different licences. Any third-party acknowledgements are outlined on the \"Credits\" section on each package's README.\n\nCopyright (c) 2018 Kata.ai and/or contributors. All rights reserved.\n\n## Maintainers\n\n- Resi Respati ([@resir014](https://twitter.com/resir014)) – [Kata.ai](https://kata.ai)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkata-ai%2Faksara-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkata-ai%2Faksara-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkata-ai%2Faksara-ui/lists"}