{"id":40582272,"url":"https://github.com/brainstormforce/force-ui","last_synced_at":"2026-02-26T11:04:46.587Z","repository":{"id":252773128,"uuid":"826080356","full_name":"brainstormforce/force-ui","owner":"brainstormforce","description":"BSF UI components","archived":false,"fork":false,"pushed_at":"2025-09-11T09:15:28.000Z","size":30539,"stargazers_count":1,"open_issues_count":4,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-11T12:33:16.946Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"https://brainstormforce.github.io/force-ui/?path=/docs/atoms-alert--docs","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brainstormforce.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.txt","contributing":".github/CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":".github/CODE_OF_CONDUCT.md","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-07-09T04:32:08.000Z","updated_at":"2025-08-25T16:00:02.000Z","dependencies_parsed_at":"2024-09-16T08:41:52.068Z","dependency_job_id":"df2eb43b-3df1-4703-95be-b2f01e72418d","html_url":"https://github.com/brainstormforce/force-ui","commit_stats":null,"previous_names":["brainstormforce/force-ui"],"tags_count":34,"template":false,"template_full_name":null,"purl":"pkg:github/brainstormforce/force-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brainstormforce%2Fforce-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brainstormforce%2Fforce-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brainstormforce%2Fforce-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brainstormforce%2Fforce-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brainstormforce","download_url":"https://codeload.github.com/brainstormforce/force-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brainstormforce%2Fforce-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28623521,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T23:49:58.628Z","status":"online","status_checked_at":"2026-01-21T02:00:08.227Z","response_time":86,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["hacktoberfest"],"created_at":"2026-01-21T02:36:52.544Z","updated_at":"2026-02-26T11:04:46.574Z","avatar_url":"https://github.com/brainstormforce.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Getting Started - Development Repo\n\nLearn how to use @bsf/force-ui components to quickly and easily create elegant and flexible pages using Tailwind CSS.\n\n@bsf/force-ui is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - \u003ca href=\"https://tailwindcss.com/docs/installation/framework-guides?ref=bsf-force-ui\" target=\"_blank\"\u003eTailwind CSS Installation.\u003c/a\u003e\n\n\u003cbr /\u003e\n\n1. Install `@bsf/force-ui`.\n\nForce UI library can be installed using npm package manager. Since this library is still in it's alpha phase, we need to use the staging branch.\n\nUsing Force UI as a dependency in package.json -\n\n```json\n\"dependencies\": {\n  \"@bsf/force-ui\": \"git+https://github.com/brainstormforce/force-ui#1.7.9\"\n}\n```\n\nAnd run the following command to install the package -\n\n\n```bash\nnpm install\n```\n\nOr you can directly run the following command to install the package -\n\n```bash\nnpm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.7.9\n```\n\n\u003cbr /\u003e\n\n2. Once you install @bsf/force-ui you need to wrap your tailwind css configurations with the `withTW()` function coming from @bsf/force-ui/withTW.\n\n```js\nconst withTW = require( '@bsf/force-ui/withTW' );\n\nmodule.exports = withTW( {\n\tcontent: [ './src/**/*.{js, jsx}' ],\n\ttheme: {\n\t\textend: {\n\t\t\tcolors: {\n\t\t\t\t'button-primary': '#6B21A8',\n\t\t\t\t'button-primary-hover': '#7E22CE',\n\t\t\t\t'brand-800': '#6B21A8',\n\t\t\t\t'brand-50': '#FAF5FF',\n\t\t\t\t'border-interactive': '#6B21A8',\n\t\t\t\tfocus: '#9333EA',\n\t\t\t\t'focus-border': '#D8B4FE',\n\t\t\t\t'toggle-on': '#6B21A8',\n\t\t\t\t'toggle-on-border': '#C084FC',\n\t\t\t\t'toggle-on-hover': '#A855F7',\n\t\t\t},\n\t\t\tfontSize: {\n\t\t\t\txxs: '0.6875rem', // 11px\n\t\t\t},\n\t\t\tlineHeight: {\n\t\t\t\t2.6: '0.6875rem', // 11px\n\t\t\t},\n\t\t\tboxShadow: {\n\t\t\t\t'content-wrapper':\n\t\t\t\t\t'0px 1px 1px 0px #0000000F, 0px 1px 2px 0px #0000001A',\n\t\t\t},\n\t\t},\n\t},\n\tplugins: [],\n\tcorePlugins: {\n\t\tpreflight: false,\n\t},\n\timportant: '.surerank-styles',\n} );\n```\n\n\u003cbr /\u003e\n\n3. @bsf/force-ui comes with a default tailwind theme settings that set's the default theme/styles for components or to provide your own theme/styles to your components. You can override these give below variables in your tailwind.config.js file.\n\n```jsx\ntheme: {\n  extend: {\n    colors: {\n      // brand\n      'brand-background-50': '#EFF6FF',\n      'brand-background-hover-100': '#DBEAFE',\n      'brand-200': '#BFDBFE',\n      'brand-border-300': '#93C5FD',\n      'brand-400': '#60A5FA',\n      'brand-500': '#3B82F6',\n      'brand-primary-600': '#2563EB',\n      'brand-hover-700': '#1D4ED8',\n      'brand-800': '#1E40AF',\n      'brand-900': '#1E3A8A',\n      'brand-text-950': '#172554',\n      // background\n      'background-primary': '#FFFFFF',\n      'background-secondary': '#F3F4F6',\n      'background-inverse': '#111827',\n      'background-brand': '#2563EB',\n      'background-important': '#DC2626',\n      // field\n      'field-primary-background': '#F9FAFB',\n      'field-secondary-background': '#FFFFFF',\n      'field-primary-hover': '#F3F4F6',\n      'field-secondary-hover': '#F3F4F6',\n      'field-dropzone-background': '#FFFFFF',\n      'field-border': '#E5E7EB',\n      'field-dropzone-background-hover': '#F9FAFB',\n      'field-dropzone-color': '#2563EB',\n      'field-label': '#111827',\n      'field-input': '#111827',\n      'field-helper': '#9CA3AF',\n      'field-background-disabled': '#F9FAFB',\n      'field-color-disabled': '#D1D5DB',\n      'field-placeholder': '#6B7280',\n      'field-border-disabled': '#F3F4F6',\n      'field-color-error': '#DC2626',\n      'field-border-error': '#FECACA',\n      'field-background-error': '#FEF2F2',\n      'field-required': '#DC2626',\n      // border\n      'border-interactive': '#2563EB',\n      'border-subtle': '#E5E7EB',\n      'border-strong': '#6B7280',\n      'border-inverse': '#374151',\n      'border-disabled': '#E5E7EB',\n      'border-muted': '#E5E7EB',\n      'border-error': '#DC2626',\n      'border-transparent-subtle': '#37415114',\n      'border-white': '#FFFFFF',\n      // text\n      'text-primary': '#111827',\n      'text-secondary': '#4B5563',\n      'text-tertiary': '#9CA3AF',\n      'text-on-color': '#FFFFFF',\n      'text-error': '#DC2626',\n      'text-error-inverse': '#F87171',\n      'text-inverse': '#FFFFFF',\n      'text-disabled': '#D1D5DB',\n      'text-on-button-disabled': '#9CA3AF',\n      // link\n      'link-primary': '#2563EB',\n      'link-primary-hover': '#1D4ED8',\n      'link-inverse': '#38BDF8',\n      'link-visited': '#7C3AED',\n      'link-visited-inverse': '#A78BFA',\n      'link-inverse-hover': '#7DD3FC',\n      // icon\n      'icon-primary': '#111827',\n      'icon-secondary': '#4B5563',\n      'icon-on-color': '#FFFFFF',\n      'icon-inverse': '#FFFFFF',\n      'icon-interactive': '#2563EB',\n      'icon-on-color-disabled': '#9CA3AF',\n      'icon-disabled': '#D1D5DB',\n      // support\n      'support-error': '#DC2626',\n      'support-success': '#16A34A',\n      'support-warning': '#EAB308',\n      'support-info': '#0284C7',\n      'support-error-inverse': '#F87171',\n      'support-success-inverse': '#4ADE80',\n      'support-warning-inverse': '#FDE047',\n      'support-info-inverse': '#38BDF8',\n      // button\n      'button-primary': '#2563EB',\n      'button-primary-hover': '#1D4ED8',\n      'button-secondary': '#1F2937',\n      'button-secondary-hover': '#374151',\n      'button-tertiary': '#FFFFFF',\n      'button-tertiary-hover': '#F9FAFB',\n      'button-danger': '#DC2626',\n      'button-danger-secondary': '#DC2626',\n      'button-danger-hover': '#B91C1C',\n      'button-disabled': '#F3F4F6',\n      'button-tertiary-border': '#E5E7EB',\n      'button-tertiary-color': '#111827',\n      // focus\n      focus: '#2563EB',\n      'focus-inset': '#FFFFFF',\n      'focus-inverse': '#38BDF8',\n      'focus-inverse-inset': '#111827',\n      'focus-error': '#DC2626',\n      'focus-border': '#BFDBFE',\n      'focus-error-border': '#FECACA',\n      // misc\n      'misc-highlight': '#BFDBFE',\n      'misc-overlay': '#11182780',\n      'misc-skeleton-background': '#F3F4F6',\n      'misc-skeleton-element': '#D1D5DB',\n      'misc-popup-button-hover': '#1118270D',\n      'misc-tab-item-hover': '#E5E7EB',\n      'misc-dropdown-hover': '#F3F4F6',\n      'misc-loader-base': '#1118270D',\n      'misc-loader-color': '#2563EB',\n      'misc-progress-background': '#E5E7EB',\n      // badge\n      'badge-background-gray': '#F9FAFB',\n      'badge-color-gray': '#1F2937',\n      'badge-hover-gray': '#F3F4F6',\n      'badge-border-gray': '#E5E7EB',\n      'badge-background-red': '#FEF2F2',\n      'badge-color-red': '#B91C1C',\n      'badge-hover-red': '#FEE2E2',\n      'badge-border-red': '#FECACA',\n      'badge-background-yellow': '#FEFCE8',\n      'badge-color-yellow': '#A16207',\n      'badge-hover-yellow': '#FEF9C3',\n      'badge-border-yellow': '#FEF08A',\n      'badge-hover-green': '#DCFCE7',\n      'badge-border-green': '#BBF7D0',\n      'badge-background-green': '#F0FDF4',\n      'badge-color-green': '#15803D',\n      'badge-background-sky': '#F0F9FF',\n      'badge-color-sky': '#0369A1',\n      'badge-hover-sky': '#E0F2FE',\n      'badge-border-sky': '#BAE6FD',\n      'badge-background-disabled': '#F3F4F6',\n      'badge-color-disabled': '#D1D5DB',\n      'badge-hover-disabled': '#F3F4F6',\n      'badge-border-disabled': '#E5E7EB',\n      'badge-background-important': '#DC2626',\n      // alert\n      'alert-background-neutral': '#FFFFFF',\n      'alert-border-neutral': '#E5E7EB',\n      'alert-background-danger': '#FEF2F2',\n      'alert-border-danger': '#FECACA',\n      'alert-background-warning': '#FEFCE8',\n      'alert-border-warning': '#FEF08A',\n      'alert-background-green': '#F0FDF4',\n      'alert-border-green': '#BBF7D0',\n      'alert-background-info': '#F0F9FF',\n      'alert-border-info': '#BAE6FD',\n      // tab\n      'tab-background': '#F3F4F6',\n      'tab-border': '#E5E7EB',\n      // tooltip\n      'tooltip-background-light': '#FFFFFF',\n      'tooltip-background-dark': '#111827',\n      // toggle\n      'toggle-off': '#E5E7EB',\n      'toggle-on': '#2563EB',\n      'toggle-dial-background': '#FFFFFF',\n      'toggle-off-hover': '#D1D5DB',\n      'toggle-off-border': '#D1D5DB',\n      'toggle-on-hover': '#3B82F6',\n      'toggle-on-border': '#60A5FA',\n      'toggle-off-disabled': '#F3F4F6',\n    },\n    width: {\n      '1/7': '14.2857143%',\n      '1/8': '12.5%',\n      '1/9': '11.1111111%',\n      '1/10': '10%',\n      '1/11': '9.0909091%',\n      '1/12': '8.3333333%',\n    },\n    boxShadow: {\n      'soft-shadow-sm':\n        '0px 6px 32px -12px rgba(149, 160, 178, 0.12)',\n      'soft-shadow': '0px 8px 32px -12px rgba(149, 160, 178, 0.16)',\n      'soft-shadow-md':\n        '0px 10px 32px -12px rgba(149, 160, 178, 0.2)',\n      'soft-shadow-lg':\n        '0px 12px 32px -12px rgba(149, 160, 178, 0.24)',\n      'soft-shadow-xl':\n        '0px 16px 32px -12px rgba(149, 160, 178, 0.32)',\n      'soft-shadow-2xl':\n        '0px 24px 64px -12px rgba(149, 160, 178, 0.32)',\n      'soft-shadow-inner': '0px 1px 1px 0px rgba(0, 0, 0, 0.05)',\n    },\n    fontSize: {\n      tiny: '0.625rem',\n    },\n    spacing: {\n      120: '30rem', // 480px\n      95: '23.75rem', // 380px\n      141.5: '35.375rem', // 566px\n      188: '47rem', // 752px\n    },\n    zIndex: {\n      999999: '999999',\n    },\n  },\n}\n\n```\n\n\u003cbr /\u003e\n\n4. Great 🥳, now you're ready to use @bsf/force-ui.\n\n```jsx\nimport { Button } from \"@bsf/force-ui\";\n\nexport default function Example() {\n  return \u003cButton\u003eMy Button\u003c/Button\u003e;\n}\n```\n\n## @bsf/force-ui Documentation\n\nVisit \u003ca href=\"https://github.com/brainstormforce/force-ui/wiki\"\u003ehttps://github.com/brainstormforce/force-ui/wiki\u003c/a\u003e for full documentation.\n\n\n## Contributing\n\nContributions are always welcome!\n\nSee `CONTRIBUTING.md` for ways to get started.\n\nPlease adhere to this project's `CODE_OF_CONDUCT.md`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrainstormforce%2Fforce-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrainstormforce%2Fforce-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrainstormforce%2Fforce-ui/lists"}