{"id":13565897,"url":"https://github.com/purescript-react/purescript-nextui","last_synced_at":"2026-02-16T13:35:18.827Z","repository":{"id":113966945,"uuid":"529551355","full_name":"purescript-react/purescript-nextui","owner":"purescript-react","description":"Purescript bindings for https://nextui.org/","archived":false,"fork":false,"pushed_at":"2023-01-25T09:27:08.000Z","size":48,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-04T19:42:24.062Z","etag":null,"topics":["nextjs","nextui","purescript","purescript-react-basic"],"latest_commit_sha":null,"homepage":"","language":"PureScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit-0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/purescript-react.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-08-27T10:22:36.000Z","updated_at":"2023-12-14T16:48:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"996ff731-daa4-4b70-9d7c-4e25b4d64b54","html_url":"https://github.com/purescript-react/purescript-nextui","commit_stats":null,"previous_names":["purescript-react/purescript-nextui"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purescript-react%2Fpurescript-nextui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purescript-react%2Fpurescript-nextui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purescript-react%2Fpurescript-nextui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purescript-react%2Fpurescript-nextui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/purescript-react","download_url":"https://codeload.github.com/purescript-react/purescript-nextui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247097610,"owners_count":20883121,"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":["nextjs","nextui","purescript","purescript-react-basic"],"created_at":"2024-08-01T13:01:57.403Z","updated_at":"2026-02-16T13:35:18.799Z","avatar_url":"https://github.com/purescript-react.png","language":"PureScript","readme":"# purescript-nextui\n\nBindings for [NextUI](https://nextui.org/).\n\n## Installation\n\n```bash\nspago install nextui\n```\n\n## Usage\n\nCreate a dark and light theme, see https://nextui.org/docs/theme/default-theme: \n```purescript\n-- Theme.purs\nmkDark :: Effect Theme\nmkDark = createTheme\n  { \"type\": \"dark\"\n  , theme:\n      { colors:\n          { primary: \"$blue600\"\n          ...\n          }\n      , space: {}\n      , fonts:\n          { ...\n          }\n      }\n  }\n\nmkLight :: Effect Theme\nmkLight = createTheme\n  { \"type\": \"light\"\n  , theme:\n      { colors:\n          { primary: \"$blue300\"\n          ...\n          }\n      , space: {}\n      , fonts:\n          { ...\n          }\n      }\n  }\n```\n\nIn your root layout component, set up the next theme provider:\n\n```purescript\n-- RootComponent.purs\nmyRootComponent :: React.Component { children :: Array React.JSX }\nmyRootComponent = do\n  dark \u003c- Themes.mkDark\n  light \u003c- Themes.mkLight\n  React.component \"RootComponent\" \\{ children } -\u003e React.do\n    pure\n      $ el nextThemesProvider\n          { defaultTheme: \"system\"\n          , attribute: \"class\"\n          , storageKey: \"theme\"\n          , value: { dark: (unsafeCoerce dark).className, light: (unsafeCoerce light).className }\n          }\n      $ el nextUIProvider {} children\n```\n\nThen use NextUI. Here is an example usage:\n```purescript\nimport NextUI.NextUI as NextUI\nimport React.Basic.DOM (css)\nimport React.Basic.DOM.Simplified.Generated as R\nimport React.Basic.DOM.Simplified.ToJSX (el)\n\n\nmyComponent :: React.Component Props\nmyComponent = do\n    React.component \"MyComponent\" \\props -\u003e\n    React.do\n      { theme, isDark } \u003c- NextUI.useTheme\n      pure $ el NextUI.container { gap: 0, lg: true }\n        $ el NextUI.card\n            { css: css { marginBottom: \"50px\" }\n            }\n            [ el NextUI.cardBody {}\n                $ el NextUI.container { display: \"flex\", justify: \"space-evenly\" }\n                    [ el NextUI.spacer {} React.empty\n                    , el NextUI.text\n                        { h1: true\n                        , css: { letterSpacing: \"0.002em\" }\n                        , size: \"$7xl\"\n                        , weight: \"black\"\n                        }\n                        \"Hello NextUI\"\n                    , el NextUI.button { shadow: false, css: css { minHeight: \"5rem\", padding: \"3rem\", background: if isDark then \"fuchsia\" else \"purple\" } }\n                        $ el NextUI.text { size: \"$3xl\", color: \"white\", css: css { fontWeight: \"$bold\" } } \"Get started\"\n                    ]\n            ]\n```\n","funding_links":[],"categories":["PureScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpurescript-react%2Fpurescript-nextui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpurescript-react%2Fpurescript-nextui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpurescript-react%2Fpurescript-nextui/lists"}