├── .github ├── FUNDING.yml └── workflows │ └── development.yml ├── .gitignore ├── .pre-commit-config.yaml ├── .trunk ├── .gitignore └── trunk.yaml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── assets ├── buridan_landing_2025.png ├── chakra_color_mode_provider.js ├── css │ └── globals.css ├── favicon.ico └── new_logo.PNG ├── buridan_ui ├── __init__.py ├── buridan_ui.py ├── charts │ ├── __init__.py │ ├── area │ │ ├── v1.py │ │ ├── v2.py │ │ ├── v3.py │ │ ├── v4.py │ │ ├── v5.py │ │ ├── v6.py │ │ ├── v7.py │ │ └── v8.py │ ├── bar │ │ ├── v1.py │ │ ├── v10.py │ │ ├── v2.py │ │ ├── v3.py │ │ ├── v4.py │ │ ├── v5.py │ │ ├── v6.py │ │ ├── v7.py │ │ ├── v8.py │ │ └── v9.py │ ├── doughnut │ │ ├── v1.py │ │ └── v2.py │ ├── line │ │ ├── v1.py │ │ ├── v2.py │ │ ├── v3.py │ │ ├── v4.py │ │ ├── v5.py │ │ ├── v6.py │ │ ├── v7.py │ │ └── v8.py │ ├── pie │ │ ├── v1.py │ │ ├── v2.py │ │ ├── v3.py │ │ ├── v4.py │ │ ├── v5.py │ │ └── v6.py │ ├── radar │ │ ├── v1.py │ │ ├── v2.py │ │ ├── v3.py │ │ ├── v4.py │ │ ├── v5.py │ │ └── v6.py │ ├── scatter │ │ └── v1.py │ └── style.py ├── config.py ├── export.py ├── landing │ └── hero.py ├── pantry │ ├── __init__.py │ ├── accordions │ │ └── v1.py │ ├── animations │ │ ├── v1.py │ │ ├── v2.py │ │ └── v3.py │ ├── backgrounds │ │ ├── v1.py │ │ ├── v2.py │ │ ├── v3.py │ │ └── v4.py │ ├── cards │ │ ├── v1.py │ │ ├── v2.py │ │ ├── v3.py │ │ └── v4.py │ ├── faq │ │ └── v1.py │ ├── featured │ │ ├── v1.py │ │ └── v2.py │ ├── footers │ │ ├── v1.py │ │ └── v2.py │ ├── forms │ │ ├── v1.py │ │ ├── v2.py │ │ └── v3.py │ ├── inputs │ │ ├── v1.py │ │ ├── v2.py │ │ ├── v3.py │ │ ├── v4.py │ │ └── v5.py │ ├── lists │ │ └── v1.py │ ├── logins │ │ ├── v1.py │ │ └── v2.py │ ├── menus │ │ └── v1.py │ ├── onboardings │ │ └── v1.py │ ├── payments │ │ └── v1.py │ ├── popups │ │ ├── v1.py │ │ └── v2.py │ ├── pricing │ │ ├── v1.py │ │ └── v2.py │ ├── prompts │ │ ├── v1.py │ │ └── v2.py │ ├── sidebars │ │ └── v1.py │ ├── stats │ │ ├── v1.py │ │ └── v2.py │ ├── subscribe │ │ ├── v1.py │ │ ├── v2.py │ │ └── v3.py │ ├── tables │ │ ├── v1.py │ │ ├── v2.py │ │ ├── v3.py │ │ └── v4.py │ ├── tabs │ │ ├── v1.py │ │ ├── v2.py │ │ └── v3.py │ └── timeline │ │ └── v1.py ├── start │ ├── __init__.py │ ├── buridan.py │ ├── changelog.py │ ├── charting.py │ ├── clientstate.py │ ├── dashboard.py │ ├── installation.py │ ├── introduction.py │ └── theming.py ├── static │ ├── __init__.py │ ├── meta.py │ ├── routes.py │ └── scripts.py ├── templates │ ├── __init__.py │ ├── drawer │ │ ├── __init__.py │ │ └── drawer.py │ ├── footer │ │ ├── __init__.py │ │ ├── footer.py │ │ └── style.py │ ├── settings │ │ ├── __init__.py │ │ └── settings.py │ └── sidemenu │ │ ├── __init__.py │ │ ├── download.py │ │ ├── scripts.py │ │ ├── sidemenu.py │ │ └── style.py ├── ui │ ├── __init__.py │ ├── atoms │ │ ├── __init__.py │ │ └── buttons.py │ ├── config.py │ ├── molecules │ │ └── __init__.py │ └── organisms │ │ ├── __init__.py │ │ └── grid.py └── wrappers │ ├── __init__.py │ ├── base │ ├── __init__.py │ ├── main.py │ └── utils │ │ ├── __init__.py │ │ ├── meta.py │ │ └── routes.py │ └── component │ ├── __init__.py │ └── wrapper.py ├── cleanup.sh ├── dev.sh ├── pyproject.toml ├── pyrightconfig.json ├── requirements.txt ├── rxconfig.py ├── tests └── __init__.py └── uv.lock /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [LineIndent] 2 | -------------------------------------------------------------------------------- /.github/workflows/development.yml: -------------------------------------------------------------------------------- 1 | name: Development Environment 2 | 3 | on: 4 | pull_request: 5 | types: [opened, synchronize, reopened] 6 | branches: 7 | - main 8 | 9 | jobs: 10 | setup_dev_environment: 11 | name: Setup Dev Environment 12 | runs-on: ubuntu-latest 13 | 14 | environment: 15 | name: development 16 | url: ${{ steps.set_url.outputs.env_url }} 17 | 18 | steps: 19 | - name: Checkout code 20 | uses: actions/checkout@v3 21 | 22 | - name: Set up Python 23 | uses: actions/setup-python@v4 24 | with: 25 | python-version: '3.x' 26 | 27 | - name: Set environment URL 28 | id: set_url 29 | run: echo "env_url=https://github.com/${{ github.repository }}/pull/${{ github.event.pull_request.number }}" >> $GITHUB_OUTPUT 30 | 31 | - name: Install dependencies and run app 32 | run: | 33 | python -m pip install --upgrade pip 34 | pip install -r requirements.txt 35 | reflex run & # Run in background mode 36 | sleep 10 # Give it time to start up 37 | echo "Development environment is running for PR #${{ github.event.pull_request.number }}" -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | *.db 3 | *.py[cod] 4 | .DS_Store 5 | .idea 6 | .venv 7 | .web 8 | __pycache__/ 9 | assets/external/ 10 | buridan_ui/private/ 11 | buridan_ui/pro/ 12 | -------------------------------------------------------------------------------- /.pre-commit-config.yaml: -------------------------------------------------------------------------------- 1 | repos: 2 | - repo: https://github.com/charliermarsh/ruff-pre-commit 3 | rev: v0.11.2 4 | hooks: 5 | - id: ruff-format # Ruff will format first 6 | args: [] 7 | - id: ruff # Then Ruff lints, fixing what it can 8 | args: ["--fix", "--exit-non-zero-on-fix"] 9 | -------------------------------------------------------------------------------- /.trunk/.gitignore: -------------------------------------------------------------------------------- 1 | *out 2 | *logs 3 | *actions 4 | *notifications 5 | *tools 6 | plugins 7 | user_trunk.yaml 8 | user.yaml 9 | tmp 10 | -------------------------------------------------------------------------------- /.trunk/trunk.yaml: -------------------------------------------------------------------------------- 1 | # This file controls the behavior of Trunk: https://docs.trunk.io/cli 2 | # To learn more about the format of this file, see https://docs.trunk.io/reference/trunk-yaml 3 | version: 0.1 4 | 5 | cli: 6 | version: 1.22.8 7 | 8 | # Trunk provides extensibility via plugins. (https://docs.trunk.io/plugins) 9 | plugins: 10 | sources: 11 | - id: trunk 12 | ref: v1.6.5 13 | uri: https://github.com/trunk-io/plugins 14 | 15 | - id: oss-linter-trunk 16 | ref: v0.2024.11.20.21.37 17 | uri: https://github.com/elviskahoro/oss-linter-trunk 18 | 19 | # Many linters and tools depend on runtimes - configure them here. (https://docs.trunk.io/runtimes) 20 | runtimes: 21 | enabled: 22 | - go@1.21.0 23 | - node@18.12.1 24 | - python@>3.10.0 25 | 26 | definitions: 27 | - type: python 28 | system_version: allowed 29 | 30 | # This is the section where you manage your linters. (https://docs.trunk.io/check/configuration) 31 | lint: 32 | enabled: 33 | - semgrep@1.97.0 34 | - actionlint@1.7.4 35 | - checkov@3.2.322 36 | - git-diff-check 37 | - markdownlint@0.43.0 38 | - osv-scanner@1.9.1 39 | - oxipng@9.1.2 40 | - pyright@1.1.389 41 | - ruff@0.8.1 42 | - shellcheck@0.10.0 43 | - shfmt@3.6.0 44 | - svgo@3.3.2 45 | - taplo@0.9.3 46 | - trivy@0.56.2 47 | - trufflehog@3.84.1 48 | - yamllint@1.35.1 49 | 50 | disabled: 51 | - bandit 52 | - black 53 | - flake8 54 | - isort 55 | - markdown-link-check 56 | - mypy 57 | - prettier 58 | - pylint 59 | - remark-lint 60 | - stylelint 61 | - trunk-toolbox 62 | 63 | ignore: 64 | - linters: [ALL] 65 | paths: 66 | - alembic/** 67 | - docs/tutorial/** 68 | - docs/datatable_tutorial/** 69 | 70 | - linters: [ruff] 71 | paths: 72 | - integration/benchmarks/** 73 | 74 | exported_configs: 75 | - plugin_id: oss-linter-trunk 76 | configs: 77 | - configs/.bandit 78 | - configs/.clang-format 79 | - configs/.clang-tidy 80 | - configs/.clangd 81 | - configs/.editorconfig 82 | - configs/.flake8 83 | - configs/.gitattributes 84 | - configs/.gitignore 85 | - configs/.hadolint.yaml 86 | - configs/.isort.cfg 87 | - configs/.markdownlint.yaml 88 | - configs/.mypy.ini 89 | - configs/.pr-labels.yaml 90 | - configs/.prettierrc.yaml 91 | - configs/.pylintrc 92 | - configs/.remarkrc.yaml 93 | - configs/.shellcheckrc 94 | - configs/.sqlfluff 95 | - configs/.stylelintrc.js 96 | - configs/.stylelintrc.yaml 97 | - configs/.yamllint.yaml 98 | - configs/pyrightconfig.json 99 | - configs/ruff.toml 100 | - configs/rustfmt.toml 101 | - configs/svgo.config.js 102 | 103 | actions: 104 | enabled: 105 | - trunk-announce 106 | - trunk-cache-prune 107 | - trunk-upgrade-available 108 | 109 | disabled: 110 | - trunk-check-pre-push 111 | - trunk-fmt-pre-commit 112 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 LineIndent 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # buridan/ui 3 | 4 | Pre-designed UI components built with Reflex. Easily copy and paste into your own app. 5 |

6 | Logo 7 |

8 | 9 | 10 | ## Pantry 11 | 12 | Visit the [Pantry](https://buridan-ui.reflex.run/pantry/accordions/) section to view the available pre-built components. 13 | 14 | ## Charts 15 | 16 | Visit the [Charts](https://buridan-ui.reflex.run/charts/area-charts/) section to view the available pre-built charts for data visualization. 17 | 18 | 19 | ## Contributing 20 | 21 | Please read this [guide](CONTRIBUTING.md) for more information on how to contribute. 22 | 23 | ## License 24 | 25 | Licensed under the [MIT license](LICENSE.md). -------------------------------------------------------------------------------- /assets/buridan_landing_2025.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/assets/buridan_landing_2025.png -------------------------------------------------------------------------------- /assets/chakra_color_mode_provider.js: -------------------------------------------------------------------------------- 1 | import { useColorMode as chakraUseColorMode } from "@chakra-ui/react"; 2 | import { useTheme } from "next-themes"; 3 | import { useEffect, useState } from "react"; 4 | import { ColorModeContext, defaultColorMode } from "/utils/context.js"; 5 | 6 | export default function ChakraColorModeProvider({ children }) { 7 | const { theme, resolvedTheme, setTheme } = useTheme(); 8 | const { colorMode, toggleColorMode } = chakraUseColorMode(); 9 | const [resolvedColorMode, setResolvedColorMode] = useState(colorMode); 10 | 11 | useEffect(() => { 12 | if (colorMode != resolvedTheme) { 13 | toggleColorMode(); 14 | } 15 | setResolvedColorMode(resolvedTheme); 16 | }, [theme, resolvedTheme]); 17 | 18 | const rawColorMode = colorMode; 19 | const setColorMode = (mode) => { 20 | const allowedModes = ["light", "dark", "system"]; 21 | if (!allowedModes.includes(mode)) { 22 | console.error( 23 | `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".` 24 | ); 25 | mode = defaultColorMode; 26 | } 27 | setTheme(mode); 28 | }; 29 | return ( 30 | 33 | {children} 34 | 35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /assets/css/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --background: oklch(0.985 0 0); 7 | --foreground: oklch(0.145 0 0); 8 | --chart-1: oklch(0.81 0.1 252); 9 | --chart-2: oklch(0.62 0.19 260); 10 | --chart-3: oklch(0.55 0.22 263); 11 | --chart-4: oklch(0.49 0.22 264); 12 | --chart-5: oklch(0.42 0.18 266); 13 | --pattern-ui: oklch(0.715 0.143 215.221); 14 | --pattern-lab: oklch(0.696 0.17 162.48); 15 | } 16 | 17 | .dark { 18 | --background: oklch(0.16 0 0); 19 | --foreground: oklch(0.985 0 0); 20 | --chart-1: oklch(0.81 0.1 252); 21 | --chart-2: oklch(0.62 0.19 260); 22 | --chart-3: oklch(0.55 0.22 263); 23 | --chart-4: oklch(0.49 0.22 264); 24 | --chart-5: oklch(0.42 0.18 266); 25 | } 26 | 27 | /* Blue theme */ 28 | .theme-blue { 29 | --chart-1: oklch(0.81 0.1 252); 30 | --chart-2: oklch(0.62 0.19 260); 31 | --chart-3: oklch(0.55 0.22 263); 32 | --chart-4: oklch(0.49 0.22 264); 33 | --chart-5: oklch(0.42 0.18 266); 34 | } 35 | 36 | /* Red theme */ 37 | .theme-red { 38 | --chart-1: oklch(0.81 0.1 20); 39 | --chart-2: oklch(0.64 0.21 25); 40 | --chart-3: oklch(0.58 0.22 27); 41 | --chart-4: oklch(0.51 0.19 28); 42 | --chart-5: oklch(0.44 0.16 27); 43 | } 44 | 45 | /* Green theme */ 46 | .theme-green { 47 | --chart-1: oklch(0.87 0.14 154); 48 | --chart-2: oklch(0.72 0.19 150); 49 | --chart-3: oklch(0.63 0.17 149); 50 | --chart-4: oklch(0.53 0.14 150); 51 | --chart-5: oklch(0.45 0.11 151); 52 | } 53 | 54 | /* Amber theme */ 55 | .theme-amber { 56 | --chart-1: oklch(0.88 0.15 92); 57 | --chart-2: oklch(0.77 0.16 70); 58 | --chart-3: oklch(0.67 0.16 58); 59 | --chart-4: oklch(0.56 0.15 49); 60 | --chart-5: oklch(0.47 0.12 46); 61 | } 62 | 63 | /* Purple theme */ 64 | .theme-purple { 65 | --chart-1: oklch(0.83 0.11 306); 66 | --chart-2: oklch(0.63 0.23 304); 67 | --chart-3: oklch(0.56 0.25 302); 68 | --chart-4: oklch(0.5 0.24 302); 69 | --chart-5: oklch(0.44 0.2 304); 70 | } 71 | -------------------------------------------------------------------------------- /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/assets/favicon.ico -------------------------------------------------------------------------------- /assets/new_logo.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/assets/new_logo.PNG -------------------------------------------------------------------------------- /buridan_ui/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/__init__.py -------------------------------------------------------------------------------- /buridan_ui/buridan_ui.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | from buridan_ui.export import export_app 3 | 4 | app = rx.App(stylesheets=["css/globals.css"]) 5 | export_app(app) 6 | -------------------------------------------------------------------------------- /buridan_ui/charts/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/charts/__init__.py -------------------------------------------------------------------------------- /buridan_ui/charts/area/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | get_cartesian_grid, 7 | get_x_axis, 8 | ) 9 | 10 | 11 | def areachart_v1(): 12 | data = [ 13 | {"month": "Jan", "desktop": 186}, 14 | {"month": "Feb", "desktop": 305}, 15 | {"month": "Mar", "desktop": 237}, 16 | {"month": "Apr", "desktop": 73}, 17 | {"month": "May", "desktop": 209}, 18 | {"month": "Jun", "desktop": 214}, 19 | ] 20 | 21 | return rx.box( 22 | info( 23 | "Area Chart", 24 | "3", 25 | "Showing total visitors for the last 6 months", 26 | "start", 27 | ), 28 | rx.recharts.area_chart( 29 | get_tooltip(), 30 | get_cartesian_grid(), 31 | rx.recharts.area( 32 | data_key="desktop", 33 | fill="var(--chart-1)", 34 | stroke="var(--chart-1)", 35 | stroke_width=2, 36 | ), 37 | get_x_axis("month"), 38 | data=data, 39 | width="100%", 40 | height=250, 41 | ), 42 | info( 43 | "Trending up by 5.2% this month", 44 | "2", 45 | "January - June 2024", 46 | "start", 47 | ), 48 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 49 | ) 50 | -------------------------------------------------------------------------------- /buridan_ui/charts/area/v2.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | get_cartesian_grid, 7 | get_x_axis, 8 | ) 9 | 10 | 11 | def areachart_v2(): 12 | data = [ 13 | {"month": "Jan", "desktop": 186}, 14 | {"month": "Feb", "desktop": 305}, 15 | {"month": "Mar", "desktop": 237}, 16 | {"month": "Apr", "desktop": 73}, 17 | {"month": "May", "desktop": 209}, 18 | {"month": "Jun", "desktop": 214}, 19 | ] 20 | 21 | return rx.box( 22 | info( 23 | "Area Chart - Linear", 24 | "3", 25 | "Showing total visitors for the last 6 months", 26 | "start", 27 | ), 28 | rx.recharts.area_chart( 29 | get_tooltip(), 30 | get_cartesian_grid(), 31 | rx.recharts.area( 32 | data_key="desktop", 33 | fill="var(--chart-1)", 34 | stroke="var(--chart-1)", 35 | stroke_width=2, 36 | type_="linear", 37 | ), 38 | get_x_axis("month"), 39 | data=data, 40 | width="100%", 41 | height=250, 42 | ), 43 | info( 44 | "Trending up by 5.2% this month", 45 | "2", 46 | "January - June 2024", 47 | "start", 48 | ), 49 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 50 | ) 51 | -------------------------------------------------------------------------------- /buridan_ui/charts/area/v3.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | get_cartesian_grid, 7 | get_x_axis, 8 | ) 9 | 10 | 11 | def areachart_v3(): 12 | data = [ 13 | {"month": "Jan", "desktop": 186}, 14 | {"month": "Feb", "desktop": 305}, 15 | {"month": "Mar", "desktop": 237}, 16 | {"month": "Apr", "desktop": 73}, 17 | {"month": "May", "desktop": 209}, 18 | {"month": "Jun", "desktop": 214}, 19 | ] 20 | 21 | return rx.box( 22 | info( 23 | "Area Chart - Step", 24 | "3", 25 | "Showing total visitors for the last 6 months", 26 | "start", 27 | ), 28 | rx.recharts.area_chart( 29 | get_tooltip(), 30 | get_cartesian_grid(), 31 | rx.recharts.area( 32 | data_key="desktop", 33 | fill="var(--chart-1)", 34 | stroke="var(--chart-1)", 35 | stroke_width=2, 36 | type_="step", 37 | ), 38 | get_x_axis("month"), 39 | data=data, 40 | width="100%", 41 | height=250, 42 | ), 43 | info("Trending up by 5.2% this month", "2", "January - June 2024", "start"), 44 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 45 | ) 46 | -------------------------------------------------------------------------------- /buridan_ui/charts/area/v4.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | get_cartesian_grid, 7 | get_x_axis, 8 | ) 9 | 10 | 11 | def areachart_v4(): 12 | data = [ 13 | {"month": "Jan", "desktop": 186, "mobile": 80}, 14 | {"month": "Feb", "desktop": 305, "mobile": 200}, 15 | {"month": "Mar", "desktop": 237, "mobile": 120}, 16 | {"month": "Apr", "desktop": 73, "mobile": 190}, 17 | {"month": "May", "desktop": 209, "mobile": 130}, 18 | {"month": "Jun", "desktop": 214, "mobile": 140}, 19 | ] 20 | 21 | return rx.box( 22 | info( 23 | "Area Chart - Stacked", 24 | "3", 25 | "Showing total visitors for the last 6 months", 26 | "start", 27 | ), 28 | rx.recharts.area_chart( 29 | get_tooltip(), 30 | get_cartesian_grid(), 31 | rx.recharts.area( 32 | data_key="desktop", 33 | fill="var(--chart-1)", 34 | stroke="var(--chart-1)", 35 | stroke_width=2, 36 | stack_id="a", 37 | ), 38 | rx.recharts.area( 39 | data_key="mobile", 40 | fill="var(--chart-2)", 41 | stroke="var(--chart-2)", 42 | stroke_width=2, 43 | stack_id="a", 44 | ), 45 | get_x_axis("month"), 46 | data=data, 47 | width="100%", 48 | height=250, 49 | ), 50 | info("Trending up by 5.2% this month", "2", "January - June 2024", "start"), 51 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 52 | ) 53 | -------------------------------------------------------------------------------- /buridan_ui/charts/area/v5.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | get_cartesian_grid, 7 | ) 8 | 9 | 10 | def areachart_v5(): 11 | import datetime 12 | import random 13 | from reflex.experimental import ClientStateVar 14 | 15 | start_date = datetime.date(2024, 4, 1) 16 | data = [ 17 | { 18 | "date": (start_date + datetime.timedelta(days=i)).strftime("%b %d"), 19 | "desktop": random.randint(80, 500), 20 | "mobile": random.randint(100, 550), 21 | } 22 | for i in range(91) 23 | ] 24 | 25 | SelectedRange = ClientStateVar.create("selected", data) 26 | 27 | def gradient(id_: str, color: str): 28 | return rx.el.svg.linear_gradient( 29 | rx.el.svg.stop(stop_color=f"var(--{color})", offset="5%", stop_opacity=0.8), 30 | rx.el.svg.stop( 31 | stop_color=f"var(--{color})", offset="95%", stop_opacity=0.1 32 | ), 33 | x1=0, 34 | x2=0, 35 | y1=0, 36 | y2=1, 37 | id=id_, 38 | ) 39 | 40 | def area(data_key: str, color: str): 41 | return rx.recharts.area( 42 | data_key=data_key, 43 | fill=f"url(#{data_key})", 44 | stack_id="a", 45 | stroke=f"var(--{color})", 46 | animation_easing="linear", 47 | ) 48 | 49 | select_options = [ 50 | ("Last 3 Months", data), 51 | ("Last 30 Days", data[-30:]), 52 | ("Last 7 Days", data[-7:]), 53 | ] 54 | 55 | return rx.box( 56 | rx.hstack( 57 | info( 58 | "Area Chart - Dynamic", 59 | "3", 60 | "Showing total visitors for the last 6 months", 61 | "start", 62 | ), 63 | rx.el.select( 64 | *[ 65 | rx.el.option(label, on_click=SelectedRange.set_value(value)) 66 | for label, value in select_options 67 | ], 68 | default_value="Last 3 Months", 69 | bg=rx.color("gray", 2), 70 | border=f"1px solid {rx.color('gray', 4)}", 71 | class_name="relative flex items-center whitespace-nowrap justify-center gap-2 py-2 rounded-lg shadow-sm px-3", 72 | ), 73 | align="center", 74 | justify="between", 75 | width="100%", 76 | wrap="wrap", 77 | ), 78 | rx.recharts.area_chart( 79 | rx.el.svg.defs( 80 | gradient("desktop", "chart-1"), 81 | gradient("mobile", "chart-2"), 82 | ), 83 | get_tooltip(), 84 | get_cartesian_grid(), 85 | area("mobile", "chart-2"), 86 | area("desktop", "chart-1"), 87 | rx.recharts.x_axis( 88 | data_key="date", 89 | axis_line=False, 90 | min_tick_gap=32, 91 | tick_size=10, 92 | tick_line=False, 93 | custom_attrs={"fontSize": "12px"}, 94 | interval="preserveStartEnd", 95 | ), 96 | data=SelectedRange.value, 97 | width="100%", 98 | height=280, 99 | ), 100 | info("Trending up by 5.2% this month", "2", "January - June 2024", "start"), 101 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 102 | ) 103 | -------------------------------------------------------------------------------- /buridan_ui/charts/area/v6.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | get_cartesian_grid, 7 | get_x_axis, 8 | ) 9 | 10 | 11 | def areachart_v6(): 12 | data = [ 13 | {"month": "Jan", "desktop": 186, "mobile": 80}, 14 | {"month": "Feb", "desktop": 305, "mobile": 200}, 15 | {"month": "Mar", "desktop": 237, "mobile": 120}, 16 | {"month": "Apr", "desktop": 73, "mobile": 190}, 17 | {"month": "May", "desktop": 209, "mobile": 130}, 18 | {"month": "Jun", "desktop": 214, "mobile": 140}, 19 | ] 20 | 21 | return rx.box( 22 | info( 23 | "Area Chart - Legend", 24 | "3", 25 | "Showing total visitors for the last 6 months", 26 | "start", 27 | ), 28 | rx.recharts.area_chart( 29 | get_tooltip(), 30 | get_cartesian_grid(), 31 | rx.recharts.area( 32 | data_key="mobile", 33 | fill="var(--chart-1)", 34 | stroke="var(--chart-1)", 35 | stack_id="a", 36 | ), 37 | rx.recharts.area( 38 | data_key="desktop", 39 | fill="var(--chart-2)", 40 | stroke="var(--chart-2)", 41 | stack_id="a", 42 | ), 43 | get_x_axis("month"), 44 | rx.recharts.legend(), 45 | data=data, 46 | width="100%", 47 | height=250, 48 | ), 49 | info("Trending up by 5.2% this month", "2", "January - June 2024", "start"), 50 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 51 | ) 52 | -------------------------------------------------------------------------------- /buridan_ui/charts/area/v7.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | get_cartesian_grid, 7 | ) 8 | 9 | 10 | def areachart_v7(): 11 | data = [ 12 | {"month": "Jan", "desktop": 186, "mobile": 80}, 13 | {"month": "Feb", "desktop": 305, "mobile": 200}, 14 | {"month": "Mar", "desktop": 237, "mobile": 120}, 15 | {"month": "Apr", "desktop": 73, "mobile": 190}, 16 | {"month": "May", "desktop": 209, "mobile": 130}, 17 | {"month": "Jun", "desktop": 214, "mobile": 140}, 18 | ] 19 | 20 | return rx.box( 21 | info( 22 | "Area Chart - Axes", 23 | "3", 24 | "Showing total visitors for the last 6 months", 25 | "start", 26 | ), 27 | rx.recharts.area_chart( 28 | get_tooltip(), 29 | get_cartesian_grid(), 30 | rx.recharts.area( 31 | data_key="mobile", 32 | fill="var(--chart-1)", 33 | stroke="var(--chart-1)", 34 | stack_id="a", 35 | ), 36 | rx.recharts.area( 37 | data_key="desktop", 38 | fill="var(--chart-2)", 39 | stroke="var(--chart-2)", 40 | stack_id="a", 41 | ), 42 | rx.recharts.x_axis( 43 | data_key="month", 44 | axis_line=False, 45 | tick_size=10, 46 | tick_line=False, 47 | custom_attrs={"fontSize": "12px"}, 48 | interval="preserveStartEnd", 49 | ), 50 | rx.recharts.y_axis( 51 | axis_line=False, 52 | min_tick_gap=50, 53 | tick_size=10, 54 | tick_line=False, 55 | custom_attrs={"fontSize": "12px"}, 56 | ), 57 | data=data, 58 | width="100%", 59 | height=250, 60 | ), 61 | info("Trending up by 5.2% this month", "2", "January - June 2024", "start"), 62 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 63 | ) 64 | -------------------------------------------------------------------------------- /buridan_ui/charts/area/v8.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | from buridan_ui.charts.style import get_tooltip, get_cartesian_grid 3 | 4 | 5 | def areachart_v8(): 6 | data = [ 7 | {"month": "Jan", "desktop": 186, "mobile": 80}, 8 | {"month": "Feb", "desktop": 305, "mobile": 200}, 9 | {"month": "Mar", "desktop": 237, "mobile": 120}, 10 | {"month": "Apr", "desktop": 73, "mobile": 190}, 11 | {"month": "May", "desktop": 209, "mobile": 130}, 12 | {"month": "Jun", "desktop": 214, "mobile": 140}, 13 | ] 14 | 15 | series = [("desktop", "Desktop", "--chart-1"), ("mobile", "Mobile", "--chart-2")] 16 | 17 | def create_gradient(var_name): 18 | return rx.el.svg.defs( 19 | rx.el.svg.linear_gradient( 20 | rx.el.svg.stop( 21 | stop_color=f"var({var_name})", offset="5%", stop_opacity=0.8 22 | ), 23 | rx.el.svg.stop( 24 | stop_color=f"var({var_name})", offset="95%", stop_opacity=0.1 25 | ), 26 | x1=0, 27 | x2=0, 28 | y1=0, 29 | y2=1, 30 | id=var_name.strip("-"), 31 | ) 32 | ) 33 | 34 | return rx.box( 35 | rx.hstack( 36 | rx.foreach( 37 | series, 38 | lambda s: rx.hstack( 39 | rx.box(class_name="w-3 h-3 rounded-sm", bg=f"var({s[2]})"), 40 | rx.text( 41 | s[1], 42 | class_name="text-sm font-semibold", 43 | color=rx.color("slate", 11), 44 | ), 45 | align="center", 46 | spacing="2", 47 | ), 48 | ), 49 | class_name="py-4 px-4 flex w-full justify-center gap-8", 50 | ), 51 | rx.recharts.area_chart( 52 | *(create_gradient(s[2]) for s in series), 53 | get_tooltip(), 54 | get_cartesian_grid(), 55 | *( 56 | rx.recharts.area( 57 | data_key=s[0], 58 | fill=f"url(#{s[2].strip('-')})", 59 | stroke=f"var({s[2]})", 60 | stack_id="1", 61 | ) 62 | for s in series 63 | ), 64 | rx.recharts.x_axis( 65 | data_key="month", 66 | axis_line=False, 67 | tick_size=10, 68 | tick_line=False, 69 | custom_attrs={"fontSize": "12px"}, 70 | interval="preserveStartEnd", 71 | ), 72 | data=data, 73 | width="100%", 74 | height=250, 75 | ), 76 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 77 | ) 78 | -------------------------------------------------------------------------------- /buridan_ui/charts/bar/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | get_cartesian_grid, 7 | get_x_axis, 8 | ) 9 | 10 | 11 | def barchart_v1(): 12 | data = [ 13 | {"month": "Jan", "desktop": 186, "mobile": 80}, 14 | {"month": "Feb", "desktop": 305, "mobile": 200}, 15 | {"month": "Mar", "desktop": 237, "mobile": 120}, 16 | {"month": "Apr", "desktop": 73, "mobile": 190}, 17 | {"month": "May", "desktop": 209, "mobile": 130}, 18 | {"month": "Jun", "desktop": 214, "mobile": 140}, 19 | ] 20 | 21 | return rx.box( 22 | info( 23 | "Bar Chart - Multiple", 24 | "3", 25 | "Showing total visitors for the last 6 months", 26 | "start", 27 | ), 28 | rx.recharts.bar_chart( 29 | get_tooltip(), 30 | get_cartesian_grid(), 31 | rx.foreach( 32 | ["desktop", "mobile"], 33 | lambda name, index: rx.recharts.bar( 34 | data_key=name, 35 | fill=f"var(--chart-{index + 1})", 36 | radius=6, 37 | ), 38 | ), 39 | get_x_axis("month"), 40 | data=data, 41 | width="100%", 42 | height=250, 43 | bar_size=25, 44 | bar_category_gap="30%", 45 | ), 46 | info("Trending up by 5.2% this month", "2", "January - June 2024", "start"), 47 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 48 | ) 49 | -------------------------------------------------------------------------------- /buridan_ui/charts/bar/v10.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | from buridan_ui.charts.style import ( 3 | get_tooltip, 4 | get_x_axis, 5 | ) 6 | 7 | 8 | def barchart_v10(): 9 | sport = [ 10 | {"date": "Jan 23", "Running": 167, "Cycling": 145}, 11 | {"date": "Feb 23", "Running": 125, "Cycling": 110}, 12 | {"date": "Mar 23", "Running": 156, "Cycling": 149}, 13 | {"date": "Apr 23", "Running": 165, "Cycling": 112}, 14 | {"date": "May 23", "Running": 153, "Cycling": 138}, 15 | {"date": "Jun 23", "Running": 124, "Cycling": 145}, 16 | {"date": "Jul 23", "Running": 164, "Cycling": 134}, 17 | ] 18 | 19 | activities = ["Running", "Cycling"] 20 | chart_colors = ["var(--chart-1)", "var(--chart-2)"] 21 | 22 | def create_alternating_chart(active_key: str): 23 | return rx.recharts.bar_chart( 24 | get_tooltip(), 25 | *[ 26 | rx.recharts.bar( 27 | is_animation_active=False, 28 | radius=4, 29 | data_key=key, 30 | fill=color, 31 | custom_attrs={ 32 | "opacity": rx.cond( 33 | key == active_key, 34 | "0.25", 35 | "1", 36 | ) 37 | }, 38 | ) 39 | for key, color in zip(activities, chart_colors) 40 | ], 41 | get_x_axis("date"), 42 | data=sport, 43 | width="100%", 44 | height=250, 45 | bar_category_gap="20%", 46 | ) 47 | 48 | return rx.box( 49 | rx.tabs.root( 50 | rx.tabs.list( 51 | *[ 52 | rx.tabs.trigger( 53 | rx.text(activity, class_name="text-sm font-semibold"), 54 | value=str(i + 1), 55 | ) 56 | for i, activity in enumerate(activities) 57 | ] 58 | ), 59 | *[ 60 | rx.tabs.content( 61 | create_alternating_chart(active), 62 | value=str(i + 1), 63 | margin_top="-5px", 64 | ) 65 | for i, active in enumerate(activities) 66 | ], 67 | default_value="1", 68 | width="100%", 69 | ), 70 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 71 | ) 72 | -------------------------------------------------------------------------------- /buridan_ui/charts/bar/v2.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | ) 7 | 8 | 9 | def barchart_v2(): 10 | data = [ 11 | {"month": "Jan", "desktop": 186}, 12 | {"month": "Feb", "desktop": 305}, 13 | {"month": "Mar", "desktop": 237}, 14 | {"month": "Apr", "desktop": 73}, 15 | {"month": "May", "desktop": 209}, 16 | {"month": "Jun", "desktop": 214}, 17 | ] 18 | 19 | return rx.box( 20 | info( 21 | "Bar Chart - Horizontal", 22 | "3", 23 | "Showing total visitors for the last 6 months", 24 | "start", 25 | ), 26 | rx.recharts.bar_chart( 27 | get_tooltip(), 28 | rx.recharts.bar( 29 | data_key="desktop", 30 | fill="var(--chart-1)", 31 | radius=6, 32 | ), 33 | rx.recharts.x_axis(type_="number", hide=True, tick_size=0), 34 | rx.recharts.y_axis( 35 | data_key="month", 36 | type_="category", 37 | axis_line=False, 38 | tick_size=10, 39 | tick_line=False, 40 | custom_attrs={"fontSize": "12px"}, 41 | ), 42 | data=data, 43 | layout="vertical", 44 | width="100%", 45 | height=250, 46 | bar_gap=2, 47 | margin={"left": -20}, 48 | ), 49 | info("Trending up by 5.2% this month", "2", "January - June 2024", "start"), 50 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 51 | ) 52 | -------------------------------------------------------------------------------- /buridan_ui/charts/bar/v3.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | get_cartesian_grid, 7 | ) 8 | 9 | 10 | def barchart_v3(): 11 | data = [ 12 | {"month": "Jan", "desktop": 186, "mobile": 80}, 13 | {"month": "Feb", "desktop": 305, "mobile": 200}, 14 | {"month": "Mar", "desktop": 237, "mobile": 120}, 15 | {"month": "Apr", "desktop": 73, "mobile": 190}, 16 | {"month": "May", "desktop": 209, "mobile": 130}, 17 | {"month": "Jun", "desktop": 214, "mobile": 140}, 18 | ] 19 | 20 | return rx.box( 21 | info( 22 | "Bar Chart - Legend", 23 | "3", 24 | "Showing total visitors for the last 6 months", 25 | "start", 26 | ), 27 | rx.recharts.bar_chart( 28 | get_cartesian_grid(), 29 | get_tooltip(), 30 | rx.recharts.bar( 31 | data_key="desktop", 32 | fill="var(--chart-1)", 33 | stack_id="a", 34 | radius=[0, 0, 6, 6], 35 | ), 36 | rx.recharts.bar( 37 | data_key="mobile", 38 | fill="var(--chart-2)", 39 | stack_id="a", 40 | radius=[6, 6, 0, 0], 41 | ), 42 | rx.recharts.y_axis(type_="number", hide=True), 43 | rx.recharts.x_axis( 44 | data_key="month", 45 | type_="category", 46 | axis_line=False, 47 | tick_size=10, 48 | tick_line=False, 49 | custom_attrs={"fontSize": "12px"}, 50 | ), 51 | rx.recharts.legend(), 52 | data=data, 53 | width="100%", 54 | height=250, 55 | bar_gap=2, 56 | bar_size=25, 57 | ), 58 | info("Trending up by 5.2% this month", "2", "January - June 2024", "start"), 59 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 60 | ) 61 | -------------------------------------------------------------------------------- /buridan_ui/charts/bar/v4.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | get_cartesian_grid, 7 | get_x_axis, 8 | ) 9 | 10 | 11 | def barchart_v4(): 12 | data = [ 13 | {"month": "Jan", "desktop": 186}, 14 | {"month": "Feb", "desktop": 340}, 15 | {"month": "Mar", "desktop": 237}, 16 | {"month": "Apr", "desktop": 73}, 17 | {"month": "May", "desktop": 209}, 18 | {"month": "Jun", "desktop": 214}, 19 | ] 20 | 21 | return rx.box( 22 | info( 23 | "Bar Chart - Labeled", 24 | "3", 25 | "Showing total visitors for the last 6 months", 26 | "start", 27 | ), 28 | rx.recharts.bar_chart( 29 | get_cartesian_grid(), 30 | get_tooltip(), 31 | rx.recharts.bar( 32 | rx.recharts.label_list( 33 | data_key="desktop", 34 | position="top", 35 | stroke="10", 36 | offset=10, 37 | ), 38 | data_key="desktop", 39 | fill="var(--chart-1)", 40 | stack_id="a", 41 | radius=6, 42 | ), 43 | rx.recharts.y_axis(type_="number", hide=True), 44 | get_x_axis("month"), 45 | data=data, 46 | width="100%", 47 | height=250, 48 | margin={"top": 25}, 49 | bar_size=25, 50 | ), 51 | info("Trending up by 5.2% this month", "2", "January - June 2024", "start"), 52 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 53 | ) 54 | -------------------------------------------------------------------------------- /buridan_ui/charts/bar/v6.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | get_cartesian_grid, 7 | get_x_axis, 8 | ) 9 | 10 | 11 | def barchart_v6(): 12 | data = [ 13 | {"month": "Jan", "desktop": 186}, 14 | {"month": "Feb", "desktop": 340}, 15 | {"month": "Mar", "desktop": 237, "active": True}, 16 | {"month": "Apr", "desktop": 73}, 17 | {"month": "May", "desktop": 209}, 18 | {"month": "Jun", "desktop": 214}, 19 | ] 20 | 21 | modified_data = [ 22 | { 23 | **item, 24 | "stroke": ("var(--chart-3)" if item.get("active", False) else "none"), 25 | } 26 | for item in data 27 | ] 28 | 29 | return rx.box( 30 | info( 31 | "Bar Chart - Active", 32 | "3", 33 | "Showing total visitors for the last 6 months", 34 | "start", 35 | ), 36 | rx.recharts.bar_chart( 37 | get_cartesian_grid(), 38 | get_tooltip(), 39 | rx.recharts.bar( 40 | data_key="desktop", 41 | fill="var(--chart-1)", 42 | stack_id="a", 43 | radius=6, 44 | stroke="stroke", 45 | stroke_width=3, 46 | ), 47 | rx.recharts.y_axis(type_="number", hide=True), 48 | get_x_axis("month"), 49 | data=modified_data, 50 | width="100%", 51 | height=250, 52 | margin={"top": 25}, 53 | bar_size=25, 54 | ), 55 | info("Trending up by 5.2% this month", "2", "January - June 2024", "start"), 56 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 57 | ) 58 | -------------------------------------------------------------------------------- /buridan_ui/charts/bar/v7.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | ) 7 | 8 | 9 | def barchart_v7(): 10 | data = [ 11 | {"browser": "Chrome", "visitors": 275, "fill": "var(--chart-1)"}, 12 | {"browser": "Safari", "visitors": 200, "fill": "var(--chart-2)"}, 13 | {"browser": "Firefox", "visitors": 187, "fill": "var(--chart-3)"}, 14 | {"browser": "Edge", "visitors": 173, "fill": "var(--chart-4)"}, 15 | {"browser": "Other", "visitors": 90, "fill": "var(--chart-5)"}, 16 | ] 17 | 18 | return rx.box( 19 | info( 20 | "Bar Chart - Mixed", 21 | "3", 22 | "Showing total visitors for the last 6 months", 23 | "start", 24 | ), 25 | rx.recharts.bar_chart( 26 | get_tooltip(), 27 | rx.recharts.bar( 28 | data_key="visitors", 29 | fill="fill", 30 | radius=6, 31 | ), 32 | rx.recharts.x_axis(type_="number", hide=True, tick_size=0), 33 | rx.recharts.y_axis( 34 | data_key="browser", 35 | type_="category", 36 | axis_line=False, 37 | tick_size=10, 38 | tick_line=False, 39 | custom_attrs={"fontSize": "12px"}, 40 | ), 41 | data=data, 42 | layout="vertical", 43 | width="100%", 44 | height=250, 45 | ), 46 | info("Trending up by 5.2% this month", "2", "January - June 2024", "start"), 47 | margin_right="20px", 48 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 49 | ) 50 | -------------------------------------------------------------------------------- /buridan_ui/charts/bar/v8.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | from buridan_ui.charts.style import ( 3 | get_tooltip, 4 | get_cartesian_grid, 5 | ) 6 | 7 | 8 | def barchart_v8(): 9 | categories = ["Successful", "Refunded"] 10 | EUROPE = [ 11 | {"date": f"{month} 23", "Successful": successful, "Refunded": refunded} 12 | for month, successful, refunded in zip( 13 | [ 14 | "Jan", 15 | "Feb", 16 | "Mar", 17 | "Apr", 18 | "May", 19 | "Jun", 20 | "Jul", 21 | "Aug", 22 | "Sep", 23 | "Oct", 24 | "Nov", 25 | "Dec", 26 | ], 27 | [12, 24, 48, 24, 34, 26, 12, 38, 23, 20, 24, 21], 28 | [0, 1, 4, 2, 0, 0, 0, 2, 1, 0, 0, 8], 29 | ) 30 | ] 31 | 32 | ASIA = [ 33 | {"date": f"{month} 23", "Successful": successful, "Refunded": refunded} 34 | for month, successful, refunded in zip( 35 | [ 36 | "Jan", 37 | "Feb", 38 | "Mar", 39 | "Apr", 40 | "May", 41 | "Jun", 42 | "Jul", 43 | "Aug", 44 | "Sep", 45 | "Oct", 46 | "Nov", 47 | "Dec", 48 | ], 49 | [31, 32, 44, 23, 35, 48, 33, 38, 41, 39, 32, 19], 50 | [1, 2, 3, 2, 1, 1, 1, 3, 2, 1, 1, 5], 51 | ) 52 | ] 53 | 54 | def create_chart(data: list[dict[str, str | int]]): 55 | return rx.recharts.bar_chart( 56 | get_cartesian_grid(), 57 | rx.foreach( 58 | categories, 59 | lambda key, index: rx.recharts.bar( 60 | data_key=key, 61 | fill=f"var(--chart-{index + 1})", 62 | stack_id="_", 63 | ), 64 | ), 65 | rx.recharts.x_axis( 66 | interval=10, 67 | data_key="date", 68 | tick_size=10, 69 | class_name="text-xs font-semibold", 70 | axis_line=False, 71 | tick_line=False, 72 | ), 73 | get_tooltip(), 74 | data=data, 75 | width="100%", 76 | height=250, 77 | bar_size=25, 78 | ) 79 | 80 | return rx.box( 81 | rx.text("Online Transactions", class_name="text-md font-semibold pb-3"), 82 | rx.tabs.root( 83 | rx.tabs.list( 84 | rx.tabs.trigger( 85 | rx.text("Europe", class_name="text-sm font-semibold"), 86 | flex="1", 87 | value="1", 88 | ), 89 | rx.tabs.trigger( 90 | rx.text("Asia", class_name="text-sm font-semibold"), 91 | flex="1", 92 | value="2", 93 | ), 94 | ), 95 | rx.tabs.content(create_chart(EUROPE), value="1", margin_top="-5px"), 96 | rx.tabs.content(create_chart(ASIA), value="2", margin_top="-5px"), 97 | default_value="1", 98 | ), 99 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 100 | ) 101 | -------------------------------------------------------------------------------- /buridan_ui/charts/bar/v9.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | from buridan_ui.charts.style import ( 3 | get_tooltip, 4 | get_x_axis, 5 | ) 6 | 7 | 8 | def barchart_v9(): 9 | data = [ 10 | {"month": "Jan", "desktop": 186, "mobile": 80, "tablet": 50}, 11 | {"month": "Feb", "desktop": 305, "mobile": 200, "tablet": 120}, 12 | {"month": "Mar", "desktop": 237, "mobile": 120, "tablet": 70}, 13 | {"month": "Apr", "desktop": 73, "mobile": 190, "tablet": 30}, 14 | {"month": "May", "desktop": 209, "mobile": 130, "tablet": 80}, 15 | ] 16 | 17 | return rx.box( 18 | rx.hstack( 19 | rx.foreach( 20 | [ 21 | ["Desktop", "var(--chart-1)"], 22 | ["Mobile", "var(--chart-2)"], 23 | ["Tablet", "var(--chart-3)"], 24 | ], 25 | lambda key: rx.hstack( 26 | rx.box(class_name="w-3 h-3 rounded-sm", bg=key[1]), 27 | rx.text( 28 | key[0], 29 | class_name="text-sm font-semibold", 30 | color=rx.color("slate", 11), 31 | ), 32 | align="center", 33 | spacing="2", 34 | ), 35 | ), 36 | class_name="py-4 px-4 flex w-full flex justify-center gap-8", 37 | ), 38 | rx.recharts.bar_chart( 39 | get_tooltip(), 40 | rx.recharts.bar(data_key="desktop", fill="var(--chart-1)", radius=4), 41 | rx.recharts.bar(data_key="mobile", fill="var(--chart-2)", radius=4), 42 | rx.recharts.bar(data_key="tablet", fill="var(--chart-3)", radius=4), 43 | get_x_axis("month"), 44 | data=data, 45 | width="100%", 46 | height=250, 47 | ), 48 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 49 | ) 50 | -------------------------------------------------------------------------------- /buridan_ui/charts/doughnut/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def doughnutchart_v1(): 5 | data = [ 6 | {"browser": "chrome", "visitors": 275}, 7 | {"browser": "safari", "visitors": 200}, 8 | {"browser": "firefox", "visitors": 187}, 9 | {"browser": "edge", "visitors": 173}, 10 | {"browser": "other", "visitors": 90}, 11 | ] 12 | 13 | return rx.el.div( 14 | rx.recharts.pie_chart( 15 | rx.recharts.pie( 16 | rx.foreach( 17 | ["red", "blue", "green", "amber", "purple"], 18 | lambda color, index: rx.recharts.cell( 19 | fill="var(--chart-2)", class_name=f"theme-{color}" 20 | ), 21 | ), 22 | data=data, 23 | data_key="visitors", 24 | name_key="browser", 25 | stroke="0", 26 | inner_radius=90, 27 | custom_attrs={"paddingAngle": 3, "cornerRadius": 5}, 28 | ), 29 | width="100%", 30 | height=350, 31 | class_name="w-[100%] [&_.recharts-tooltip-item-separator]:w-full", 32 | ), 33 | rx.hstack( 34 | rx.foreach( 35 | [ 36 | ["Chrome", "red"], 37 | ["Safari", "blue"], 38 | ["Firefox", "green"], 39 | ["Edge", "amber"], 40 | ["Other", "purple"], 41 | ], 42 | lambda key: rx.hstack( 43 | rx.box(class_name="w-3 h-3 rounded-sm", bg=rx.color(key[1])), 44 | rx.text( 45 | key[0], 46 | class_name="text-sm font-semibold", 47 | color=rx.color("slate", 11), 48 | ), 49 | align="center", 50 | spacing="2", 51 | ), 52 | ), 53 | class_name="py-4 px-4 flex w-full justify-center flex-wrap", 54 | ), 55 | class_name="flex flex-col size-full relative", 56 | ) 57 | -------------------------------------------------------------------------------- /buridan_ui/charts/doughnut/v2.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def doughnutchart_v2(): 5 | data = [ 6 | {"browser": "chrome", "visitors": 275}, 7 | {"browser": "safari", "visitors": 200}, 8 | {"browser": "firefox", "visitors": 187}, 9 | {"browser": "edge", "visitors": 173}, 10 | {"browser": "other", "visitors": 90}, 11 | ] 12 | 13 | total_visitors = sum(item["visitors"] for item in data) 14 | 15 | return rx.el.div( 16 | rx.el.div( 17 | rx.el.label(total_visitors, class_name="text-4xl font-bold"), 18 | rx.el.label("Total Visitors", class_name="text-sm font-regular"), 19 | class_name="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col justify-center align-center items-center", 20 | ), 21 | rx.recharts.pie_chart( 22 | rx.recharts.pie( 23 | rx.foreach( 24 | ["red", "blue", "green", "amber", "purple"], 25 | lambda color, index: rx.recharts.cell( 26 | fill="var(--chart-2)", class_name=f"theme-{color}" 27 | ), 28 | ), 29 | data=data, 30 | data_key="visitors", 31 | name_key="browser", 32 | stroke="0", 33 | inner_radius=90, 34 | custom_attrs={"paddingAngle": 3, "cornerRadius": 5}, 35 | class_name="recharts-sector darK:hover:brightness-125 transition duration-200 ease", 36 | ), 37 | width="100%", 38 | height=350, 39 | class_name="w-[100%] [&_.recharts-tooltip-item-separator]:w-full", 40 | ), 41 | class_name="flex flex-col size-full relative", 42 | ) 43 | -------------------------------------------------------------------------------- /buridan_ui/charts/line/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | get_cartesian_grid, 7 | get_x_axis, 8 | ) 9 | 10 | 11 | def linechart_v1(): 12 | data = [ 13 | {"month": "Jan", "desktop": 186}, 14 | {"month": "Feb", "desktop": 305}, 15 | {"month": "Mar", "desktop": 237}, 16 | {"month": "Apr", "desktop": 73}, 17 | {"month": "May", "desktop": 209}, 18 | {"month": "Jun", "desktop": 214}, 19 | ] 20 | 21 | return rx.box( 22 | info( 23 | "Line Chart", 24 | "3", 25 | "Showing total visitors for the last 6 months", 26 | "start", 27 | ), 28 | rx.recharts.line_chart( 29 | get_tooltip(), 30 | get_cartesian_grid(), 31 | rx.recharts.line( 32 | data_key="desktop", 33 | stroke="var(--chart-1)", 34 | stroke_width=2, 35 | type_="natural", 36 | dot=False, 37 | ), 38 | get_x_axis("month"), 39 | data=data, 40 | width="100%", 41 | height=250, 42 | ), 43 | info("Trending up by 5.2% this month", "2", "January - June 2024", "start"), 44 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 45 | ) 46 | -------------------------------------------------------------------------------- /buridan_ui/charts/line/v2.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | get_cartesian_grid, 7 | get_x_axis, 8 | ) 9 | 10 | 11 | def linechart_v2(): 12 | data = [ 13 | {"month": "Jan", "desktop": 186}, 14 | {"month": "Feb", "desktop": 305}, 15 | {"month": "Mar", "desktop": 237}, 16 | {"month": "Apr", "desktop": 73}, 17 | {"month": "May", "desktop": 209}, 18 | {"month": "Jun", "desktop": 214}, 19 | ] 20 | 21 | return rx.box( 22 | info( 23 | "Line Chart - Linear", 24 | "3", 25 | "Showing total visitors for the last 6 months", 26 | "start", 27 | ), 28 | rx.recharts.line_chart( 29 | get_tooltip(), 30 | get_cartesian_grid(), 31 | rx.recharts.line( 32 | data_key="desktop", 33 | stroke="var(--chart-1)", 34 | stroke_width=2, 35 | type_="linear", 36 | dot=False, 37 | ), 38 | get_x_axis("month"), 39 | data=data, 40 | width="100%", 41 | height=250, 42 | ), 43 | info("Trending up by 5.2% this month", "2", "January - June 2024", "start"), 44 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 45 | ) 46 | -------------------------------------------------------------------------------- /buridan_ui/charts/line/v3.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | get_cartesian_grid, 7 | get_x_axis, 8 | ) 9 | 10 | 11 | def linechart_v3(): 12 | data = [ 13 | {"month": "Jan", "desktop": 186}, 14 | {"month": "Feb", "desktop": 305}, 15 | {"month": "Mar", "desktop": 237}, 16 | {"month": "Apr", "desktop": 73}, 17 | {"month": "May", "desktop": 209}, 18 | {"month": "Jun", "desktop": 214}, 19 | ] 20 | 21 | return rx.box( 22 | info( 23 | "Line Chart - Label", 24 | "3", 25 | "Showing total visitors for the last 6 months", 26 | "start", 27 | ), 28 | rx.recharts.line_chart( 29 | get_tooltip(), 30 | get_cartesian_grid(), 31 | rx.recharts.line( 32 | rx.recharts.label_list( 33 | position="top", 34 | offset=20, 35 | custom_attrs={"fontSize": "12px", "fontWeight": "bold"}, 36 | ), 37 | data_key="desktop", 38 | stroke="var(--chart-1)", 39 | stroke_width=2, 40 | type_="linear", 41 | dot=True, 42 | ), 43 | get_x_axis("month"), 44 | data=data, 45 | width="100%", 46 | height=250, 47 | margin={"left": 20, "right": 20, "top": 25}, 48 | ), 49 | info("Trending up by 5.2% this month", "2", "January - June 2024", "start"), 50 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 51 | ) 52 | -------------------------------------------------------------------------------- /buridan_ui/charts/line/v4.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | get_cartesian_grid, 7 | get_x_axis, 8 | ) 9 | 10 | 11 | def linechart_v4(): 12 | data = [ 13 | {"month": "Jan", "desktop": 186, "mobile": 80}, 14 | {"month": "Feb", "desktop": 305, "mobile": 200}, 15 | {"month": "Mar", "desktop": 237, "mobile": 120}, 16 | {"month": "Apr", "desktop": 73, "mobile": 190}, 17 | {"month": "May", "desktop": 209, "mobile": 130}, 18 | {"month": "Jun", "desktop": 214, "mobile": 140}, 19 | ] 20 | 21 | return rx.box( 22 | info( 23 | "Line Chart - Multiple", 24 | "3", 25 | "Showing total visitors for the last 6 months", 26 | "start", 27 | ), 28 | rx.recharts.line_chart( 29 | get_tooltip(), 30 | get_cartesian_grid(), 31 | rx.foreach( 32 | ["desktop", "mobile"], 33 | lambda name, index: rx.recharts.line( 34 | data_key=name, 35 | stroke=f"var(--chart-{index + 1})", 36 | stroke_width=2, 37 | type_="natural", 38 | dot=False, 39 | stack_id="a", 40 | ), 41 | ), 42 | get_x_axis("month"), 43 | data=data, 44 | width="100%", 45 | height=250, 46 | ), 47 | info("Trending up by 5.2% this month", "2", "January - June 2024", "start"), 48 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 49 | ) 50 | -------------------------------------------------------------------------------- /buridan_ui/charts/line/v5.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | get_cartesian_grid, 7 | ) 8 | 9 | 10 | def linechart_v5(): 11 | data = [ 12 | {"browser": "chrome", "visitors": 275}, 13 | {"browser": "safari", "visitors": 200}, 14 | {"browser": "firefox", "visitors": 187}, 15 | {"browser": "edge", "visitors": 173}, 16 | {"browser": "other", "visitors": 90}, 17 | ] 18 | 19 | return rx.box( 20 | info( 21 | "Line Chart - Title Label", 22 | "3", 23 | "Showing total visitors for the last 6 months", 24 | "start", 25 | ), 26 | rx.recharts.line_chart( 27 | get_tooltip(), 28 | get_cartesian_grid(), 29 | rx.recharts.line( 30 | rx.recharts.label_list( 31 | position="top", 32 | offset=20, 33 | custom_attrs={"fontSize": "12px", "fontWeight": "bold"}, 34 | data_key="browser", 35 | ), 36 | data_key="visitors", 37 | stroke="var(--chart-1)", 38 | stroke_width=2, 39 | type_="natural", 40 | dot=True, 41 | ), 42 | data=data, 43 | width="100%", 44 | height=250, 45 | margin={"left": 25, "right": 20, "top": 25}, 46 | ), 47 | info("Trending up by 5.2% this month", "2", "January - June 2024", "start"), 48 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 49 | ) 50 | -------------------------------------------------------------------------------- /buridan_ui/charts/line/v6.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | get_cartesian_grid, 7 | ) 8 | 9 | 10 | def linechart_v6(): 11 | data = [ 12 | {"browser": "chrome", "visitors": 275}, 13 | {"browser": "safari", "visitors": 200}, 14 | {"browser": "firefox", "visitors": 187}, 15 | {"browser": "edge", "visitors": 173}, 16 | {"browser": "other", "visitors": 90}, 17 | ] 18 | 19 | return rx.box( 20 | info( 21 | "Line Chart - Minimal", 22 | "3", 23 | "Showing total visitors for the last 6 months", 24 | "start", 25 | ), 26 | rx.recharts.line_chart( 27 | get_tooltip(), 28 | get_cartesian_grid(), 29 | rx.recharts.line( 30 | data_key="visitors", 31 | type_="natural", 32 | dot=False, 33 | stroke="var(--chart-1)", 34 | stroke_width=2, 35 | ), 36 | data=data, 37 | width="100%", 38 | height=250, 39 | margin={"left": 20, "right": 20, "top": 25}, 40 | ), 41 | info("Trending up by 5.2% this month", "2", "January - June 2024", "start"), 42 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 43 | ) 44 | -------------------------------------------------------------------------------- /buridan_ui/charts/line/v8.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | from buridan_ui.charts.style import ( 3 | get_tooltip, 4 | get_x_axis, 5 | ) 6 | 7 | 8 | def linechart_v8(): 9 | data = [ 10 | {"month": "Jan", "desktop": 186, "mobile": 80}, 11 | {"month": "Feb", "desktop": 305, "mobile": 200}, 12 | {"month": "Mar", "desktop": 237, "mobile": 120}, 13 | {"month": "Apr", "desktop": 73, "mobile": 190}, 14 | {"month": "May", "desktop": 209, "mobile": 130}, 15 | {"month": "Jun", "desktop": 214, "mobile": 140}, 16 | ] 17 | return rx.box( 18 | rx.hstack( 19 | rx.foreach( 20 | [["Desktop", "var(--chart-1)"], ["Mobile", "var(--chart-2)"]], 21 | lambda key: rx.hstack( 22 | rx.box(class_name="w-3 h-3 rounded-sm", bg=key[1]), 23 | rx.text( 24 | key[0], 25 | class_name="text-sm font-semibold", 26 | color=rx.color("slate", 11), 27 | ), 28 | align="center", 29 | spacing="2", 30 | ), 31 | ), 32 | class_name="py-4 px-4 flex w-full flex justify-center gap-8", 33 | ), 34 | rx.recharts.line_chart( 35 | get_tooltip(), 36 | rx.recharts.line( 37 | data_key="desktop", 38 | stroke="var(--chart-1)", 39 | type_="linear", 40 | dot=False, 41 | stroke_width=2, 42 | ), 43 | rx.recharts.line( 44 | data_key="mobile", 45 | stroke="var(--chart-2)", 46 | type_="linear", 47 | dot=False, 48 | stroke_width=2, 49 | ), 50 | get_x_axis("month"), 51 | data=data, 52 | width="100%", 53 | height=250, 54 | ), 55 | class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full", 56 | ) 57 | -------------------------------------------------------------------------------- /buridan_ui/charts/pie/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | ) 7 | 8 | 9 | def piechart_v1(): 10 | data = [ 11 | {"browser": "chrome", "visitors": 275}, 12 | {"browser": "safari", "visitors": 200}, 13 | {"browser": "firefox", "visitors": 187}, 14 | {"browser": "edge", "visitors": 173}, 15 | {"browser": "other", "visitors": 90}, 16 | ] 17 | 18 | return rx.box( 19 | info("Pie Chart", "3", "January - June 2024", "center"), 20 | rx.recharts.pie_chart( 21 | get_tooltip(), 22 | rx.recharts.pie( 23 | rx.foreach( 24 | range(6), 25 | lambda color, index: rx.recharts.cell( 26 | fill=f"var(--chart-{index + 1})", 27 | ), 28 | ), 29 | data=data, 30 | data_key="visitors", 31 | name_key="browser", 32 | stroke="0", 33 | ), 34 | width="100%", 35 | height=250, 36 | ), 37 | info( 38 | "Trending up by 5.2% this month", 39 | "2", 40 | "Showing total visitors for the last 6 months", 41 | "center", 42 | ), 43 | class_name="w-full flex flex-col gap-y-4 p-1 items-center [&_.recharts-tooltip-item-separator]:w-full", 44 | ) 45 | -------------------------------------------------------------------------------- /buridan_ui/charts/pie/v2.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | ) 7 | 8 | 9 | def piechart_v2(): 10 | data = [ 11 | {"browser": "chrome", "visitors": 275}, 12 | {"browser": "safari", "visitors": 200}, 13 | {"browser": "firefox", "visitors": 187}, 14 | {"browser": "edge", "visitors": 173}, 15 | {"browser": "other", "visitors": 90}, 16 | ] 17 | 18 | return rx.box( 19 | info("Pie Chart - Hovering Labels", "3", "January - June 2024", "center"), 20 | rx.recharts.pie_chart( 21 | get_tooltip(), 22 | rx.recharts.pie( 23 | rx.foreach( 24 | range(6), 25 | lambda color, index: rx.recharts.cell( 26 | fill=f"var(--chart-{index + 1})", 27 | ), 28 | ), 29 | data=data, 30 | data_key="visitors", 31 | name_key="browser", 32 | stroke="0", 33 | label=True, 34 | label_line=False, 35 | class_name="text-sm font-bold", 36 | ), 37 | width="100%", 38 | height=250, 39 | ), 40 | info( 41 | "Trending up by 5.2% this month", 42 | "2", 43 | "Showing total visitors for the last 6 months", 44 | "center", 45 | ), 46 | class_name="w-full flex flex-col gap-y-4 p-1 items-center [&_.recharts-tooltip-item-separator]:w-full", 47 | ) 48 | -------------------------------------------------------------------------------- /buridan_ui/charts/pie/v3.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | ) 7 | 8 | 9 | def piechart_v3(): 10 | data = [ 11 | {"browser": "chrome", "visitors": 275}, 12 | {"browser": "safari", "visitors": 200}, 13 | {"browser": "firefox", "visitors": 187}, 14 | {"browser": "edge", "visitors": 173}, 15 | {"browser": "other", "visitors": 90}, 16 | ] 17 | 18 | return rx.box( 19 | info("Pie Chart - Inner Labels", "3", "January - June 2024", "center"), 20 | rx.recharts.pie_chart( 21 | get_tooltip(), 22 | rx.recharts.pie( 23 | rx.recharts.label_list( 24 | fill=rx.color("slate", 12), 25 | class_name="text-sm font-bold", 26 | ), 27 | rx.foreach( 28 | range(6), 29 | lambda color, index: rx.recharts.cell( 30 | fill=f"var(--chart-{index + 1})", 31 | ), 32 | ), 33 | data=data, 34 | data_key="visitors", 35 | name_key="browser", 36 | stroke="0", 37 | ), 38 | width="100%", 39 | height=250, 40 | ), 41 | info( 42 | "Trending up by 5.2% this month", 43 | "2", 44 | "Showing total visitors for the last 6 months", 45 | "center", 46 | ), 47 | class_name="w-full flex flex-col gap-y-4 p-1 items-center [&_.recharts-tooltip-item-separator]:w-full", 48 | ) 49 | -------------------------------------------------------------------------------- /buridan_ui/charts/pie/v4.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | ) 7 | 8 | 9 | def piechart_v4(): 10 | data = [ 11 | {"browser": "chrome", "visitors": 275}, 12 | {"browser": "safari", "visitors": 200}, 13 | {"browser": "firefox", "visitors": 187}, 14 | {"browser": "edge", "visitors": 173}, 15 | {"browser": "other", "visitors": 90}, 16 | ] 17 | 18 | return rx.box( 19 | info("Pie Chart - Legend", "3", "January - June 2024", "center"), 20 | rx.recharts.pie_chart( 21 | get_tooltip(), 22 | rx.recharts.pie( 23 | rx.foreach( 24 | range(6), 25 | lambda color, index: rx.recharts.cell( 26 | fill=f"var(--chart-{index + 1})", 27 | ), 28 | ), 29 | data=data, 30 | data_key="visitors", 31 | name_key="browser", 32 | stroke="0", 33 | legend_type="square", 34 | ), 35 | rx.recharts.legend(class_name="text-sm font-bold"), 36 | width="100%", 37 | height=250, 38 | ), 39 | info( 40 | "Trending up by 5.2% this month", 41 | "2", 42 | "Showing total visitors for the last 6 months", 43 | "center", 44 | ), 45 | class_name="w-full flex flex-col gap-y-4 p-1 items-center [&_.recharts-tooltip-item-separator]:w-full", 46 | ) 47 | -------------------------------------------------------------------------------- /buridan_ui/charts/pie/v5.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | ) 7 | 8 | 9 | def piechart_v5(): 10 | data = [ 11 | {"browser": "chrome", "visitors": 275}, 12 | {"browser": "safari", "visitors": 200}, 13 | {"browser": "firefox", "visitors": 187}, 14 | {"browser": "edge", "visitors": 173}, 15 | {"browser": "other", "visitors": 90}, 16 | ] 17 | 18 | return rx.box( 19 | info("Pie Chart - Doughnut", "3", "January - June 2024", "center"), 20 | rx.recharts.pie_chart( 21 | get_tooltip(), 22 | rx.recharts.pie( 23 | rx.foreach( 24 | range(6), 25 | lambda color, index: rx.recharts.cell( 26 | fill=f"var(--chart-{index + 1})", 27 | ), 28 | ), 29 | data=data, 30 | data_key="visitors", 31 | name_key="browser", 32 | stroke="0", 33 | inner_radius=60, 34 | ), 35 | width="100%", 36 | height=250, 37 | ), 38 | info( 39 | "Trending up by 5.2% this month", 40 | "2", 41 | "Showing total visitors for the last 6 months", 42 | "center", 43 | ), 44 | class_name="w-full flex flex-col gap-y-4 p-1 items-center [&_.recharts-tooltip-item-separator]:w-full", 45 | ) 46 | -------------------------------------------------------------------------------- /buridan_ui/charts/pie/v6.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | ) 7 | 8 | 9 | def piechart_v6(): 10 | data = [ 11 | {"browser": "chrome", "visitors": 275}, 12 | {"browser": "safari", "visitors": 200}, 13 | {"browser": "firefox", "visitors": 187}, 14 | {"browser": "edge", "visitors": 173}, 15 | {"browser": "other", "visitors": 90}, 16 | ] 17 | 18 | return rx.box( 19 | info("Pie Chart - Active", "3", "January - June 2024", "center"), 20 | rx.recharts.pie_chart( 21 | get_tooltip(), 22 | rx.recharts.pie( 23 | rx.foreach( 24 | range(6), 25 | lambda color, index: rx.recharts.cell( 26 | fill=f"var(--chart-{index + 1})", 27 | ), 28 | ), 29 | data=data, 30 | data_key="visitors", 31 | name_key="browser", 32 | stroke="0", 33 | inner_radius=60, 34 | custom_attrs={ 35 | "strokeWidth": 5, 36 | "activeIndex": 1, 37 | "activeShape": {"outerRadius": 120}, 38 | }, 39 | ), 40 | width="100%", 41 | height=250, 42 | ), 43 | info( 44 | "Trending up by 5.2% this month", 45 | "2", 46 | "Showing total visitors for the last 6 months", 47 | "center", 48 | ), 49 | class_name="w-full flex flex-col gap-y-4 p-1 items-center [&_.recharts-tooltip-item-separator]:w-full", 50 | ) 51 | -------------------------------------------------------------------------------- /buridan_ui/charts/radar/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import info 4 | 5 | 6 | def radar_v1(): 7 | stats = [ 8 | {"category": "Farming", "score": 8}, 9 | {"category": "Fighting", "score": 7}, 10 | {"category": "Aggressiveness", "score": 6}, 11 | {"category": "Map Awareness", "score": 5}, 12 | {"category": "Objective Control", "score": 9}, 13 | {"category": "Positioning", "score": 7}, 14 | ] 15 | 16 | return rx.box( 17 | info( 18 | "Radar Chart", 19 | "3", 20 | "Player performance across key gameplay categories", 21 | "center", 22 | ), 23 | rx.recharts.radar_chart( 24 | rx.recharts.polar_grid( 25 | class_name=rx.color_mode_cond( 26 | "text-sm stroke-gray-300", 27 | "text-sm stroke-gray-700", 28 | ), 29 | ), 30 | rx.recharts.polar_angle_axis( 31 | data_key="category", 32 | class_name=rx.color_mode_cond( 33 | "text-sm stroke-gray-300", 34 | "text-sm stroke-gray-700", 35 | ), 36 | ), 37 | rx.recharts.radar( 38 | data_key="score", 39 | stroke="none", 40 | fill="var(--chart-1)", 41 | ), 42 | data=stats, 43 | width="100%", 44 | height=250, 45 | margin={"left": 20, "right": 20}, 46 | ), 47 | info( 48 | "Trending up by 5.2% this month", 49 | "2", 50 | "Performance trends in key gameplay categories", 51 | "center", 52 | ), 53 | class_name="w-full flex flex-col gap-y-4 p-1 items-center", 54 | ) 55 | -------------------------------------------------------------------------------- /buridan_ui/charts/radar/v2.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import info 4 | 5 | 6 | def radar_v2(): 7 | stats = [ 8 | {"category": "Farming", "score": 8}, 9 | {"category": "Fighting", "score": 7}, 10 | {"category": "Aggressiveness", "score": 6}, 11 | {"category": "Map Awareness", "score": 5}, 12 | {"category": "Objective Control", "score": 9}, 13 | {"category": "Positioning", "score": 7}, 14 | ] 15 | 16 | return rx.box( 17 | info( 18 | "Radar Chart - Dots", 19 | "3", 20 | "Player performance across key gameplay categories", 21 | "center", 22 | ), 23 | rx.recharts.radar_chart( 24 | rx.recharts.polar_grid( 25 | class_name=rx.color_mode_cond( 26 | "text-sm stroke-gray-300", 27 | "text-sm stroke-gray-700", 28 | ), 29 | ), 30 | rx.recharts.polar_angle_axis( 31 | data_key="category", 32 | class_name=rx.color_mode_cond( 33 | "text-sm stroke-gray-300", 34 | "text-sm stroke-gray-700", 35 | ), 36 | ), 37 | rx.recharts.radar( 38 | data_key="score", 39 | dot=True, 40 | stroke="var(--chart-2)", 41 | fill="var(--chart-1)", 42 | custom_attrs={"strokeWidth": 2}, 43 | ), 44 | data=stats, 45 | width="100%", 46 | height=250, 47 | margin={"left": 20, "right": 20}, 48 | ), 49 | info( 50 | "Trending up by 5.2% this month", 51 | "2", 52 | "Performance trends in key gameplay categories", 53 | "center", 54 | ), 55 | class_name="w-full flex flex-col gap-y-4 p-1 items-center", 56 | ) 57 | -------------------------------------------------------------------------------- /buridan_ui/charts/radar/v3.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | ) 7 | 8 | 9 | def radar_v3(): 10 | stats = [ 11 | {"category": "Farming", "score": 6, "average": 8}, 12 | {"category": "Fighting", "score": 8, "average": 9}, 13 | {"category": "Aggressiveness", "score": 5, "average": 8}, 14 | {"category": "Map Awareness", "score": 9, "average": 9}, 15 | {"category": "Objective Control", "score": 7, "average": 8}, 16 | {"category": "Positioning", "score": 6, "average": 9}, 17 | ] 18 | 19 | return rx.vstack( 20 | info( 21 | "Radar Chart - Stacked", 22 | "3", 23 | "Player performance across key gameplay categories", 24 | "center", 25 | ), 26 | rx.recharts.radar_chart( 27 | get_tooltip(), 28 | rx.recharts.polar_grid( 29 | class_name=rx.color_mode_cond( 30 | "text-sm stroke-gray-300", 31 | "text-sm stroke-gray-700", 32 | ), 33 | ), 34 | rx.recharts.polar_angle_axis( 35 | data_key="category", 36 | class_name=rx.color_mode_cond( 37 | "text-sm stroke-gray-300", 38 | "text-sm stroke-gray-700", 39 | ), 40 | ), 41 | rx.recharts.radar( 42 | data_key="average", fill_opacity=0.5, stroke="none", fill="teal" 43 | ), 44 | rx.recharts.radar( 45 | data_key="score", 46 | fill_opacity=1.0, 47 | stroke="none", 48 | fill="var(--chart-1)", 49 | ), 50 | data=stats, 51 | width="100%", 52 | height=250, 53 | margin={"left": 20, "right": 20}, 54 | ), 55 | info( 56 | "Trending up by 5.2% this month", 57 | "2", 58 | "Performance trends in key gameplay categories", 59 | "center", 60 | ), 61 | class_name="w-full flex flex-col gap-y-4 p-1 items-center [&_.recharts-tooltip-item-separator]:w-full", 62 | ) 63 | -------------------------------------------------------------------------------- /buridan_ui/charts/radar/v4.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | ) 7 | 8 | 9 | def radar_v4(): 10 | stats = [ 11 | {"category": "Farming", "score": 8, "average": 8}, 12 | {"category": "Fighting", "score": 7, "average": 9}, 13 | {"category": "Aggressiveness", "score": 6, "average": 8}, 14 | {"category": "Map Awareness", "score": 5, "average": 9}, 15 | {"category": "Objective Control", "score": 9, "average": 8}, 16 | {"category": "Positioning", "score": 7, "average": 9}, 17 | ] 18 | 19 | return rx.vstack( 20 | info( 21 | "Radar Chart - Lines Only", 22 | "3", 23 | "Player performance across key gameplay categories", 24 | "center", 25 | ), 26 | rx.recharts.radar_chart( 27 | get_tooltip(), 28 | rx.recharts.polar_grid( 29 | class_name=rx.color_mode_cond( 30 | "text-sm stroke-gray-300", 31 | "text-sm stroke-gray-700", 32 | ), 33 | ), 34 | rx.recharts.polar_angle_axis( 35 | data_key="category", 36 | class_name=rx.color_mode_cond( 37 | "text-sm stroke-gray-300", 38 | "text-sm stroke-gray-700", 39 | ), 40 | ), 41 | rx.recharts.radar( 42 | data_key="average", 43 | stroke="teal", 44 | fill="none", 45 | custom_attrs={"strokeWidth": 2}, 46 | ), 47 | rx.recharts.radar( 48 | data_key="score", 49 | fill="none", 50 | stroke="var(--chart-1)", 51 | custom_attrs={"strokeWidth": 2}, 52 | ), 53 | data=stats, 54 | width="100%", 55 | height=250, 56 | margin={"left": 20, "right": 20}, 57 | ), 58 | info( 59 | "Trending up by 5.2% this month", 60 | "2", 61 | "Performance trends in key gameplay categories", 62 | "center", 63 | ), 64 | class_name="w-full flex flex-col gap-y-4 p-1 items-center [&_.recharts-tooltip-item-separator]:w-full", 65 | ) 66 | -------------------------------------------------------------------------------- /buridan_ui/charts/radar/v5.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | ) 7 | 8 | 9 | def radar_v5(): 10 | stats = [ 11 | {"category": "Farming", "score": 8}, 12 | {"category": "Fighting", "score": 7}, 13 | {"category": "Aggressiveness", "score": 6}, 14 | {"category": "Map Awareness", "score": 5}, 15 | {"category": "Objective Control", "score": 9}, 16 | {"category": "Positioning", "score": 7}, 17 | ] 18 | 19 | return rx.box( 20 | info( 21 | "Radar Chart - Circle Grid", 22 | "3", 23 | "Player performance across key gameplay categories", 24 | "center", 25 | ), 26 | rx.recharts.radar_chart( 27 | get_tooltip(), 28 | rx.recharts.polar_grid( 29 | class_name=rx.color_mode_cond( 30 | "text-sm stroke-gray-300", 31 | "text-sm stroke-gray-700", 32 | ), 33 | grid_type="circle", 34 | ), 35 | rx.recharts.polar_angle_axis( 36 | data_key="category", 37 | class_name=rx.color_mode_cond( 38 | "text-sm stroke-gray-300", 39 | "text-sm stroke-gray-700", 40 | ), 41 | axis_line_type="circle", 42 | ), 43 | rx.recharts.radar( 44 | data_key="score", 45 | dot=True, 46 | stroke="var(--chart-2)", 47 | fill="var(--chart-1)", 48 | custom_attrs={"strokeWidth": 2}, 49 | ), 50 | data=stats, 51 | width="100%", 52 | height=250, 53 | margin={"left": 20, "right": 20}, 54 | ), 55 | info( 56 | "Trending up by 5.2% this month", 57 | "2", 58 | "Performance trends in key gameplay categories", 59 | "center", 60 | ), 61 | class_name="w-full flex flex-col gap-y-4 p-1 items-center [&_.recharts-tooltip-item-separator]:w-full", 62 | ) 63 | -------------------------------------------------------------------------------- /buridan_ui/charts/radar/v6.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.charts.style import ( 4 | info, 5 | get_tooltip, 6 | ) 7 | 8 | 9 | def radar_v6(): 10 | stats = [ 11 | {"category": "Farming", "score": 7}, 12 | {"category": "Fighting", "score": 6}, 13 | {"category": "Aggressiveness", "score": 7}, 14 | {"category": "Map Awareness", "score": 6}, 15 | {"category": "Objective Control", "score": 6}, 16 | {"category": "Positioning", "score": 7}, 17 | ] 18 | 19 | return rx.box( 20 | info( 21 | "Radar Chart - Filled Grid", 22 | "3", 23 | "Player performance across key gameplay categories", 24 | "center", 25 | ), 26 | rx.recharts.radar_chart( 27 | get_tooltip(), 28 | rx.recharts.polar_grid( 29 | class_name=rx.color_mode_cond( 30 | "text-sm stroke-gray-300 fill-[gray] opacity-20", 31 | "text-sm stroke-gray-700 fill-[gray] opacity-20", 32 | ), 33 | grid_type="circle", 34 | ), 35 | rx.recharts.polar_angle_axis( 36 | data_key="category", 37 | class_name=rx.color_mode_cond( 38 | "text-sm stroke-gray-300", 39 | "text-sm stroke-gray-700", 40 | ), 41 | axis_line_type="circle", 42 | ), 43 | rx.recharts.radar( 44 | data_key="score", 45 | dot=False, 46 | fill="var(--chart-1)", 47 | stroke="none", 48 | ), 49 | data=stats, 50 | width="100%", 51 | height=250, 52 | margin={"left": 20, "right": 20}, 53 | ), 54 | info( 55 | "Trending up by 5.2% this month", 56 | "2", 57 | "Performance trends in key gameplay categories", 58 | "center", 59 | ), 60 | class_name="w-full flex flex-col gap-y-4 p-1 items-center [&_.recharts-tooltip-item-separator]:w-full", 61 | ) 62 | -------------------------------------------------------------------------------- /buridan_ui/charts/scatter/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def scatterchart_v1(): 5 | scat = [ 6 | {"name": " ", "x": 10, "y": 30}, 7 | {"name": "B", "x": 20, "y": 50}, 8 | {"name": "C", "x": 30, "y": 70}, 9 | {"name": "D", "x": 40, "y": 20}, 10 | {"name": "E", "x": 50, "y": 90}, 11 | {"name": "F", "x": 60, "y": 40}, 12 | {"name": "G", "x": 70, "y": 60}, 13 | {"name": "H", "x": 80, "y": 100}, 14 | {"name": "I", "x": 90, "y": 10}, 15 | {"name": " ", "x": 100, "y": 80}, 16 | ] 17 | 18 | scat_2 = [ 19 | {"name": "K", "x": 5, "y": 15}, 20 | {"name": "L", "x": 15, "y": 40}, 21 | {"name": "M", "x": 25, "y": 60}, 22 | {"name": "N", "x": 35, "y": 10}, 23 | {"name": "O", "x": 45, "y": 80}, 24 | {"name": "P", "x": 55, "y": 30}, 25 | {"name": "Q", "x": 65, "y": 50}, 26 | {"name": "R", "x": 75, "y": 90}, 27 | {"name": "S", "x": 85, "y": 20}, 28 | {"name": "T", "x": 95, "y": 70}, 29 | ] 30 | return rx.el.div( 31 | rx.hstack( 32 | rx.foreach( 33 | [ 34 | ["Data 1", "blue"], 35 | ["Data 2", "orange"], 36 | ], 37 | lambda key: rx.hstack( 38 | rx.box(class_name="w-3 h-3 rounded-sm", bg=rx.color(key[1])), 39 | rx.text( 40 | key[0], 41 | class_name="text-sm font-semibold", 42 | color=rx.color("slate", 11), 43 | ), 44 | align="center", 45 | spacing="2", 46 | ), 47 | ), 48 | class_name="py-4 px-4 flex w-full flex justify-center gap-8", 49 | ), 50 | rx.recharts.scatter_chart( 51 | rx.recharts.scatter(data=scat, data_key="name"), 52 | rx.recharts.scatter(data=scat_2, data_key="name", fill=rx.color("orange")), 53 | rx.recharts.y_axis( 54 | data_key="y", 55 | hide=True, 56 | ), 57 | rx.recharts.x_axis( 58 | data_key="x", 59 | type_="number", 60 | axis_line=False, 61 | tick_size=10, 62 | tick_line=False, 63 | custom_attrs={"fontSize": "12px"}, 64 | ), 65 | width="100%", 66 | height=350, 67 | class_name="px-4", 68 | ), 69 | class_name="flex flex-col size-full", 70 | ) 71 | -------------------------------------------------------------------------------- /buridan_ui/charts/style.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | tooltip = { 4 | "is_animation_active": False, 5 | "separator": "", 6 | "cursor": False, 7 | "item_style": { 8 | "color": "currentColor", 9 | "display": "flex", 10 | "paddingBottom": "0px", 11 | "justifyContent": "space-between", 12 | "textTransform": "capitalize", 13 | }, 14 | "label_style": { 15 | "color": rx.color("slate", 10), 16 | "fontWeight": "500", 17 | }, 18 | "content_style": { 19 | "background": rx.color_mode_cond("oklch(0.97 0.00 0)", "oklch(0.14 0.00 286)"), 20 | "borderColor": rx.color("slate", 5), 21 | "borderRadius": "5px", 22 | "fontFamily": "IBM Plex Mono,ui-monospace,monospace", 23 | "fontSize": "0.875rem", 24 | "lineHeight": "1.25rem", 25 | "fontWeight": "500", 26 | "letterSpacing": "-0.01rem", 27 | "minWidth": "8rem", 28 | "width": "175px", 29 | "padding": "0.375rem 0.625rem ", 30 | "position": "relative", 31 | }, 32 | } 33 | 34 | 35 | def info(title: str, size: str, subtitle: str, align: str): 36 | return rx.vstack( 37 | rx.heading(title, size=size, weight="bold"), 38 | rx.text(subtitle, size="1", color=rx.color("slate", 11), weight="medium"), 39 | spacing="1", 40 | align=align, 41 | ) 42 | 43 | 44 | def get_tooltip(): 45 | """Standard tooltip for all charts.""" 46 | return rx.recharts.graphing_tooltip(**tooltip) 47 | 48 | 49 | def get_cartesian_grid(): 50 | """Standard cartesian grid for charts.""" 51 | return rx.recharts.cartesian_grid( 52 | horizontal=True, vertical=False, class_name="opacity-25" 53 | ) 54 | 55 | 56 | def get_x_axis(data_key: str): 57 | """Standard X axis configuration.""" 58 | return rx.recharts.x_axis( 59 | data_key=data_key, 60 | axis_line=False, 61 | tick_size=10, 62 | tick_line=False, 63 | custom_attrs={"fontSize": "12px"}, 64 | interval="preserveStartEnd", 65 | ) 66 | -------------------------------------------------------------------------------- /buridan_ui/config.py: -------------------------------------------------------------------------------- 1 | import os 2 | 3 | VERSION = "v.0.6.7" 4 | NAME = "buridan_ui" 5 | 6 | BURIDAN_URL = "https://buridan-ui.reflex.run/" 7 | BURIDAN_SLOGAN = ( 8 | "Beautifully designed Reflex components to build your web apps faster. Open source." 9 | ) 10 | BURIDAN_KEY_WORDS = ( 11 | "buridan, ui, web apps, framework, open source, frontend, backend, full stack" 12 | ) 13 | 14 | 15 | BASE_GITHUB_URL = "https://github.com/LineIndent/buridan-ui/blob/main/buridan_ui/" 16 | SITE_LOGO_URL = "https://raw.githubusercontent.com/buridan-ui/ui/refs/heads/main/assets/new_logo.PNG" 17 | 18 | current_dir = os.path.dirname(os.path.abspath(__file__)) 19 | project_root = os.path.abspath(os.path.join(current_dir, "..", "..")) 20 | 21 | LOCAL_BASE_PRO_PATH = os.path.join(project_root, NAME, NAME, "pro") 22 | LOCAL_BASE_CHART_PATH = os.path.join(project_root, NAME, NAME, "charts") 23 | LOCAL_BASE_PANTRY_PATH = os.path.join(project_root, NAME, NAME, "pantry") 24 | 25 | BASE_PANTRY_PATH = BASE_GITHUB_URL + "pantry/" 26 | BASE_CHART_PATH = BASE_GITHUB_URL + "charts/" 27 | 28 | 29 | SITE_THEME = "dark" 30 | FONT_FAMILY = "JetBrains Mono,ui-monospace,monospace" 31 | 32 | SITE_META_TAGS = [ 33 | {"name": "application-name", "content": "Buridan UI"}, 34 | {"name": "keywords", "content": BURIDAN_KEY_WORDS}, 35 | {"name": "description", "content": BURIDAN_SLOGAN}, 36 | {"property": "og:url", "content": BURIDAN_URL}, 37 | {"property": "og:type", "content": "website"}, 38 | {"property": "og:title", "content": "Buridan UI"}, 39 | {"property": "og:description", "content": BURIDAN_SLOGAN}, 40 | {"property": "og:image", "content": SITE_LOGO_URL}, 41 | {"property": "og:image:width", "content": "1200"}, 42 | {"property": "og:image:height", "content": "630"}, 43 | {"name": "twitter:card", "content": "summary_large_image"}, 44 | {"property": "twitter:domain", "content": BURIDAN_URL}, 45 | {"property": "twitter:url", "content": BURIDAN_URL}, 46 | {"name": "twitter:title", "content": "Buridan UI"}, 47 | {"name": "twitter:description", "content": BURIDAN_SLOGAN}, 48 | {"name": "twitter:image", "content": SITE_LOGO_URL}, 49 | ] 50 | -------------------------------------------------------------------------------- /buridan_ui/pantry/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/pantry/__init__.py -------------------------------------------------------------------------------- /buridan_ui/pantry/accordions/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | items1 = [ 4 | "01. Genesis launched a new era of exploration.", 5 | "02. Explorer uncovered new planets beyond our reach.", 6 | "03. Voyager 1 ventured into interstellar space.", 7 | "04. Apollo landed humans on the Moon.", 8 | ] 9 | 10 | items2 = [ 11 | "05. Curiosity sent back valuable data from Mars.", 12 | "06. The Hubble Telescope captured distant galaxies.", 13 | "07. James Webb will explore the universe's origins.", 14 | "08. The ISS orbits Earth, conducting critical experiments.", 15 | ] 16 | 17 | items3 = [ 18 | "09. Saturn's rings have fascinated scientists for years.", 19 | "10. The Mars Rover is studying the planet's surface.", 20 | "11. NASA's Artemis program aims to return humans to the Moon.", 21 | "12. Solar missions help us understand space weather.", 22 | ] 23 | 24 | 25 | def create_accordion_item(title, items): 26 | return rx.accordion.item( 27 | rx.accordion.header( 28 | rx.accordion.trigger( 29 | rx.text(title, size="1", weight="medium"), 30 | rx.accordion.icon(size=14), 31 | padding="0.5em 0.1em", 32 | color=rx.color("slate", 12), 33 | _hover={"bg": "none"}, 34 | ), 35 | ), 36 | rx.accordion.content( 37 | rx.vstack( 38 | rx.foreach( 39 | items, 40 | lambda item: rx.text(item, size="1", color=rx.color("slate", 11)), 41 | ), 42 | spacing="2", 43 | color=rx.color("slate", 12), 44 | ), 45 | padding="0em 0.1em", 46 | ), 47 | border_bottom=f"0.81px solid {rx.color('gray', 5)}", 48 | ) 49 | 50 | 51 | def accordion_v1(): 52 | return rx.box( 53 | rx.accordion.root( 54 | create_accordion_item("Models", items1), 55 | create_accordion_item("Spacecraft", items2), 56 | create_accordion_item("Space Discoveries", items3), 57 | border_bottom=f"0.81px solid {rx.color('gray', 5)}", 58 | collapsible=True, 59 | width="100%", 60 | max_width="28em", 61 | variant="ghost", 62 | color_scheme="gray", 63 | border_radius="0", 64 | gap="0", 65 | easing="ease-out", 66 | ), 67 | width="100%", 68 | height="40vh", 69 | display="flex", 70 | justify_content="center", 71 | align_items="center", 72 | ) 73 | -------------------------------------------------------------------------------- /buridan_ui/pantry/animations/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def animation_v1() -> rx.Component: 5 | return rx.vstack( 6 | rx.heading( 7 | "buridan/ui", 8 | size="5", 9 | font_weight="900", 10 | style={ 11 | "position": "relative", 12 | "@keyframes opacity": { 13 | "0%": {"opacity": "0"}, 14 | "100%": {"opacity": "1"}, 15 | }, 16 | "animation": "opacity 2s infinite", 17 | }, 18 | ), 19 | width="100%", 20 | height="20em", 21 | align="center", 22 | justify="center", 23 | ) 24 | -------------------------------------------------------------------------------- /buridan_ui/pantry/animations/v2.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def animation_v2() -> rx.Component: 5 | return rx.vstack( 6 | rx.heading( 7 | "buridan/ui", 8 | size="5", 9 | font_weight="900", 10 | style={ 11 | "position": "relative", 12 | "animation": "rightSlide 2s infinite", 13 | "@keyframes rightSlide": { 14 | "from": {"right": "-30px", "opacity": "0"}, 15 | "to": {"right": "0px", "opacity": "1"}, 16 | }, 17 | }, 18 | ), 19 | width="100%", 20 | height="20em", 21 | align="center", 22 | justify="center", 23 | ) 24 | -------------------------------------------------------------------------------- /buridan_ui/pantry/animations/v3.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def animation_v3() -> rx.Component: 5 | return rx.vstack( 6 | rx.heading( 7 | "buridan/ui", 8 | size="5", 9 | font_weight="900", 10 | style={ 11 | "position": "relative", 12 | "animation": "shakeEffect 0.5s ease-in-out infinite", 13 | "@keyframes shakeEffect": { 14 | "0%": {"transform": "translateX(0)"}, 15 | "25%": {"transform": "translateX(-10px)"}, 16 | "50%": {"transform": "translateX(10px)"}, 17 | "75%": {"transform": "translateX(-10px)"}, 18 | "100%": {"transform": "translateX(0)"}, 19 | }, 20 | }, 21 | ), 22 | width="100%", 23 | height="20em", 24 | align="center", 25 | justify="center", 26 | ) 27 | -------------------------------------------------------------------------------- /buridan_ui/pantry/backgrounds/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def background_v1(): 5 | return rx.center( 6 | rx.heading("Buridan UI", size="8", weight="bold"), 7 | background_size="20px 20px", 8 | background_image="radial-gradient(circle, hsl(0, 0%, 39%) 1px, transparent 1px)", 9 | mask="radial-gradient(50% 100% at 50% 50%, hsl(0, 0%, 0%, 1), hsl(0, 0%, 0%, 0))", 10 | width="100%", 11 | height="65vh", 12 | ) 13 | -------------------------------------------------------------------------------- /buridan_ui/pantry/backgrounds/v2.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def background_v2(): 5 | return rx.center( 6 | rx.heading("Buridan UI", size="8", weight="bold", z_index="10"), 7 | background_size="100px 100px", 8 | background_image="linear-gradient(hsl(0, 0%, 39%) 1px, transparent 1px), linear-gradient(to right, transparent 99%, hsl(0, 0%, 39%) 100%)", 9 | mask="radial-gradient(50% 100% at 50% 50%, hsl(0, 0%, 0%, 1), hsl(0, 0%, 0%, 0))", 10 | width="100%", 11 | height="65vh", 12 | ) 13 | -------------------------------------------------------------------------------- /buridan_ui/pantry/backgrounds/v3.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def background_v3(): 5 | return rx.box( 6 | rx.box( 7 | background_size="18px 18px", 8 | background_image=f"radial-gradient(circle, {rx.color('indigo', 7)} 1px, transparent 1px), radial-gradient(circle, {rx.color('indigo', 10)} 1px, transparent 1px), radial-gradient(circle, {rx.color('indigo', 12)} 1px, transparent 1px)", 9 | mask="radial-gradient(50% 100% at 50% 100%, hsl(0, 0%, 0%, 1), hsl(0, 0%, 0%, 0))", 10 | width="100%", 11 | height="65vh", 12 | ), 13 | rx.center( 14 | rx.heading("Buridan UI", size="7", weight="bold", z_index="20"), 15 | position="absolute", 16 | top="50%", 17 | left="50%", 18 | transform="translate(-50%, -50%)", 19 | ), 20 | width="100%", 21 | height="65vh", 22 | position="relative", 23 | ) 24 | -------------------------------------------------------------------------------- /buridan_ui/pantry/backgrounds/v4.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def background_v4(): 5 | return rx.box( 6 | rx.box( 7 | background_size="20px 20px", 8 | background_image="radial-gradient(circle, hsl(0, 0%, 39%) 1px, transparent 1px), radial-gradient(circle, hsl(0, 0%, 45%) 1px, transparent 1px)", 9 | mask="linear-gradient(to bottom, hsl(0, 0%, 0%, 0.5), hsl(0, 0%, 0%, 0))", 10 | width="100%", 11 | height="65vh", 12 | ), 13 | rx.center( 14 | rx.heading("Buridan UI", size="7", weight="bold", z_index="20"), 15 | position="absolute", 16 | top="50%", 17 | left="50%", 18 | transform="translate(-50%, -50%)", 19 | ), 20 | width="100%", 21 | height="65vh", 22 | position="relative", 23 | ) 24 | -------------------------------------------------------------------------------- /buridan_ui/pantry/cards/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def card_v1(): 5 | return rx.box( 6 | rx.box( 7 | color=rx.color("gray", 4), 8 | class_name=( 9 | "w-full h-full " 10 | + "col-start-2 row-span-full row-start-1 bg-[size:10px_10px] bg-fixed bg-[image:repeating-linear-gradient(315deg,currentColor_0,currentColor_1px,_transparent_0,_transparent_50%)]" 11 | ), 12 | ), 13 | class_name=( 14 | "w-full h-72 max-w-[35em] " 15 | + "p-4 " 16 | + "rounded-md border border-dashed border-gray-600 " 17 | ), 18 | ) 19 | -------------------------------------------------------------------------------- /buridan_ui/pantry/cards/v2.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def card_v2(): 5 | return rx.box( 6 | rx.box( 7 | color=rx.color("gray", 4), 8 | class_name=( 9 | "w-full h-12 " 10 | + "col-start-2 row-span-full row-start-1 bg-[size:10px_10px] bg-fixed bg-[image:repeating-linear-gradient(315deg,currentColor_0,currentColor_1px,_transparent_0,_transparent_50%)]" 11 | ), 12 | ), 13 | rx.divider(), 14 | rx.box( 15 | color=rx.color("gray", 4), 16 | class_name=( 17 | "w-full h-64 " 18 | + "col-start-2 row-span-full row-start-1 bg-[size:10px_10px] bg-fixed bg-[image:repeating-linear-gradient(315deg,currentColor_0,currentColor_1px,_transparent_0,_transparent_50%)]" 19 | ), 20 | ), 21 | class_name=( 22 | "w-full max-w-[35em] " 23 | + "flex flex-col p-4 gap-y-2 " 24 | + "rounded-md border border-dashed border-gray-600 " 25 | ), 26 | ) 27 | -------------------------------------------------------------------------------- /buridan_ui/pantry/cards/v3.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def card_v3(): 5 | return rx.box( 6 | rx.box( 7 | color=rx.color("gray", 4), 8 | class_name=( 9 | "w-full h-64 " 10 | + "col-start-2 row-span-full row-start-1 bg-[size:10px_10px] bg-fixed bg-[image:repeating-linear-gradient(315deg,currentColor_0,currentColor_1px,_transparent_0,_transparent_50%)]" 11 | ), 12 | ), 13 | rx.divider(), 14 | rx.box( 15 | color=rx.color("gray", 4), 16 | class_name=( 17 | "w-full h-12 " 18 | + "col-start-2 row-span-full row-start-1 bg-[size:10px_10px] bg-fixed bg-[image:repeating-linear-gradient(315deg,currentColor_0,currentColor_1px,_transparent_0,_transparent_50%)]" 19 | ), 20 | ), 21 | class_name=( 22 | "w-full max-w-[35em] " 23 | + "flex flex-col p-4 gap-y-2 " 24 | + "rounded-md border border-dashed border-gray-600 " 25 | ), 26 | ) 27 | -------------------------------------------------------------------------------- /buridan_ui/pantry/cards/v4.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def card_v4(): 5 | return rx.box( 6 | rx.box( 7 | color=rx.color("gray", 4), 8 | class_name=( 9 | "w-full h-12 " 10 | + "col-start-2 row-span-full row-start-1 bg-[size:10px_10px] bg-fixed bg-[image:repeating-linear-gradient(315deg,currentColor_0,currentColor_1px,_transparent_0,_transparent_50%)]" 11 | ), 12 | ), 13 | rx.divider(), 14 | rx.box( 15 | color=rx.color("gray", 4), 16 | class_name=( 17 | "w-full h-64 " 18 | + "col-start-2 row-span-full row-start-1 bg-[size:10px_10px] bg-fixed bg-[image:repeating-linear-gradient(315deg,currentColor_0,currentColor_1px,_transparent_0,_transparent_50%)]" 19 | ), 20 | ), 21 | rx.divider(), 22 | rx.box( 23 | color=rx.color("gray", 4), 24 | class_name=( 25 | "w-full h-12 " 26 | + "col-start-2 row-span-full row-start-1 bg-[size:10px_10px] bg-fixed bg-[image:repeating-linear-gradient(315deg,currentColor_0,currentColor_1px,_transparent_0,_transparent_50%)]" 27 | ), 28 | ), 29 | class_name=( 30 | "w-full max-w-[35em] " 31 | + "flex flex-col p-4 gap-y-2 " 32 | + "rounded-md border border-dashed border-gray-600 " 33 | ), 34 | ) 35 | -------------------------------------------------------------------------------- /buridan_ui/pantry/faq/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | data: list[dict[str, str]] = [ 4 | { 5 | "question": "Can I cancel at anytime?", 6 | "answers": "Yes, you can cancel anytime no questions are asked while you cancel but we would highly appreciate if you will give us some feedback.", 7 | }, 8 | { 9 | "question": "My team has credits. How do we use them?", 10 | "answers": "Once your team signs up for a subscription plan. This is where we sit down, grab a cup of coffee and dial in the details.", 11 | }, 12 | { 13 | "question": "How does Buridan's UI pricing work?", 14 | "answers": "Our subscriptions are tiered. Understanding the task at hand and ironing out the wrinkles is key.", 15 | }, 16 | { 17 | "question": "How secure is Buridan/Ui?", 18 | "answers": "Protecting the data you trust is our first priority. This part is really crucial in keeping the project in line to completion.", 19 | }, 20 | { 21 | "question": "How do I get access to a theme I purchased?", 22 | "answers": "If you lose the link for a theme you purchased, don't panic! We've got you covered. You can login to your account, tap your avatar in the upper right corner, and tap Purchases. If you didn't create a login or can't remember the information, you can use our handy Redownload page, just remember to use the same email you originally made your purchases with.", 23 | }, 24 | { 25 | "question": "Upgrade License Type", 26 | "answers": "There may be times when you need to upgrade your license from the original type you purchased and we have a solution that ensures you can apply your original purchase cost to the new license purchase.", 27 | }, 28 | ] 29 | 30 | 31 | def txt(string: str, shade: int) -> rx.Component: 32 | return rx.text(string, weight="bold", color=rx.color("gray", shade), size="1") 33 | 34 | 35 | def question_and_answer(question: str, answer: str): 36 | return rx.hstack( 37 | rx.vstack( 38 | txt(question, 11), 39 | txt(answer, 12), 40 | align="start", 41 | spacing="2", 42 | ), 43 | width="100%", 44 | align="start", 45 | padding="16px 0px", 46 | border_top=f"0.75px solid {rx.color('gray', 4)}", 47 | ) 48 | 49 | 50 | def faq_v1(): 51 | return rx.vstack( 52 | rx.heading( 53 | "Frequently Asked Questions", 54 | size="4", 55 | weight="bold", 56 | align="center", 57 | ), 58 | *[question_and_answer(item["question"], item["answers"]) for item in data], 59 | width="100%", 60 | max_width="35em", 61 | height="100%", 62 | ) 63 | -------------------------------------------------------------------------------- /buridan_ui/pantry/featured/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | data = [ 4 | { 5 | "image": "auditors", 6 | "title": "Pharmacists", 7 | "description": "Azurill can be seen bouncing and playing on its big, rubbery tail", 8 | }, 9 | { 10 | "image": "lawyers", 11 | "title": "Lawyers", 12 | "description": "Fans obsess over the particular length and angle of its arms", 13 | }, 14 | { 15 | "image": "accountants", 16 | "title": "Bank owners", 17 | "description": "They divvy up their prey evenly among the members of their pack", 18 | }, 19 | { 20 | "image": "others", 21 | "title": "Others", 22 | "description": "Phanpy uses its long nose to shower itself", 23 | }, 24 | ] 25 | 26 | 27 | def create_featured(title: str, description: str): 28 | return rx.hstack( 29 | rx.box( 30 | width="42px", 31 | height="42px", 32 | bg=rx.color("gray", 4), 33 | border_radius="10px", 34 | ), 35 | rx.vstack( 36 | rx.text(title, size="2", weight="bold"), 37 | rx.text(description, size="1", weight="medium", color_scheme="gray"), 38 | spacing="1", 39 | width=["90%" if i <= 1 else "60%" for i in range(6)], 40 | ), 41 | width="100%", 42 | padding="12px 0px", 43 | ) 44 | 45 | 46 | def featured_v1(): 47 | return rx.vstack( 48 | rx.heading( 49 | "PharmLand is not just for Doctors", 50 | size="4", 51 | color=rx.color("slate", 12), 52 | ), 53 | rx.text( 54 | "Its lungs contain an organ that creates electricity. The crackling sound of electricity can be heard when it exhales. Azurill’s tail is large and bouncy. It is packed full of the nutrients this Pokémon needs to grow.", 55 | color=rx.color("slate", 11), 56 | ), 57 | rx.hstack( 58 | *[create_featured(item["title"], item["description"]) for item in data], 59 | width="100%", 60 | display="grid", 61 | grid_template_columns=[ 62 | "repeat(1, 1fr)" if i <= 1 else "repeat(2, 1fr)" for i in range(6) 63 | ], 64 | justify_content="start", 65 | align_items="start", 66 | padding="24px 0px", 67 | spacing="0", 68 | wrap="wrap", 69 | ), 70 | width="100%", 71 | max_width="35em", 72 | display="flex", 73 | justify="center", 74 | align="start", 75 | ) 76 | -------------------------------------------------------------------------------- /buridan_ui/pantry/featured/v2.py: -------------------------------------------------------------------------------- 1 | from __future__ import annotations 2 | 3 | from dataclasses import dataclass, field 4 | 5 | import reflex as rx 6 | 7 | 8 | @dataclass 9 | class FeaturesStyle: 10 | base: dict[str, str] = field( 11 | default_factory=lambda: { 12 | "width": "100%", 13 | "overflow": "hidden", 14 | "gap": "2rem", 15 | "wrap": "wrap", 16 | }, 17 | ) 18 | 19 | base_item: dict[str, str | dict] = field( 20 | default_factory=lambda: { 21 | "spacing": "1", 22 | "flex": "1 1 300px", 23 | "padding": "0.5rem", 24 | }, 25 | ) 26 | 27 | 28 | FeaturesStyle: FeaturesStyle = FeaturesStyle() 29 | 30 | 31 | features = { 32 | 0: { 33 | "tag": "sun-moon", 34 | "title": "Light & Dark Mode", 35 | "description": "Easily switch between themes.", 36 | }, 37 | 1: { 38 | "tag": "copyright", 39 | "title": "Open Source License", 40 | "description": "Free, flexible, and open usage.", 41 | }, 42 | 2: { 43 | "tag": "component", 44 | "title": "Pre-designed Components", 45 | "description": "Simple copy-and-paste components.", 46 | }, 47 | 4: { 48 | "tag": "code", 49 | "title": "Pure Python", 50 | "description": "Single stack, single language solution.", 51 | }, 52 | 5: { 53 | "tag": "bot-message-square", 54 | "title": "A.I. Applications", 55 | "description": "Seamlessly integrate A.I. functionality.", 56 | }, 57 | 7: { 58 | "tag": "frame", 59 | "title": "Minimalistic Design", 60 | "description": "Clean, simple, and sleek UI designs.", 61 | }, 62 | } 63 | 64 | 65 | def feature_item_title(tag: str, title: str) -> rx.Component: 66 | return rx.hstack( 67 | rx.badge( 68 | rx.icon(tag=tag, size=20), 69 | variant="surface", 70 | width="21px", 71 | height="21px", 72 | padding="5px", 73 | ), 74 | rx.text(title, weight="bold", size="1", color=rx.color("slate", 12)), 75 | align="center", 76 | spacing="2", 77 | ) 78 | 79 | 80 | def feature_item_description(description: str) -> rx.Component: 81 | return rx.hstack( 82 | rx.text(description, weight="medium", size="1", color=rx.color("slate", 11)), 83 | ) 84 | 85 | 86 | def feature_item(_: str, __: str, ___: str) -> rx.Component: 87 | return rx.vstack( 88 | feature_item_title(_, __), 89 | feature_item_description(___), 90 | **FeaturesStyle.base_item, 91 | ) 92 | 93 | 94 | def featured_v2(): 95 | return rx.hstack( 96 | *[ 97 | feature_item(item["tag"], item["title"], item["description"]) 98 | for item in features.values() 99 | ], 100 | **FeaturesStyle.base, 101 | ) 102 | -------------------------------------------------------------------------------- /buridan_ui/pantry/footers/v2.py: -------------------------------------------------------------------------------- 1 | from dataclasses import dataclass, field 2 | 3 | import reflex as rx 4 | from reflex.constants.colors import Color 5 | 6 | from buridan_ui.pantry.footers.v1 import FooterV1Style 7 | 8 | active: Color = rx.color("slate", 12) 9 | passive: Color = rx.color("slate", 10) 10 | 11 | 12 | @dataclass 13 | class FooterV2Style: 14 | base: dict[str, str] = field( 15 | default_factory=lambda: { 16 | "width": "100%", 17 | "height": "20vh", 18 | "align": "center", 19 | "justify": "center", 20 | "padding": "0em 1em", 21 | }, 22 | ) 23 | 24 | content: dict[str, str] = field( 25 | default_factory=lambda: { 26 | "width": "100%", 27 | "max_width": "35em", 28 | "justify": "between", 29 | "align": "center", 30 | "padding": "1em 0em", 31 | }, 32 | ) 33 | 34 | link: dict[str, str] = field( 35 | default_factory=lambda: {"color": passive, "size": "2"}, 36 | ) 37 | 38 | brand: dict[str, str] = field( 39 | default_factory=lambda: {"color": active, "size": "2"}, 40 | ) 41 | 42 | 43 | FooterV2Style: FooterV2Style = FooterV2Style() 44 | 45 | 46 | def media(name: str) -> rx.Component: 47 | return rx.link(rx.text(name, **FooterV1Style.link), href="#") 48 | 49 | 50 | def footer_v2() -> rx.vstack: 51 | return rx.vstack( 52 | rx.divider(max_width="35em", color=rx.color("slate", 11)), 53 | rx.hstack( 54 | rx.text("© 2024 Buridan UI", **FooterV2Style.brand), 55 | rx.hstack(media("Twitter"), media("Dribble"), media("GitHub")), 56 | **FooterV2Style.content, 57 | ), 58 | **FooterV2Style.base, 59 | ) 60 | -------------------------------------------------------------------------------- /buridan_ui/pantry/forms/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | services = [ 4 | ["Website Design", "Content Creation"], 5 | ["UX Design", "Consulting"], 6 | ["Research", "Other"], 7 | ] 8 | 9 | 10 | def item_and_title(title: str, placeholder: str): 11 | return rx.vstack( 12 | rx.text(title, font_size="11px", weight="medium", color_scheme="gray"), 13 | rx.input(placeholder=placeholder, width="100%"), 14 | width="100%", 15 | spacing="2", 16 | ) 17 | 18 | 19 | def check_box_item(name: str): 20 | return rx.box(rx.checkbox(name), width="100%") 21 | 22 | 23 | def forms_v1(): 24 | return rx.vstack( 25 | rx.vstack( 26 | rx.heading("Contact our team", size="5", weight="bold"), 27 | rx.text( 28 | "Got any questions about the product? We're here to help. Fill out the form below to get started.", 29 | font_size="12px", 30 | weight="medium", 31 | color_scheme="gray", 32 | text_align="center", 33 | ), 34 | width="100%", 35 | spacing="1", 36 | align="center", 37 | padding="12px 0px", 38 | ), 39 | rx.hstack( 40 | item_and_title("First Name", "First name"), 41 | item_and_title("Last Name", "Last name"), 42 | width="100%", 43 | display="flex", 44 | ), 45 | item_and_title("Email", "example@someplace.com"), 46 | rx.vstack( 47 | rx.text("Message", font_size="11px", color_scheme="gray", weight="medium"), 48 | rx.text_area( 49 | width="100%", 50 | placeholder="Leave us message...", 51 | rows="5", 52 | ), 53 | width="100%", 54 | spacing="2", 55 | ), 56 | rx.vstack( 57 | rx.text("Services", font_size="11px", color_scheme="gray", weight="medium"), 58 | *[ 59 | rx.hstack( 60 | check_box_item(x), 61 | check_box_item(y), 62 | width="100%", 63 | ) 64 | for x, y in services 65 | ], 66 | width="100%", 67 | spacing="2", 68 | ), 69 | rx.spacer(), 70 | rx.button( 71 | "Continue", 72 | width="100%", 73 | cursor="pointer", 74 | variant="surface", 75 | color_scheme="gray", 76 | ), 77 | width="100%", 78 | max_width="21em", 79 | height="100%", 80 | justify="center", 81 | align="center", 82 | ) 83 | -------------------------------------------------------------------------------- /buridan_ui/pantry/forms/v2.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | department = ["Team", "Billing", "Deployment", "Account", "Support"] 4 | priority = ["1 - highest", "2", "3", "4 - lowest"] 5 | 6 | 7 | def create_menu(default: str, items: list[str]): 8 | return rx.select(items, placeholder=default, width="48%") 9 | 10 | 11 | def create_button(name: str, flex_width: str): 12 | return rx.button( 13 | name, 14 | variant="soft", 15 | flex=flex_width, 16 | cursor="pointer", 17 | color_scheme="gray", 18 | ) 19 | 20 | 21 | def forms_v2(): 22 | return rx.vstack( 23 | rx.vstack( 24 | rx.heading("Report an issue", size="5", weight="bold"), 25 | rx.text( 26 | "What area are you having problems with?", 27 | font_size="12px", 28 | weight="medium", 29 | color_scheme="gray", 30 | ), 31 | width="100%", 32 | spacing="1", 33 | align="center", 34 | padding="6px 0px", 35 | ), 36 | rx.vstack( 37 | rx.text("Tags", font_size="11px", color_scheme="gray", weight="bold"), 38 | rx.hstack( 39 | *[ 40 | create_menu(name, items) 41 | for name, items in [ 42 | ["Department", department], 43 | ["Priority", priority], 44 | ] 45 | ], 46 | width="100%", 47 | ), 48 | width="100%", 49 | spacing="2", 50 | ), 51 | rx.vstack( 52 | rx.text("Subject", font_size="11px", color_scheme="gray", weight="bold"), 53 | rx.input(width="100%", placeholder="I need help with..."), 54 | width="100%", 55 | spacing="2", 56 | ), 57 | rx.vstack( 58 | rx.text( 59 | "Description", 60 | font_size="11px", 61 | color_scheme="gray", 62 | weight="bold", 63 | ), 64 | rx.text_area( 65 | width="100%", 66 | placeholder="Please include all information relevant to your issue.", 67 | rows="5", 68 | ), 69 | width="100%", 70 | spacing="2", 71 | ), 72 | rx.hstack( 73 | create_button("Cancel", "1"), 74 | create_button("Submit", "3"), 75 | width="100%", 76 | display="flex,", 77 | padding="12px 0px", 78 | ), 79 | width="100%", 80 | max_width="21em", 81 | height="100%", 82 | justify="center", 83 | align="center", 84 | padding="2.5em 0em", 85 | ) 86 | -------------------------------------------------------------------------------- /buridan_ui/pantry/forms/v3.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | data = [ 4 | { 5 | "title": "Messages", 6 | "description": "Direct messages you have received from other users", 7 | }, 8 | { 9 | "title": "Review requests", 10 | "description": "Code review requests from your team members", 11 | }, 12 | { 13 | "title": "Comments", 14 | "description": "Daily digest with comments on your posts", 15 | }, 16 | { 17 | "title": "Recommendations", 18 | "description": "Digest with best community posts from previous week", 19 | }, 20 | ] 21 | 22 | 23 | def forms_v3(): 24 | return rx.vstack( 25 | rx.vstack( 26 | rx.heading( 27 | "Configure notifications", 28 | size="2", 29 | color=rx.color("slate", 12), 30 | ), 31 | rx.text( 32 | "Choose what notifications you want to receive", 33 | font_size="10px", 34 | color=rx.color("slate", 11), 35 | ), 36 | spacing="1", 37 | ), 38 | *[ 39 | rx.hstack( 40 | rx.vstack( 41 | rx.heading( 42 | item["title"], 43 | size="1", 44 | color=rx.color("slate", 11), 45 | weight="medium", 46 | ), 47 | rx.text( 48 | item["description"], 49 | font_size="10px", 50 | color=rx.color("slate", 12), 51 | ), 52 | spacing="1", 53 | ), 54 | rx.switch(), 55 | width="100%", 56 | align="center", 57 | justify="between", 58 | padding="5px 0px", 59 | ) 60 | for item in data 61 | ], 62 | max_width="26em", 63 | width="100%", 64 | padding="1em", 65 | border_radius="10px", 66 | border="1px solid hsla(0, 0%, 45%, 0.5)", 67 | ) 68 | -------------------------------------------------------------------------------- /buridan_ui/pantry/inputs/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def input_v1(): 5 | return rx.box( 6 | rx.text("Email", class_name="text-xs font-semibold"), 7 | rx.el.input( 8 | placeholder="something@email.com", 9 | class_name=( 10 | "p-2 w-full " 11 | + "text-sm " 12 | + "rounded-md bg-transparent border border-gray-500/40 " 13 | + "focus:outline-none focus:border-blue-500 shadow-sm" 14 | ), 15 | ), 16 | class_name="w-full max-w-[20em] flex flex-col gap-y-2", 17 | ) 18 | -------------------------------------------------------------------------------- /buridan_ui/pantry/inputs/v2.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def input_v2(): 5 | return rx.box( 6 | rx.box( 7 | rx.text( 8 | "Email", 9 | class_name="text-xs font-semibold", 10 | ), 11 | rx.text("optional", class_name="text-xs font-light text-gray-400"), 12 | class_name="w-full flex flex-row justify-between items-center", 13 | ), 14 | rx.el.input( 15 | placeholder="something@email.com", 16 | class_name=( 17 | "p-2 w-full " 18 | + "text-sm " 19 | + "rounded-md bg-transparent border border-gray-500/40 " 20 | + "focus:outline-none focus:border-blue-500" 21 | ), 22 | ), 23 | class_name="w-full max-w-[20em] flex flex-col gap-y-2", 24 | ) 25 | -------------------------------------------------------------------------------- /buridan_ui/pantry/inputs/v3.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def input_v3(): 5 | return rx.box( 6 | rx.text("Email", class_name="text-xs font-semibold"), 7 | rx.box( 8 | rx.icon( 9 | tag="mail", 10 | class_name="absolute left-2 top-1/2 transform -translate-y-1/2 size-5 " 11 | + rx.color_mode_cond( 12 | "!text-gray-400", 13 | "!text-gray-600", 14 | ).to(str), 15 | ), 16 | rx.el.input( 17 | placeholder="something@email.com", 18 | class_name=( 19 | "pl-9 py-2 w-full " 20 | + "text-sm " 21 | + "rounded-md bg-transparent border border-gray-500/40 " 22 | + "focus:outline-none focus:border-blue-500" 23 | ), 24 | ), 25 | class_name="relative focus:outline-none", 26 | ), 27 | class_name="w-full max-w-[20em] flex flex-col gap-y-2", 28 | ) 29 | -------------------------------------------------------------------------------- /buridan_ui/pantry/inputs/v4.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def input_v4(): 5 | return rx.box( 6 | rx.text("Website URL", class_name="text-xs font-semibold"), 7 | rx.box( 8 | rx.text( 9 | "https://", 10 | class_name="absolute left-2 top-1/2 transform -translate-y-1/2 text-sm", 11 | ), 12 | rx.el.input( 13 | placeholder="buridan-ui.reflex.run", 14 | class_name=( 15 | "pl-[4em] py-2 w-full " 16 | + "text-sm " 17 | + "rounded-md bg-transparent border border-gray-500/40 " 18 | + "focus:outline-none focus:border-blue-500" 19 | ), 20 | ), 21 | class_name="relative focus:outline-none", 22 | ), 23 | class_name="w-full max-w-[20em] flex flex-col gap-y-2", 24 | ) 25 | -------------------------------------------------------------------------------- /buridan_ui/pantry/inputs/v5.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def input_v5(): 5 | return rx.box( 6 | rx.text("Price", class_name="text-xs font-semibold"), 7 | rx.box( 8 | rx.text( 9 | "$", 10 | class_name="absolute left-2 top-1/2 transform -translate-y-1/2 text-md", 11 | ), 12 | rx.text( 13 | "USD", 14 | class_name="absolute right-2 top-1/2 transform -translate-y-1/2 text-sm", 15 | ), 16 | rx.el.input( 17 | placeholder="0.00", 18 | class_name="pl-6 py-2 w-full " 19 | + "text-sm " 20 | + "rounded-md bg-transparent border border-gray-500/40 " 21 | + "focus:outline-none focus:border-blue-500", 22 | ), 23 | class_name="relative focus:outline-none", 24 | ), 25 | class_name="w-full max-w-[20em] flex flex-col gap-y-2", 26 | ) 27 | -------------------------------------------------------------------------------- /buridan_ui/pantry/lists/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | design = ["Figma", "Sketch"] 4 | development = ["HTML", "CSS", "Tailwind CSS", "React", "Vue"] 5 | collaboration = ["Mailchimp", "Slack", "Notion"] 6 | expertise = [ 7 | "UI/UX Design", 8 | "Design Systems", 9 | "Custom Illustrations", 10 | "Responsive Design", 11 | ] 12 | skills = [ 13 | "Strong communication", 14 | "Problem-solving", 15 | "Attention to detail", 16 | "Time management", 17 | ] 18 | 19 | 20 | def create_list_item(title: str, items: list[str]): 21 | return rx.hstack( 22 | rx.text(title, weight="medium", color=rx.color("slate", 11), size="1"), 23 | rx.hstack( 24 | *[ 25 | rx.text(item, weight="bold", color=rx.color("slate", 12), size="1") 26 | for item in items 27 | ], 28 | justify="start", 29 | wrap="wrap", 30 | spacing="2", 31 | width="100%", 32 | max_width="20em", 33 | ), 34 | justify="between", 35 | wrap="wrap", 36 | width="100%", 37 | max_width="30em", 38 | spacing="2", 39 | ) 40 | 41 | 42 | def lists_v1(): 43 | return rx.vstack( 44 | create_list_item("Design Tools:", design), 45 | create_list_item("Development:", development), 46 | create_list_item("Collaboration:", collaboration), 47 | create_list_item("Design Expertise:", expertise), 48 | create_list_item("Soft Skills:", skills), 49 | width="100%", 50 | align="center", 51 | justify="center", 52 | ) 53 | -------------------------------------------------------------------------------- /buridan_ui/pantry/logins/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def login_button(name: str, *args, **kwargs) -> rx.button: 5 | return rx.button( 6 | *args, 7 | name, 8 | **kwargs, 9 | **{ 10 | "width": "100%", 11 | "cursor": "pointer", 12 | "variant": "surface", 13 | "color_scheme": "gray", 14 | }, 15 | ) 16 | 17 | 18 | def logins_v1(): 19 | return rx.vstack( 20 | rx.vstack( 21 | rx.heading("Create an account", size="5", weight="bold"), 22 | rx.text( 23 | "Enter your email below to create your account", 24 | font_size="12px", 25 | weight="medium", 26 | color_scheme="gray", 27 | ), 28 | width="100%", 29 | spacing="1", 30 | align="center", 31 | ), 32 | rx.form( 33 | rx.box( 34 | rx.input( 35 | width="100%", placeholder="something@example.com", name="input" 36 | ), 37 | login_button("Sign In with Email", type="submit"), 38 | class_name="w-full gap-y-2 flex flex-col", 39 | ), 40 | on_submit=lambda data: rx.toast( 41 | f"You submitted the following data: {rx.Var.create(data).to_string()}" 42 | ), 43 | ), 44 | rx.hstack( 45 | rx.divider(width="30%"), 46 | rx.text("OR CONTINUE WITH", font_size="10px", color_scheme="gray"), 47 | rx.divider(width="30%"), 48 | width="100%", 49 | align="center", 50 | justify="center", 51 | padding="5px 0px", 52 | ), 53 | login_button("Sign In with Email", rx.icon(tag="github", size=15)), 54 | rx.text( 55 | "By clicking continue, you agree to our ", 56 | rx.text("Terms of Service", as_="u"), 57 | " and ", 58 | rx.text("Privacy Policy", as_="u"), 59 | ".", 60 | font_size="11px", 61 | color_scheme="gray", 62 | text_align="center", 63 | padding="5px 0px", 64 | ), 65 | width="100%", 66 | max_width="21em", 67 | height="100%", 68 | justify="center", 69 | align="center", 70 | ) 71 | -------------------------------------------------------------------------------- /buridan_ui/pantry/logins/v2.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def login_button(name: str, *args, **kwargs) -> rx.button: 5 | return rx.button( 6 | *args, 7 | name, 8 | **kwargs, 9 | **{ 10 | "flex": "1", 11 | "cursor": "pointer", 12 | "variant": "surface", 13 | "color_scheme": "gray", 14 | }, 15 | ) 16 | 17 | 18 | def logins_v2(): 19 | return rx.vstack( 20 | rx.vstack( 21 | rx.heading("Create an account", size="5", weight="bold"), 22 | rx.text( 23 | "Enter your email below to create your account", 24 | font_size="12px", 25 | weight="medium", 26 | color_scheme="gray", 27 | ), 28 | width="100%", 29 | spacing="1", 30 | align="center", 31 | ), 32 | rx.hstack( 33 | login_button("GitHub", rx.icon(tag="github", size=15)), 34 | login_button("Mail", rx.icon(tag="mail", size=15)), 35 | width="100%", 36 | ), 37 | rx.hstack( 38 | rx.divider(width="30%"), 39 | rx.text("OR CONTINUE WITH", font_size="10px", color_scheme="gray"), 40 | rx.divider(width="30%"), 41 | width="100%", 42 | align="center", 43 | justify="center", 44 | padding="5px 0px", 45 | ), 46 | rx.form( 47 | rx.vstack( 48 | rx.input( 49 | width="100%", placeholder="something@example.com", name="email" 50 | ), 51 | rx.input( 52 | width="100%", 53 | placeholder="password", 54 | type="password", 55 | name="password", 56 | ), 57 | rx.button( 58 | "Create Account", 59 | width="100%", 60 | cursor="pointer", 61 | variant="surface", 62 | color_scheme="gray", 63 | type="submit", 64 | ), 65 | width="100%", 66 | ), 67 | on_submit=lambda data: rx.toast( 68 | f"You submitted the following data: {rx.Var.create(data).to_string()}" 69 | ), 70 | ), 71 | rx.text( 72 | "By clicking continue, you agree to our ", 73 | rx.text("Terms of Service", as_="u"), 74 | " and ", 75 | rx.text("Privacy Policy", as_="u"), 76 | ".", 77 | font_size="11px", 78 | color_scheme="gray", 79 | text_align="center", 80 | padding="5px 0px", 81 | ), 82 | width="100%", 83 | max_width="21em", 84 | height="100%", 85 | justify="center", 86 | align="center", 87 | ) 88 | -------------------------------------------------------------------------------- /buridan_ui/pantry/menus/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | class Content(rx.State): 5 | links: list[dict[str, str]] = [ 6 | {"label": "Usage", "link": "#usage", "color": "gray"}, 7 | {"label": "Position and placement", "link": "#position", "color": "gray"}, 8 | {"label": "With other overlays", "link": "#overlays", "color": "gray"}, 9 | {"label": "Manage focus", "link": "#focus", "color": "gray"}, 10 | {"label": "Examples", "link": "#1", "color": "gray"}, 11 | {"label": "Show on focus", "link": "#2", "color": "gray"}, 12 | {"label": "Show on hover", "link": "#3", "color": "gray"}, 13 | {"label": "With form", "link": "#4", "color": "gray"}, 14 | ] 15 | 16 | index: int = 0 17 | position_y: str = "10px" 18 | 19 | async def toggle_table_content(self, index: int, item: dict[str, str]) -> None: 20 | self.links = [ 21 | ( 22 | {**data, "color": rx.color("slate", 11)} 23 | if data["label"] != item["label"] 24 | else {**data, "color": rx.color("slate", 12)} 25 | ) 26 | for data in self.links 27 | ] 28 | self.position_y = f"{10 + (index * 30)}px" 29 | 30 | 31 | def items(index: int, data: dict[str, str]): 32 | return rx.hstack( 33 | rx.link( 34 | rx.text( 35 | data["label"], 36 | font_size="12px", 37 | color=data["color"], 38 | weight="medium", 39 | on_click=Content.toggle_table_content(index, data), 40 | ), 41 | href=data["link"], 42 | text_decoration="none", 43 | ), 44 | border_left=f"1px solid {rx.color('gray', 5)}", 45 | width="200px", 46 | height="30px", 47 | align="center", 48 | justify="start", 49 | padding_left="15px", 50 | border_radius="0px 5px 5px 0px", 51 | ) 52 | 53 | 54 | def item_header(): 55 | return rx.hstack( 56 | rx.text("Menu Items", font_size="11px", color_scheme="gray", weight="medium"), 57 | rx.icon(tag="puzzle", size=12), 58 | width="100%", 59 | justify="between", 60 | align="center", 61 | border_left=f"1px solid {rx.color('gray', 5)}", 62 | border_radius="0px 5px 5px 0px", 63 | padding_left="15px", 64 | padding_right="15px", 65 | height="30px", 66 | bg=rx.color("gray", 3), 67 | ) 68 | 69 | 70 | def menus_v1(): 71 | return rx.vstack( 72 | item_header(), 73 | rx.vstack( 74 | rx.box( 75 | width="10px", 76 | height="10px", 77 | border_radius="10px", 78 | bg=rx.color("blue"), 79 | position="absolute", 80 | left="-4.5px", 81 | top=Content.position_y, 82 | transition="all 200ms ease-out", 83 | ), 84 | rx.foreach( 85 | Content.links, 86 | lambda data, index: items(index, data), 87 | ), 88 | spacing="0", 89 | position="relative", 90 | ), 91 | spacing="0", 92 | ) 93 | -------------------------------------------------------------------------------- /buridan_ui/pantry/onboardings/v1.py: -------------------------------------------------------------------------------- 1 | from __future__ import annotations 2 | 3 | import reflex as rx 4 | 5 | steps = [ 6 | { 7 | "id": 1, 8 | "type": "done", 9 | "title": "Sign in with your account", 10 | "description": "To get started, log in with your organization account from your company.", 11 | "href": "#", 12 | }, 13 | { 14 | "id": 2, 15 | "type": "in progress", 16 | "title": "Import data", 17 | "description": "Connect your database to the new workspace by using one of 20+ database connectors.", 18 | "href": "#", 19 | }, 20 | { 21 | "id": 3, 22 | "type": "open", 23 | "title": "Create your first report", 24 | "description": "Generate your first report by using our pre-built templates or easy-to-use report builder.", 25 | "href": "#", 26 | }, 27 | ] 28 | 29 | 30 | def create_progress_item(data: dict[str, int | str]): 31 | return rx.hstack( 32 | rx.vstack( 33 | rx.vstack( 34 | rx.hstack( 35 | rx.checkbox( 36 | default_checked=data["type"] == "done", 37 | disabled=data["type"] != "done", 38 | ), 39 | rx.text( 40 | data["title"], 41 | size="3", 42 | weight="bold", 43 | color=rx.color("slate", 12), 44 | ), 45 | align="center", 46 | ), 47 | rx.hstack( 48 | rx.text(data["description"], size="1", color=rx.color("slate", 11)), 49 | ), 50 | spacing="2", 51 | ), 52 | spacing="5", 53 | ), 54 | width="100%", 55 | align="start", 56 | justify="start", 57 | border_radius="8px", 58 | padding="12px", 59 | bg=rx.color("gray", 4) if data["type"] == "in progress" else "none", 60 | ) 61 | 62 | 63 | def onboardings_v1(): 64 | return rx.vstack( 65 | rx.vstack( 66 | rx.heading( 67 | "Hello, Danny", 68 | size="5", 69 | weight="bold", 70 | color=rx.color("slate", 12), 71 | ), 72 | rx.text( 73 | "Let's set up your first data workspace", 74 | color=rx.color("slate", 11), 75 | weight="medium", 76 | size="1", 77 | ), 78 | spacing="1", 79 | align="start", 80 | justify="start", 81 | width="100%", 82 | ), 83 | *[create_progress_item(data) for data in steps], 84 | width="100%", 85 | align="center", 86 | justify="center", 87 | max_width="25em", 88 | padding="12px", 89 | ) 90 | -------------------------------------------------------------------------------- /buridan_ui/pantry/payments/v1.py: -------------------------------------------------------------------------------- 1 | import calendar 2 | from datetime import datetime 3 | 4 | import reflex as rx 5 | 6 | current_year = datetime.now().year 7 | 8 | 9 | def create_menu(default: str, items: list[str]): 10 | return rx.box(rx.select(items, placeholder=default, width="100%"), flex_grow="1") 11 | 12 | 13 | def payments_v1(): 14 | return rx.vstack( 15 | rx.vstack( 16 | rx.heading("Payment Method", size="5", weight="bold"), 17 | rx.text( 18 | "Add a new payment method to your account.", 19 | font_size="12px", 20 | weight="medium", 21 | color_scheme="gray", 22 | ), 23 | width="100%", 24 | spacing="1", 25 | align="center", 26 | padding="12px 0px", 27 | ), 28 | rx.hstack( 29 | *[ 30 | rx.button( 31 | rx.text(name, font_size="11px", weight="medium"), 32 | height="68px", 33 | flex="1", 34 | variant="surface", 35 | cursor="pointer", 36 | color_scheme="gray", 37 | ) 38 | for name in ["Card", "Paypal", "Apple"] 39 | ], 40 | width="100%", 41 | justify="between", 42 | ), 43 | rx.vstack( 44 | rx.input(width="100%", placeholder="Your name..."), 45 | rx.input(width="100%", placeholder="Card number..."), 46 | rx.input(placeholder="CVV", width="100%"), 47 | rx.hstack( 48 | *[ 49 | create_menu(name, items) 50 | for name, items in [ 51 | ["Month", list(calendar.month_name)[1:]], 52 | [ 53 | "Year", 54 | [ 55 | str(year) 56 | for year in range(current_year, current_year + 10) 57 | ], 58 | ], 59 | ] 60 | ], 61 | width="100%", 62 | display="flex", 63 | ), 64 | spacing="4", 65 | padding="12px 0px", 66 | width="100%", 67 | ), 68 | rx.button( 69 | "Continue", 70 | width="100%", 71 | cursor="pointer", 72 | variant="surface", 73 | color_scheme="gray", 74 | ), 75 | width="100%", 76 | max_width="21em", 77 | height="100%", 78 | justify="center", 79 | align="center", 80 | padding="24px 0px", 81 | ) 82 | -------------------------------------------------------------------------------- /buridan_ui/pantry/popups/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | __prompts__ = [ 4 | [ 5 | "Vivamus suscipit tortor eget", 6 | "Phasellus volutpat metus ac urna egestas, sed consequat quam lacinia.", 7 | ], 8 | [ 9 | "Integer malesuada nunc vel", 10 | "Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.", 11 | ], 12 | [ 13 | "Nullam quis risus eget urna", 14 | "Donec ullamcorper nulla non metus auctor fringilla. Vestibulum dapibus nunc ac augue.", 15 | ], 16 | [ 17 | "Etiam sit amet orci eget", 18 | "Cras ultricies ligula sed magna dictum porta. Integer tincidunt nulla in velit.", 19 | ], 20 | [ 21 | "Curabitur non nulla sit amet", 22 | "Quisque velit nisi, pretium ut lacinia in, elementum id enim. Proin eget tortor risus.", 23 | ], 24 | [ 25 | "Sed porttitor lectus nibh", 26 | "Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur arcu erat, accumsan id imperdiet et.", 27 | ], 28 | [ 29 | "Aliquam erat volutpat", 30 | "Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat.", 31 | ], 32 | [ 33 | "Quisque velit nisi", 34 | "Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.", 35 | ], 36 | [ 37 | "Mauris blandit aliquet", 38 | "Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat.", 39 | ], 40 | [ 41 | "Pellentesque in ipsum", 42 | "Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.", 43 | ], 44 | ] 45 | 46 | border = rx.color_mode_cond( 47 | f"1px solid {rx.color('indigo', 3)}", 48 | f"1px solid {rx.color('slate', 7, True)}", 49 | ) 50 | background = rx.color_mode_cond( 51 | rx.color("indigo", 1), 52 | rx.color("indigo", 3), 53 | ) 54 | 55 | box_shadow = rx.color_mode_cond("0px 1px 3px rgba(25, 33, 61, 0.1)", "none") 56 | 57 | 58 | title = rx.hstack( 59 | rx.text("Prompt Library", size="6", weight="bold"), 60 | rx.dialog.close(rx.icon(tag="x", size=20, cursor="pointer")), 61 | width="100%", 62 | align="center", 63 | justify="between", 64 | ) 65 | 66 | 67 | def popups_v1(): 68 | return rx.center( 69 | rx.dialog.root( 70 | rx.dialog.trigger( 71 | rx.button( 72 | "Open Dialog", 73 | variant="surface", 74 | color_scheme="gray", 75 | cursor="pointer", 76 | ), 77 | ), 78 | rx.dialog.content( 79 | title, 80 | rx.vstack( 81 | *[ 82 | rx.vstack( 83 | rx.text(name, color=rx.color("slate", 11)), 84 | rx.text(subtitle, color=rx.color("slate", 12)), 85 | spacing="1", 86 | ) 87 | for name, subtitle in __prompts__ 88 | ], 89 | height="45vh", 90 | overflow="scroll", 91 | mask="linear-gradient(to bottom, hsl(0, 0%, 0%, 1) 90%, hsl(0, 0%, 0%, 0) 100%)", 92 | padding="12px 0px", 93 | ), 94 | ), 95 | ), 96 | height="25vh", 97 | ) 98 | -------------------------------------------------------------------------------- /buridan_ui/pantry/popups/v2.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def popups_v2(): 5 | return rx.center( 6 | rx.dialog.root( 7 | rx.dialog.trigger( 8 | rx.button( 9 | "Open Dialog", 10 | variant="surface", 11 | color_scheme="gray", 12 | cursor="pointer", 13 | ), 14 | ), 15 | rx.dialog.content( 16 | rx.hstack( 17 | rx.text( 18 | "Need more help?", 19 | size="4", 20 | weight="bold", 21 | color=rx.color("slate", 11), 22 | ), 23 | justify="center", 24 | padding="15px 0px 5px 0px", 25 | ), 26 | rx.vstack( 27 | rx.vstack( 28 | rx.button( 29 | "Message Us", 30 | radius="full", 31 | padding="20px", 32 | width="100%", 33 | variant="surface", 34 | cursor="pointer", 35 | ), 36 | rx.button( 37 | "Live Chat", 38 | radius="full", 39 | padding="20px", 40 | width="100%", 41 | variant="surface", 42 | color_scheme="gray", 43 | cursor="pointer", 44 | ), 45 | rx.text( 46 | "● Chat Online", 47 | color_scheme="grass", 48 | size="1", 49 | weight="medium", 50 | align="center", 51 | ), 52 | width="100%", 53 | padding="10px 10px", 54 | align="center", 55 | ), 56 | rx.divider(), 57 | rx.hstack( 58 | *[ 59 | rx.center( 60 | rx.icon(tag=tag, size=15), 61 | width="35px", 62 | height="35px", 63 | border_radius="35px", 64 | border="1px solid gray", 65 | ) 66 | for tag in ["github", "twitter", "facebook"] 67 | ], 68 | align="center", 69 | justify="center", 70 | width="100%", 71 | spacing="5", 72 | padding="10px", 73 | ), 74 | align="center", 75 | padding="5px 0px", 76 | ), 77 | width="320px", 78 | padding="0px", 79 | ), 80 | ), 81 | height="25vh", 82 | ) 83 | -------------------------------------------------------------------------------- /buridan_ui/pantry/pricing/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | title = rx.heading("Freelancer", size="4") 4 | subtitle = rx.text( 5 | "Perfect for independent designers for prototyping and demonstrations", 6 | font_size="14px", 7 | weight="medium", 8 | color=rx.color("slate", 11), 9 | ) 10 | 11 | price = rx.heading("14", size="9", weight="medium", margin="0") 12 | tag = rx.text("$", font_size="24px") 13 | statement = rx.text( 14 | "Per month billed annually or $14 month to month", 15 | font_size="14px", 16 | weight="medium", 17 | color=rx.color("slate", 11), 18 | ) 19 | 20 | 21 | def create_card_specs(description: str): 22 | return rx.hstack( 23 | rx.icon(tag="check", size=14), 24 | rx.text( 25 | description, 26 | font_size="14px", 27 | weight="medium", 28 | color=rx.color("slate", 12), 29 | ), 30 | spacing="3", 31 | align_items="center", 32 | ) 33 | 34 | 35 | def pricing_v1(): 36 | return rx.vstack( 37 | rx.vstack( 38 | rx.vstack(title, subtitle, width="320px", height="125px", padding="30px"), 39 | rx.hstack( 40 | rx.hstack( 41 | tag, 42 | price, 43 | justify_content="start", 44 | align_items="start", 45 | spacing="1", 46 | ), 47 | statement, 48 | width="320px", 49 | height="125px", 50 | background=rx.color("gray", 4), 51 | justify_content="space-between", 52 | align_items="center", 53 | padding="30px", 54 | spacing="8", 55 | ), 56 | ), 57 | rx.vstack( 58 | rx.vstack( 59 | create_card_specs("1 User"), 60 | create_card_specs("5 Projects"), 61 | create_card_specs("Download images and prototypes"), 62 | create_card_specs("Enhanced security and password protection"), 63 | ), 64 | rx.spacer(), 65 | rx.button( 66 | "GET STARTED", 67 | width="100%", 68 | height="55px", 69 | color_scheme="gray", 70 | variant="outline", 71 | cursor="pointer", 72 | ), 73 | height="250px", 74 | width="320px", 75 | padding="10px 30px 30px 30px", 76 | ), 77 | width="320px", 78 | background=rx.color("gray", 3), 79 | box_shadow="0px 6px 8px 0px hsla(0, 0%, 0%, 0.25)", 80 | border_top="10px solid hsla(200, 60%, 40%, 1)", 81 | font_family="Futura", 82 | ) 83 | -------------------------------------------------------------------------------- /buridan_ui/pantry/pricing/v2.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | check = """ 4 | 5 | """ 6 | 7 | 8 | freeSpecs = ["1 user", "Plan features", "Product & site support"] 9 | startUpSpecs = [ 10 | "Up to 5 users", 11 | "Access to premium features", 12 | "Email support", 13 | "Basic integrations", 14 | ] 15 | teamSpecs = [ 16 | "Up to 20 users", 17 | "Advanced features", 18 | "Priority email support", 19 | "Collaboration tools", 20 | "Team management features", 21 | "Advanced integrations", 22 | ] 23 | enterpriseSpecs = [ 24 | "Unlimited users", 25 | "All features included", 26 | "24/7 dedicated support", 27 | "Customizable integrations", 28 | "Advanced security features", 29 | "SLA support", 30 | "Onboarding assistance", 31 | ] 32 | 33 | 34 | def pricingHeader( 35 | is_popular: bool, 36 | name: str, 37 | price: str, 38 | subtitle: str, 39 | ) -> rx.Component: 40 | return rx.vstack( 41 | rx.text(name, size="1", color=rx.color("slate", 11)), 42 | rx.heading(price, size="7", color=rx.color("slate", 12)), 43 | rx.text(subtitle, size="1", color=rx.color("slate", 11)), 44 | spacing="2", 45 | width="100%", 46 | align="center", 47 | text_align="center", 48 | ) 49 | 50 | 51 | def pricingSpecs(specs: list[str]) -> rx.Component: 52 | return rx.vstack( 53 | *[ 54 | rx.hstack( 55 | rx.html(check), 56 | rx.text( 57 | f"{spec}", 58 | size="1", 59 | weight="bold", 60 | color=rx.color("slate", 11), 61 | ), 62 | align="center", 63 | ) 64 | for spec in specs 65 | ], 66 | width="100%", 67 | ) 68 | 69 | 70 | def pricingButton(style: str) -> rx.Component: 71 | return rx.button("Sign Up", width="100%", padding="0.75em", variant=style) 72 | 73 | 74 | def tierStack( 75 | is_popular: bool, 76 | name: str, 77 | price: str, 78 | subtitle: str, 79 | style: str, 80 | spec_list: list[str], 81 | ) -> rx.Component: 82 | return rx.vstack( 83 | pricingHeader(is_popular, name, price, subtitle), 84 | rx.divider(height="1em", opacity="0"), 85 | pricingSpecs(spec_list), 86 | rx.divider(height="1em", opacity="0"), 87 | rx.spacer(), 88 | pricingButton(style), 89 | padding="1em", 90 | border=( 91 | f"1px solid {rx.color('gray', 4)}" 92 | if not is_popular 93 | else f"1px solid {rx.color('blue', 6)}" 94 | ), 95 | border_radius="8px", 96 | flex="1 1 200px", 97 | align="stretch", 98 | height="50vh", 99 | ) 100 | 101 | 102 | def pricing_v2(): 103 | return rx.hstack( 104 | tierStack( 105 | False, 106 | "FREE", 107 | "Free", 108 | "No pricing. Forever free.", 109 | "outline", 110 | freeSpecs, 111 | ), 112 | tierStack( 113 | True, 114 | "STARTUP", 115 | "39 USD", 116 | "All the basics for starting a new business.", 117 | "solid", 118 | startUpSpecs, 119 | ), 120 | tierStack( 121 | False, 122 | "TEAM", 123 | "59 USD", 124 | "Everything you need for a growing business.", 125 | "outline", 126 | startUpSpecs, 127 | ), 128 | tierStack( 129 | False, 130 | "ENTERPRISE", 131 | "199 USD", 132 | "Advanced features for scaling your business.", 133 | "outline", 134 | enterpriseSpecs, 135 | ), 136 | align="center", 137 | wrap="wrap", 138 | padding="1em", 139 | width="100%", 140 | min_height="60vh", 141 | ) 142 | -------------------------------------------------------------------------------- /buridan_ui/pantry/prompts/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def prompt_v1(): 5 | return rx.center( 6 | rx.hstack( 7 | rx.input( 8 | placeholder="Say something here...", 9 | height="40px", 10 | width="100%", 11 | padding_left="10px", 12 | radius="none", 13 | variant="soft", 14 | outline="none", 15 | bg=rx.color("gray", 3), 16 | ), 17 | rx.button( 18 | "Enter", 19 | height="40px", 20 | radius="none", 21 | max_width="8em", 22 | width="100%", 23 | cursor="pointer", 24 | ), 25 | width="100%", 26 | max_width="25em", 27 | height="40px", 28 | border_radius="8px", 29 | overflow="hidden", 30 | spacing="0", 31 | ), 32 | width="100%", 33 | height="25vh", 34 | ) 35 | -------------------------------------------------------------------------------- /buridan_ui/pantry/prompts/v2.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def prompt_v2(): 5 | return rx.center( 6 | rx.vstack( 7 | rx.text_area( 8 | placeholder="Ask me anything...", 9 | width="100%", 10 | height="100%", 11 | rows="4", 12 | padding_bottom="35px", 13 | ), 14 | rx.hstack( 15 | rx.button( 16 | "Send", 17 | height="20px", 18 | padding="5px", 19 | variant="surface", 20 | ), 21 | width="100%", 22 | align="center", 23 | justify="end", 24 | position="absolute", 25 | bottom="0", 26 | left="0", 27 | padding="10px 12px", 28 | ), 29 | position="relative", 30 | width="100%", 31 | max_width="40em", 32 | border=f"1px solid {rx.color('gray', 6)}", 33 | border_radius="8px", 34 | ), 35 | width="100%", 36 | height="25vh", 37 | ) 38 | -------------------------------------------------------------------------------- /buridan_ui/pantry/sidebars/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | from reflex import Color 3 | from reflex.experimental import ClientStateVar 4 | 5 | ACTIVE_ITEM = ClientStateVar.create("active_item", "") 6 | 7 | SIDEBAR_CONTENT_ONE = [ 8 | {"name": "Authentication"}, 9 | {"name": "SMS Template"}, 10 | {"name": "Email Templates"}, 11 | ] 12 | 13 | SIDEBAR_CONTENT_TWO = [ 14 | {"name": "Sessions"}, 15 | {"name": "JWT templates"}, 16 | {"name": "Webhooks"}, 17 | {"name": "Domains"}, 18 | {"name": "Integrations"}, 19 | {"name": "API Keys"}, 20 | ] 21 | 22 | SIDEBAR_CONTENT_THREE = [ 23 | {"name": "Dashboard"}, 24 | {"name": "Analytics"}, 25 | {"name": "Users"}, 26 | {"name": "Settings"}, 27 | {"name": "Notifications"}, 28 | {"name": "Logs"}, 29 | {"name": "Roles & Permissions"}, 30 | {"name": "Data Export"}, 31 | {"name": "Security"}, 32 | {"name": "Billing"}, 33 | {"name": "Activity Feed"}, 34 | ] 35 | 36 | 37 | def create_divider(): 38 | """Create a consistent divider.""" 39 | return rx.divider( 40 | border_bottom=f"0.81px solid {rx.color('gray', 4)}", bg="transparent" 41 | ) 42 | 43 | 44 | def create_sidebar_menu_items(routes: list[dict[str, str | Color]]): 45 | """Create menu items from routes.""" 46 | 47 | def item(data): 48 | item_name = data["name"] 49 | return rx.hstack( 50 | rx.link( 51 | rx.text( 52 | item_name, 53 | _hover={"color": rx.color("slate", 12)}, 54 | color=rx.cond( 55 | ACTIVE_ITEM.value == item_name, 56 | rx.color("slate", 12), 57 | rx.color("slate", 11), 58 | ), 59 | size="2", 60 | font_weight=rx.cond( 61 | ACTIVE_ITEM.value == item_name, "semibold", "normal" 62 | ), 63 | ), 64 | href=f"#{item_name}", 65 | text_decoration="none", 66 | on_click=ACTIVE_ITEM.set_value(item_name), 67 | width="100%", 68 | padding_left="10px", 69 | ), 70 | spacing="0", 71 | align_items="center", 72 | width="100%", 73 | border_left=rx.cond( 74 | ACTIVE_ITEM.value == item_name, 75 | f"1px solid {rx.color('blue', 10)}", 76 | f"0.81px solid {rx.color('gray', 4)}", 77 | ), 78 | height="25px", 79 | ) 80 | 81 | return rx.vstack(rx.foreach(routes, item), spacing="0", width="100%") 82 | 83 | 84 | def side_bar_wrapper(title: str, component: rx.Component): 85 | """Create a sidebar section.""" 86 | 87 | return rx.vstack( 88 | rx.text(title, size="1", color=rx.color("slate", 12), weight="bold"), 89 | component, 90 | padding="1em", 91 | ) 92 | 93 | 94 | def sidebar_v1(): 95 | content = rx.box( 96 | ACTIVE_ITEM, 97 | side_bar_wrapper("General", create_sidebar_menu_items(SIDEBAR_CONTENT_ONE)), 98 | create_divider(), 99 | side_bar_wrapper("Developers", create_sidebar_menu_items(SIDEBAR_CONTENT_TWO)), 100 | create_divider(), 101 | side_bar_wrapper("Personal", create_sidebar_menu_items(SIDEBAR_CONTENT_THREE)), 102 | ) 103 | 104 | return rx.scroll_area( 105 | content, 106 | height="100vh", 107 | width="100%", 108 | max_width="240px", 109 | ) 110 | -------------------------------------------------------------------------------- /buridan_ui/pantry/stats/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | stats = [ 5 | {"id": 1, "name": "Transactions every 24 hours", "value": "44 million"}, 6 | {"id": 2, "name": "Assets under holding", "value": "$119 trillion"}, 7 | {"id": 3, "name": "New users annually", "value": "46,000"}, 8 | ] 9 | 10 | 11 | def stat_v1(): 12 | return rx.box( 13 | rx.box( 14 | rx.foreach( 15 | stats, 16 | lambda stat: rx.box( 17 | rx.text(stat["name"], class_name="text-gray-500 font-light"), 18 | rx.text( 19 | stat["value"], 20 | class_name="order-first text-2xl font-semibold tracking-tight sm:text-3xl", 21 | ), 22 | class_name="mx-auto flex max-w-xs flex-col gap-y-4", 23 | ), 24 | ), 25 | class_name="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3", 26 | ), 27 | class_name="mx-auto max-w-7xl px-6 lg:px-8", 28 | ) 29 | -------------------------------------------------------------------------------- /buridan_ui/pantry/stats/v2.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | stats = [ 4 | {"id": 1, "name": "Creators on the platform", "value": "8,000+"}, 5 | {"id": 2, "name": "Flat platform fee", "value": "3%"}, 6 | {"id": 3, "name": "Uptime guarantee", "value": "99.9%"}, 7 | {"id": 4, "name": "Paid out to creators", "value": "$70M"}, 8 | ] 9 | 10 | 11 | border_classes = rx.Var.create( 12 | [ 13 | ( 14 | "rounded-t-lg " 15 | "md:rounded-tl-lg md:rounded-tr-none md:rounded-bl-none md:rounded-br-none " 16 | ), 17 | ( 18 | "rounded-none " 19 | "md:rounded-tr-lg md:rounded-tl-none md:rounded-bl-none md:rounded-br-none " 20 | ), 21 | ( 22 | "rounded-none " 23 | "md:rounded-bl-lg md:rounded-tl-none md:rounded-tr-none md:rounded-br-none " 24 | ), 25 | ( 26 | "rounded-b-lg " 27 | "md:rounded-br-lg md:rounded-tl-none md:rounded-tr-none md:rounded-bl-none " 28 | ), 29 | ] 30 | ) 31 | 32 | 33 | def stat_v2(): 34 | return rx.box( 35 | rx.box( 36 | rx.foreach( 37 | stats, 38 | lambda stat, idx: rx.box( 39 | rx.text(stat["name"], class_name="text-gray-500 font-light"), 40 | rx.text( 41 | stat["value"], 42 | class_name="order-first text-2xl font-semibold tracking-tight sm:text-3xl", 43 | ), 44 | class_name=( 45 | "flex flex-col justify-between h-full w-full p-6 border border-dashed border-slate-500/60 overflow-hidden " 46 | f"{border_classes[idx]}" 47 | ), 48 | ), 49 | ), 50 | class_name=( 51 | "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 " 52 | "auto-rows-fr gap-2 text-center" 53 | ), 54 | ), 55 | class_name="mx-auto max-w-7xl px-6 lg:px-8", 56 | ) 57 | -------------------------------------------------------------------------------- /buridan_ui/pantry/subscribe/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def subscribe_v1(): 5 | return rx.box( 6 | rx.box( 7 | rx.box( 8 | rx.icon( 9 | tag="mail", 10 | class_name="absolute left-2 top-1/2 transform -translate-y-1/2 size-5 " 11 | + rx.color_mode_cond( 12 | "!text-gray-400", 13 | "!text-gray-600", 14 | ), 15 | ), 16 | rx.el.input( 17 | placeholder="Enter your email...", 18 | # outline="none", 19 | class_name=( 20 | # Layout & Spacing 21 | "pl-9 pr-20 py-2 w-full " 22 | # Typography 23 | + "text-sm " 24 | # Border & Shape 25 | + "rounded-md bg-transparent border " 26 | + rx.color_mode_cond( 27 | "border-gray-200 ", 28 | "border-gray-800 ", 29 | ) 30 | # Effects 31 | + "" 32 | # Interactions 33 | + "focus:outline-none focus:border-blue-500" 34 | # Transitions 35 | + "" 36 | ), 37 | ), 38 | rx.button( 39 | "Join", 40 | class_name="absolute right-2 top-1/2 transform -translate-y-1/2 h-2/3 !text-sm bg-blue-500", 41 | ), 42 | class_name="w-full relative focus:outline-none", 43 | ), 44 | rx.text("No spam, unsubscribe at any time.", class_name="text-sm"), 45 | class_name="w-full max-w-[20em] h-full flex flex-col gap-y-2 items-center justify-center align-start", 46 | ), 47 | class_name="w-full h-[25vh] flex justify-center items-center align-center", 48 | ) 49 | -------------------------------------------------------------------------------- /buridan_ui/pantry/subscribe/v2.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def subscribe_v2(): 5 | return rx.box( 6 | rx.box( 7 | rx.text("Sign up to our newsletter", class_name="text-md"), 8 | rx.box( 9 | rx.el.input( 10 | placeholder="Enter your email...", 11 | # outline="none", 12 | class_name=( 13 | # Layout & Spacing 14 | "p-2 w-full " 15 | # Typography 16 | + "text-sm " 17 | # Border & Shape 18 | + "rounded-md bg-transparent border " 19 | + rx.color_mode_cond( 20 | "border-gray-200 ", 21 | "border-gray-800 ", 22 | ) 23 | # Effects 24 | + "" 25 | # Interactions 26 | + "focus:outline-none focus:border-blue-500" 27 | # Transitions 28 | + "" 29 | ), 30 | ), 31 | class_name="relative focus:outline-none w-full", 32 | ), 33 | rx.button( 34 | "Subscribe", 35 | class_name="w-full !text-sm bg-blue-500", 36 | ), 37 | class_name="w-full max-w-[20em] h-full flex flex-col gap-y-4 items-center justify-center", 38 | ), 39 | class_name="w-full h-[25vh] flex justify-center items-center align-center", 40 | ) 41 | -------------------------------------------------------------------------------- /buridan_ui/pantry/subscribe/v3.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def subscribe_v3(): 5 | return rx.box( 6 | rx.box( 7 | rx.box( 8 | rx.el.input( 9 | placeholder="Enter your email...", 10 | # outline="none", 11 | class_name=( 12 | # Layout & Spacing 13 | "p-2 w-full " 14 | # Typography 15 | + "text-sm " 16 | # Border & Shape 17 | + "rounded-md bg-transparent border " 18 | + rx.color_mode_cond( 19 | "border-gray-200 ", 20 | "border-gray-800 ", 21 | ) 22 | # Effects 23 | + "" 24 | # Interactions 25 | + "focus:outline-none focus:border-blue-500" 26 | # Transitions 27 | + "" 28 | ), 29 | ), 30 | class_name="relative focus:outline-none w-full", 31 | ), 32 | rx.button( 33 | "Subscribe", 34 | class_name="!text-sm bg-blue-500", 35 | ), 36 | class_name="w-full max-w-[20em] h-full flex flex-row gap-x-4 items-center justify-center", 37 | ), 38 | class_name="w-full h-[25vh] flex justify-center items-center align-center", 39 | ) 40 | -------------------------------------------------------------------------------- /buridan_ui/pantry/tabs/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | from reflex.experimental import ClientStateVar 3 | 4 | ActiveTab = ClientStateVar.create("tab_v1", 0) 5 | TabList = ["GitHub", "Twitter", "YouTube"] 6 | 7 | 8 | def tab_v1(): 9 | return rx.box( 10 | rx.hstack( 11 | rx.foreach( 12 | TabList, 13 | lambda tab, i: rx.button( 14 | rx.text( 15 | tab, 16 | color=rx.cond( 17 | ActiveTab.value == i, 18 | rx.color("slate", 12), 19 | rx.color("slate", 10), 20 | ), 21 | ), 22 | on_click=[ 23 | rx.call_function(ActiveTab.set_value(i)), 24 | ], 25 | aria_disabled="false", 26 | background=rx.cond( 27 | ActiveTab.value == i, 28 | rx.color("gray", 3), 29 | "transparent", 30 | ), 31 | style={ 32 | "display": "inline-flex", 33 | "align_items": "center", 34 | "justify_content": "center", 35 | "white_space": "nowrap", 36 | "padding_top": "0.5rem", 37 | "padding_bottom": "0.5rem", 38 | "vertical_align": "middle", 39 | "font_weight": "600", 40 | "min_width": "32px", 41 | "gap": "0.375rem", 42 | "font_size": "0.75rem", 43 | "height": "1.5rem", 44 | "padding_left": "0.75rem", 45 | "padding_right": "0.75rem", 46 | "cursor": "pointer", 47 | "border_radius": rx.cond( 48 | ActiveTab.value == i, "0.375rem", "0.5rem" 49 | ), 50 | "box_shadow": rx.cond( 51 | ActiveTab.value == i, 52 | "0 1px 2px 0 rgba(0, 0, 0, 0.05)", 53 | "none", 54 | ), 55 | }, 56 | ), 57 | ), 58 | style={ 59 | "display": "inline-flex", 60 | "height": "2.125rem", 61 | "align_items": "baseline", 62 | "justify_content": "flex-start", 63 | "border_radius": "0.5rem", 64 | "padding": "0.25rem", 65 | "border": f"1.25px dashed {rx.color('gray', 4)}", 66 | }, 67 | ) 68 | ) 69 | -------------------------------------------------------------------------------- /buridan_ui/pantry/tabs/v2.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | from reflex.experimental import ClientStateVar 3 | 4 | ActiveTab = ClientStateVar.create("tab_v2", 0) 5 | TabList = [["GitHub", "github"], ["Twitter", "twitter"], ["YouTube", "youtube"]] 6 | 7 | 8 | def tab_v2(): 9 | return rx.box( 10 | rx.hstack( 11 | rx.foreach( 12 | TabList, 13 | lambda tab, i: rx.button( 14 | rx.icon( 15 | tag=tab[1], 16 | width="14px", 17 | height="14px", 18 | color=rx.cond( 19 | ActiveTab.value == i, 20 | rx.color("slate", 12), 21 | rx.color("slate", 10), 22 | ), 23 | ), 24 | rx.text( 25 | tab[0], 26 | color=rx.cond( 27 | ActiveTab.value == i, 28 | rx.color("slate", 12), 29 | rx.color("slate", 10), 30 | ), 31 | ), 32 | on_click=[ 33 | rx.call_function(ActiveTab.set_value(i)), 34 | ], 35 | aria_disabled="false", 36 | background=rx.cond( 37 | ActiveTab.value == i, 38 | rx.color("gray", 3), 39 | "transparent", 40 | ), 41 | style={ 42 | "display": "flex", 43 | "align_items": "center", 44 | "justify_content": "center", 45 | "white_space": "nowrap", 46 | "padding_top": "0.5rem", 47 | "padding_bottom": "0.5rem", 48 | "vertical_align": "middle", 49 | "font_weight": "600", 50 | "min_width": "32px", 51 | "gap": "0.375rem", 52 | "font_size": "0.75rem", 53 | "height": "1.5rem", 54 | "padding_left": "0.75rem", 55 | "padding_right": "0.75rem", 56 | "cursor": "pointer", 57 | "border_radius": rx.cond( 58 | ActiveTab.value == i, "0.375rem", "0.5rem" 59 | ), 60 | "box_shadow": rx.cond( 61 | ActiveTab.value == i, 62 | "0 1px 2px 0 rgba(0, 0, 0, 0.05)", 63 | "none", 64 | ), 65 | }, 66 | ), 67 | ), 68 | style={ 69 | "display": "inline-flex", 70 | "min_height": "2.125rem", 71 | "align_items": "baseline", 72 | "justify_content": "flex-start", 73 | "border_radius": "0.5rem", 74 | "padding": "0.25rem", 75 | "border": f"1.25px dashed {rx.color('gray', 4)}", 76 | }, 77 | ) 78 | ) 79 | -------------------------------------------------------------------------------- /buridan_ui/pantry/tabs/v3.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | from reflex.experimental import ClientStateVar 3 | 4 | ActiveTab = ClientStateVar.create("tab_v3", 0) 5 | TabList = ["github", "twitter", "youtube"] 6 | 7 | 8 | def tab_v3(): 9 | return rx.box( 10 | rx.hstack( 11 | rx.foreach( 12 | TabList, 13 | lambda tab, i: rx.button( 14 | rx.icon( 15 | tag=tab, 16 | width="14px", 17 | height="14px", 18 | color=rx.cond( 19 | ActiveTab.value == i, 20 | rx.color("slate", 12), 21 | rx.color("slate", 10), 22 | ), 23 | ), 24 | on_click=[ 25 | rx.call_function(ActiveTab.set_value(i)), 26 | ], 27 | aria_disabled="false", 28 | background=rx.cond( 29 | ActiveTab.value == i, 30 | rx.color("gray", 3), 31 | "transparent", 32 | ), 33 | style={ 34 | "display": "flex", 35 | "align_items": "center", 36 | "justify_content": "center", 37 | "white_space": "nowrap", 38 | "padding_top": "0.5rem", 39 | "padding_bottom": "0.5rem", 40 | "vertical_align": "middle", 41 | "font_weight": "600", 42 | "min_width": "32px", 43 | "gap": "0.375rem", 44 | "font_size": "0.75rem", 45 | "height": "1.5rem", 46 | "padding_left": "0.75rem", 47 | "padding_right": "0.75rem", 48 | "cursor": "pointer", 49 | "border_radius": rx.cond( 50 | ActiveTab.value == i, "0.375rem", "0.5rem" 51 | ), 52 | "box_shadow": rx.cond( 53 | ActiveTab.value == i, 54 | "0 1px 2px 0 rgba(0, 0, 0, 0.05)", 55 | "none", 56 | ), 57 | }, 58 | ), 59 | ), 60 | style={ 61 | "display": "inline-flex", 62 | "min_height": "2.125rem", 63 | "align_items": "baseline", 64 | "justify_content": "flex-start", 65 | "border_radius": "0.5rem", 66 | "padding": "0.25rem", 67 | "border": f"1.25px dashed {rx.color('gray', 4)}", 68 | }, 69 | ) 70 | ) 71 | -------------------------------------------------------------------------------- /buridan_ui/pantry/timeline/v1.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def blip(): 5 | return rx.box( 6 | width="10px", 7 | height="10px", 8 | border_radius="10px", 9 | background=rx.color("blue"), 10 | position="absolute", 11 | left="-5px", 12 | ) 13 | 14 | 15 | def wrapper( 16 | title: str, 17 | instructions: str, 18 | components: list[rx.Component] = [], 19 | **kwargs, 20 | ): 21 | return rx.hstack( 22 | rx.vstack( 23 | rx.vstack( 24 | rx.hstack( 25 | blip(), 26 | rx.text( 27 | title, 28 | size="1", 29 | weight="medium", 30 | color=rx.color("slate", 11), 31 | ), 32 | align="center", 33 | ), 34 | rx.text( 35 | instructions, 36 | size="3", 37 | weight="bold", 38 | color=rx.color("slate", 12), 39 | ), 40 | spacing="1", 41 | ), 42 | *components, 43 | ), 44 | width="100%", 45 | align="start", 46 | justify="start", 47 | padding_left="15px", 48 | border_radius="0px 5px 5px 0px", 49 | **kwargs, 50 | ) 51 | 52 | 53 | def timeline_v1(): 54 | return rx.vstack( 55 | rx.vstack( 56 | rx.box( 57 | wrapper( 58 | "2023 - Present", 59 | "Web Designer & Web Developer", 60 | [ 61 | rx.text( 62 | "The company has high expectations, and by using OKRs (Objectives and Key Results), there is a mutual understanding of expectations and performance. This framework not only aligns individual and team goals with the company's strategic vision but also fosters accountability and transparency throughout the organization.Regular check-ins and progress updates ensure that everyone stays on track, allowing for timely adjustments when necessary. The collaborative nature of setting OKRs encourages open communication, enabling team members to share insights and challenges.", 63 | size="1", 64 | ), 65 | ], 66 | ), 67 | position="relative", 68 | ), 69 | rx.box( 70 | wrapper( 71 | "2021 - 2023", 72 | "Senior Software Engineer at Mailchimp", 73 | [ 74 | rx.text( 75 | "This is an excellent company and they reward their employees. It's becoming a big company but it's still private, so the culture is as good as it gets at 1,000+ employees if you ask me. Managers are still adapting to the growth I think, but everyone has to. Great place to work. ", 76 | size="1", 77 | ), 78 | ], 79 | ), 80 | position="relative", 81 | ), 82 | rx.box( 83 | wrapper( 84 | "2021 - 2021", 85 | "Junior Software Engineer at Slack", 86 | [ 87 | rx.text( 88 | "Work in Slack is one of the beautiful experience I can do in my entire life. There are a lot of interesting thing to learn and manager respect your time and your personality.", 89 | size="1", 90 | ), 91 | ], 92 | ), 93 | position="relative", 94 | ), 95 | width="100%", 96 | border_left=f"1px solid {rx.color('gray', 5)}", 97 | spacing="7", 98 | ), 99 | width="100%", 100 | max_width="40em", 101 | align="center", 102 | justify="start", 103 | padding="24px 12px", 104 | overflow="auto", 105 | ) 106 | -------------------------------------------------------------------------------- /buridan_ui/start/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/start/__init__.py -------------------------------------------------------------------------------- /buridan_ui/start/buridan.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.wrappers.base.main import base 4 | 5 | 6 | def text_wrapper(title: str, description: str): 7 | return rx.el.div( 8 | rx.el.label(title, class_name="text-md font-bold"), 9 | rx.el.label( 10 | description, 11 | class_name="text-[13px] font-regular", 12 | color=rx.color("slate", 11), 13 | ), 14 | class_name="flex flex-col gap-y-2", 15 | ) 16 | 17 | 18 | @base("/getting-started/who-is-buridan/", "Who Is Buridan?") 19 | def buridan(): 20 | return [ 21 | rx.box( 22 | rx.vstack( 23 | text_wrapper( 24 | "Who is Buridan?", 25 | "Jean Buridan was a 14th-century French philosopher and logician, widely regarded for his contributions to the study of free will, determinism, and ethics. While his works span various domains of thought, one of his most well-known contributions is the famous `Buridan's Ass` paradox—a thought experiment that delves into the complexities of decision-making in the face of equal options.", 26 | ), 27 | text_wrapper( 28 | "", 29 | "In this paradox, Buridan imagines a donkey caught between two equally enticing bales of hay. Unable to choose between them, the donkey, despite being hungry, ends up starving because of its inability to make a decision. This paradox is often used to highlight the difficulties we face when confronted with equally viable options, and the resulting inaction that can occur when there's no clear reason to choose one over the other.", 30 | ), 31 | text_wrapper( 32 | "", 33 | "While Buridan's Ass symbolizes indecision, it also points to the importance of making choices even when they seem equally valid. The paradox serves as a timeless reminder that decision-making isn't always as straightforward as it seems—especially when there are multiple possibilities that each seem appealing in their own way. Just like the donkey, developers, designers, and creators often face such dilemmas when making choices between different approaches or technologies.", 34 | ), 35 | text_wrapper( 36 | "Why Buridan?", 37 | "I chose the name 'Buridan UI' to evoke the spirit of thoughtful decision-making in design. Just as Buridan's donkey faced a dilemma between two equally appealing bales of hay, developers often grapple with choices in component design and user experience. This site aims to provide a clear path through those choices by offering beautifully crafted, reusable components that simplify the decision-making process.", 38 | ), 39 | text_wrapper( 40 | "", 41 | "The goal is to help you avoid the proverbial 'indecision' by offering pre-made components that are visually appealing, functionally robust, and easy to integrate. The burden of choice should not overwhelm you—it should be an opportunity for creativity and ease of implementation.", 42 | ), 43 | text_wrapper( 44 | "Explore and Create", 45 | "Dive into our collection of components and see how they can elevate your projects. Whether you’re building a new app or enhancing an existing one, Buridan UI is here to help you navigate the vast landscape of design choices with ease.", 46 | ), 47 | # max_width="40em", 48 | width="100%", 49 | spacing="6", 50 | ), 51 | width="100%", 52 | display="flex", 53 | justify_content="start", 54 | class_name="p-4", 55 | ) 56 | ] 57 | -------------------------------------------------------------------------------- /buridan_ui/start/installation.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | from buridan_ui.wrappers.base.main import base 3 | 4 | 5 | def wrapper(title: str, instructions: str, components=None, **kwargs): 6 | if components is None: 7 | components = [] 8 | return rx.hstack( 9 | rx.vstack( 10 | rx.vstack( 11 | rx.hstack( 12 | rx.text( 13 | title, 14 | size="1", 15 | weight="bold", 16 | color=rx.color("slate", 11), 17 | ), 18 | align="center", 19 | ), 20 | rx.text( 21 | instructions, 22 | size="2", 23 | weight="regular", 24 | color=rx.color("slate", 12), 25 | ), 26 | width="100%", 27 | spacing="1", 28 | ), 29 | *components, 30 | width="100%", 31 | ), 32 | width="100%", 33 | align="start", 34 | justify="start", 35 | # padding_left="15px", 36 | border_radius="0px 5px 5px 0px", 37 | **kwargs, 38 | ) 39 | 40 | 41 | def create_code_line(code_string: str, _tag_id: str): 42 | return rx.hstack( 43 | rx.code_block( 44 | code_string, 45 | width="100%", 46 | font_size="12px", 47 | language="bash", 48 | # theme=Theme.darcula, 49 | wrap_long_lines=True, 50 | scrollbar_width="none", 51 | code_tag_props={"pre": "transparent", "bg": "transparent"}, 52 | custom_attrs={"bg": "transparent"}, 53 | bg="transparent", 54 | class_name="rounded-md shadow-sm", 55 | border=f"0.81px solid {rx.color('gray', 4)}", 56 | ), 57 | rx.el.button( 58 | rx.icon(tag="copy", size=13, id=_tag_id), 59 | cursor="pointer", 60 | position="absolute", 61 | right="2%", 62 | on_click=[ 63 | rx.toast("Command copied"), 64 | rx.set_clipboard(code_string), 65 | ], 66 | ), 67 | width="100%", 68 | align="center", 69 | position="relative", 70 | ) 71 | 72 | 73 | @base("/getting-started/installation", "Installation") 74 | def installation(): 75 | return [ 76 | rx.box( 77 | rx.vstack( 78 | wrapper( 79 | "Step 1: Check your Python version", 80 | "To use Reflex you need to have Python version 3.9 or above installed on your system.", 81 | [create_code_line("python3 --version", "tag-1")], 82 | ), 83 | wrapper( 84 | "Step 2: PIP install the Reflex framework", 85 | "Use the following command to install Reflex:", 86 | [ 87 | create_code_line("pip3 install reflex", "tag-2"), 88 | rx.text( 89 | "Male sure the latest version of Reflex is installed", 90 | size="2", 91 | weight="regular", 92 | color=rx.color("slate", 12), 93 | ), 94 | create_code_line("reflex --version", "tag-3"), 95 | ], 96 | ), 97 | wrapper( 98 | "Step 3: Create a new Reflex Web Application", 99 | "Inside your root directory, run the following command to create a new app:", 100 | [create_code_line("reflex init", "tag-4")], 101 | ), 102 | wrapper( 103 | "Step 4: Copy & paste a pantry item directly into your app", 104 | "You can now easily integrate pantry pantry within your app and personalize them.", 105 | ), 106 | width="100%", 107 | spacing="6", 108 | position="relative", 109 | ), 110 | width="100%", 111 | display="flex", 112 | justify_content="start", 113 | class_name="p-4", 114 | ) 115 | ] 116 | -------------------------------------------------------------------------------- /buridan_ui/static/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/static/__init__.py -------------------------------------------------------------------------------- /buridan_ui/static/meta.py: -------------------------------------------------------------------------------- 1 | ChartMetaData = { 2 | "area": ["Dec 12, 2024", "Jun 01, 2025", 8], 3 | "bar": ["Dec 12, 2024", "Jun 01, 2025", 10], 4 | "line": ["Dec 12, 2024", "Jun 01, 2025", 8], 5 | "pie": ["Dec 12, 2024", "Jun 01, 2025", 6], 6 | "radar": ["Dec 12, 2024", "Jun 01, 2025", 6], 7 | "scatter": ["Mar 15, 2025", "May 22, 2025", 1], 8 | "doughnut": ["Mar 15, 2025", "Jun 01, 2025", 2], 9 | } 10 | PantryMetaData = { 11 | "stats": ["May 04, 2025", "May 22, 2025", 2], 12 | "tabs": ["Apr 18, 2025", "May 22, 2025", 3], 13 | "sidebars": ["Apr 06, 2025", "May 22, 2025", 1], 14 | "accordions": ["Mar 30, 2025", "May 22, 2025", 1], 15 | "animations": ["Dec 12, 2024", "May 22, 2025", 4], 16 | "backgrounds": ["Dec 12, 2024", "May 22, 2025", 4], 17 | "cards": ["Dec 12, 2024", "May 22, 2025", 4], 18 | "faq": ["Dec 12, 2024", "May 22, 2025", 1], 19 | "featured": ["Dec 12, 2024", "May 22, 2025", 2], 20 | "footers": ["Dec 12, 2024", "May 22, 2025", 2], 21 | "forms": ["Dec 12, 2024", "May 22, 2025", 3], 22 | "inputs": ["Dec 12, 2024", "May 22, 2025", 5], 23 | "lists": ["Dec 12, 2024", "May 22, 2025", 1], 24 | "logins": ["Dec 12, 2024", "May 22, 2025", 2], 25 | "menus": ["Dec 12, 2024", "May 22, 2025", 1], 26 | "onboardings": ["Dec 12, 2024", "May 22, 2025", 1], 27 | "payments": ["Dec 12, 2024", "May 22, 2025", 1], 28 | "popups": ["Dec 12, 2024", "May 22, 2025", 2], 29 | "pricing": ["Dec 12, 2024", "May 22, 2025", 2], 30 | "prompts": ["Dec 12, 2024", "May 22, 2025", 2], 31 | "subscribe": ["Dec 12, 2024", "May 22, 2025", 3], 32 | "tables": ["Dec 12, 2024", "May 22, 2025", 4], 33 | "timeline": ["Dec 12, 2024", "May 22, 2025", 1], 34 | } 35 | ProMetaData = {"table": ["Apr 13, 2025", "Apr 19, 2025", 1]} 36 | -------------------------------------------------------------------------------- /buridan_ui/static/routes.py: -------------------------------------------------------------------------------- 1 | # ... base prefixes for different sections 2 | _GS_Base = "/getting-started/" 3 | _P = "/pantry/" 4 | _C = "/charts/" 5 | _Pro = "/pro/" 6 | 7 | # ... pro routes 8 | BuridanProRoutes = [ 9 | {"name": "Integrated Tables", "path": f"{_Pro}integrated-tables", "dir": "table"}, 10 | ] 11 | 12 | # ... getting started paths 13 | GettingStartedRoutes = [ 14 | {"name": "Introduction", "path": f"{_GS_Base}introduction", "dir": "introduction"}, 15 | {"name": "Who is Buridan?", "path": f"{_GS_Base}who-is-buridan", "dir": "buridan"}, 16 | {"name": "Installation", "path": f"{_GS_Base}installation", "dir": "installation"}, 17 | {"name": "Theming", "path": f"{_GS_Base}theming", "dir": "theming"}, 18 | {"name": "Charting Walkthrough", "path": f"{_GS_Base}charting", "dir": "charting"}, 19 | { 20 | "name": "Dashboard Walkthrough", 21 | "path": f"{_GS_Base}dashboard", 22 | "dir": "dashboard", 23 | }, 24 | { 25 | "name": "ClientStateVar", 26 | "path": f"{_GS_Base}client-state-var", 27 | "dir": "clientstate", 28 | }, 29 | {"name": "Changelog", "path": f"{_GS_Base}changelog", "dir": "changelog"}, 30 | ] 31 | 32 | # ... pantry component paths 33 | PantryRoutes = sorted( 34 | [ 35 | {"name": "Stats", "path": f"{_P}stats", "dir": "stats"}, 36 | {"name": "Tabs", "path": f"{_P}tabs", "dir": "tabs"}, 37 | {"name": "Sidebars", "path": f"{_P}sidebars", "dir": "sidebars"}, 38 | {"name": "Accordions", "path": f"{_P}accordions", "dir": "accordions"}, 39 | {"name": "Logins", "path": f"{_P}logins", "dir": "logins"}, 40 | {"name": "Standard Forms", "path": f"{_P}standard-forms", "dir": "forms"}, 41 | {"name": "Standard Tables", "path": f"{_P}standard-tables", "dir": "tables"}, 42 | {"name": "Pricing Sections", "path": f"{_P}pricing-sections", "dir": "pricing"}, 43 | {"name": "Popups", "path": f"{_P}popups", "dir": "popups"}, 44 | { 45 | "name": "Payments & Billing", 46 | "path": f"{_P}payments-and-billing", 47 | "dir": "payments", 48 | }, 49 | { 50 | "name": "Onboarding & Progress", 51 | "path": f"{_P}onboarding-and-progress", 52 | "dir": "onboardings", 53 | }, 54 | {"name": "Menus", "path": f"{_P}menus", "dir": "menus"}, 55 | {"name": "Backgrounds", "path": f"{_P}backgrounds", "dir": "backgrounds"}, 56 | {"name": "Featured", "path": f"{_P}featured", "dir": "featured"}, 57 | {"name": "Descriptive Lists", "path": f"{_P}descriptive-lists", "dir": "lists"}, 58 | {"name": "Timeline", "path": f"{_P}timeline", "dir": "timeline"}, 59 | {"name": "Animations", "path": f"{_P}animations", "dir": "animations"}, 60 | {"name": "Prompt Boxes", "path": f"{_P}prompt-boxes", "dir": "prompts"}, 61 | {"name": "Cards", "path": f"{_P}cards", "dir": "cards"}, 62 | {"name": "Subscribe", "path": f"{_P}subscribe", "dir": "subscribe"}, 63 | { 64 | "name": "Frequently Asked Questions", 65 | "path": f"{_P}frequently-asked-questions", 66 | "dir": "faq", 67 | }, 68 | {"name": "Footers", "path": f"{_P}footers", "dir": "footers"}, 69 | {"name": "Inputs", "path": f"{_P}inputs", "dir": "inputs"}, 70 | ], 71 | key=lambda x: x["name"], 72 | ) 73 | 74 | # ... chart component paths 75 | ChartRoutes = sorted( 76 | [ 77 | {"name": "Area Charts", "path": f"{_C}area-charts", "dir": "area"}, 78 | {"name": "Bar Charts", "path": f"{_C}bar-charts", "dir": "bar"}, 79 | {"name": "Line Charts", "path": f"{_C}line-charts", "dir": "line"}, 80 | {"name": "Pie Charts", "path": f"{_C}pie-charts", "dir": "pie"}, 81 | {"name": "Radar Charts", "path": f"{_C}radar-charts", "dir": "radar"}, 82 | {"name": "Scatter Charts", "path": f"{_C}scatter-charts", "dir": "scatter"}, 83 | {"name": "Doughnut Charts", "path": f"{_C}doughnut-charts", "dir": "doughnut"}, 84 | ], 85 | key=lambda x: x["name"], 86 | ) 87 | -------------------------------------------------------------------------------- /buridan_ui/static/scripts.py: -------------------------------------------------------------------------------- 1 | import os 2 | 3 | from buridan_ui.config import ( 4 | LOCAL_BASE_CHART_PATH, 5 | LOCAL_BASE_PANTRY_PATH, 6 | LOCAL_BASE_PRO_PATH, 7 | ) 8 | from buridan_ui.wrappers.base.utils.meta import get_file_times 9 | 10 | 11 | def count_python_files_in_folder(folder_name) -> int: 12 | """Get the total number of files in a folder""" 13 | total_files = 0 14 | 15 | for _dirpath, _dirnames, filenames in os.walk(folder_name): 16 | total_files += len( 17 | [f for f in filenames if f.endswith(".py") and f != "__init__.py"] 18 | ) 19 | 20 | return total_files 21 | 22 | 23 | def get_directory_meta_data(): 24 | from buridan_ui.export import config 25 | 26 | charts, pantry, pro = {}, {}, {} 27 | 28 | # Get the pro directories metadata 29 | for directory in config.PRO.keys(): 30 | full_path = os.path.join(LOCAL_BASE_PRO_PATH, directory, "") 31 | pro[directory] = get_file_times(full_path) 32 | 33 | # Get the chart directories metadata 34 | for directory in config.CHARTS.keys(): 35 | full_path = os.path.join(LOCAL_BASE_CHART_PATH, directory, "") 36 | charts[directory] = get_file_times(full_path) 37 | 38 | # Get the pantry directories metadata 39 | for directory in config.COMPONENTS.keys(): 40 | full_path = os.path.join(LOCAL_BASE_PANTRY_PATH, directory, "") 41 | pantry[directory] = get_file_times(full_path) 42 | 43 | # Write the metadata to static/meta.py 44 | with open("meta.py", "w") as file: 45 | file.write( 46 | f"""ChartMetaData = {charts}\nPantryMetaData = {pantry}\nProMetaData = {pro}""" 47 | ) 48 | 49 | 50 | if __name__ == "__main__": 51 | get_directory_meta_data() 52 | -------------------------------------------------------------------------------- /buridan_ui/templates/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/templates/__init__.py -------------------------------------------------------------------------------- /buridan_ui/templates/drawer/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/templates/drawer/__init__.py -------------------------------------------------------------------------------- /buridan_ui/templates/drawer/drawer.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from buridan_ui.templates.sidemenu.sidemenu import sidemenu 4 | 5 | 6 | def drawer(): 7 | return rx.drawer.root( 8 | rx.drawer.trigger(rx.el.button(rx.icon(tag="menu", size=13))), 9 | rx.drawer.overlay(z_index="50"), 10 | rx.drawer.portal( 11 | rx.drawer.content( 12 | sidemenu(True), 13 | **{ 14 | "top": "auto", 15 | "right": "auto", 16 | "height": "100%", 17 | "background": "var(--background)", 18 | }, 19 | ), 20 | z_index="50", 21 | ), 22 | direction="left", 23 | ) 24 | -------------------------------------------------------------------------------- /buridan_ui/templates/footer/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/templates/footer/__init__.py -------------------------------------------------------------------------------- /buridan_ui/templates/footer/footer.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | from .style import FooterStyle 5 | from buridan_ui.static.routes import GettingStartedRoutes, ChartRoutes, PantryRoutes 6 | 7 | 8 | def create_footer_item(title: str, routes: list[dict[str, str]]): 9 | def item(data): 10 | return rx.el.div( 11 | rx.link( 12 | rx.el.label( 13 | ( 14 | data["name"] 15 | if data["name"] != "Frequently Asked Questions" 16 | else "FAQ" 17 | ), 18 | _hover={"color": rx.color("slate", 12)}, 19 | class_name="text-sm font-regular cursor-pointer " 20 | + rx.color_mode_cond("text-slate-700", "text-slate-200"), 21 | ), 22 | href=data["path"], 23 | text_decoration="none", 24 | ), 25 | class_name="w-full", 26 | ) 27 | 28 | return rx.vstack( 29 | rx.text(title, weight="bold", size="1", color=rx.color("slate", 12)), 30 | rx.hstack(*[item(data) for data in routes], **FooterStyle.footer_item), 31 | width="100%", 32 | padding="0.5em 0em", 33 | spacing="2", 34 | ) 35 | 36 | 37 | def footer(): 38 | return rx.vstack( 39 | create_footer_item("Home", GettingStartedRoutes), 40 | create_footer_item("Charts UI", ChartRoutes), 41 | create_footer_item("Pantry UI", PantryRoutes), 42 | rx.vstack( 43 | rx.el.label( 44 | "buridan/ui", 45 | class_name="text-sm font-bold", 46 | ), 47 | rx.el.label( 48 | "© 2024 - 2025 Ahmad Hakim. All rights reserved.", 49 | class_name="text-sm font-light", 50 | ), 51 | width="100%", 52 | spacing="2", 53 | ), 54 | class_name="p-4", 55 | ) 56 | 57 | 58 | def desktop_footer(): 59 | return rx.vstack( 60 | rx.vstack( 61 | rx.el.label( 62 | "buridan/ui", 63 | class_name="text-sm font-bold", 64 | ), 65 | rx.el.label( 66 | "© 2024 - 2025 Ahmad Hakim. All rights reserved.", 67 | class_name="text-sm font-light", 68 | ), 69 | spacing="2", 70 | width="100%", 71 | ), 72 | class_name="py-5", 73 | ) 74 | -------------------------------------------------------------------------------- /buridan_ui/templates/footer/style.py: -------------------------------------------------------------------------------- 1 | from dataclasses import dataclass, field 2 | 3 | 4 | @dataclass 5 | class FooterStyle: 6 | base: dict[str, str] = field( 7 | default_factory=lambda: { 8 | "width": "100%", 9 | "align": "start", 10 | # "padding": ["12px 0px" if i >= 5 else "12px 0.75em" for i in range(6)], 11 | }, 12 | ) 13 | 14 | footer_item: dict[str, str] = field( 15 | default_factory=lambda: { 16 | "display": "grid", 17 | "grid_template_columns": [ 18 | f"repeat({i}, minmax(0, 1fr))" for i in [2, 2, 4, 4, 5, 5] 19 | ], 20 | "justify": "start", 21 | "gap": "1rem 3rem", 22 | "width": "100%", 23 | }, 24 | ) 25 | 26 | 27 | FooterStyle: FooterStyle = FooterStyle() 28 | -------------------------------------------------------------------------------- /buridan_ui/templates/settings/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/templates/settings/__init__.py -------------------------------------------------------------------------------- /buridan_ui/templates/sidemenu/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/templates/sidemenu/__init__.py -------------------------------------------------------------------------------- /buridan_ui/templates/sidemenu/scripts.py: -------------------------------------------------------------------------------- 1 | SideBarScript = """ 2 | function highlightActiveSidebarLink() { 3 | const currentPath = window.location.pathname.replace(/\\/+$|\\/$/g, ""); // Clean trailing slashes 4 | const activeItem = document.getElementById(currentPath); 5 | 6 | if (activeItem) { 7 | const link = activeItem.querySelector("a"); 8 | if (link) { 9 | const label = link.querySelector("label, span, div") || link; 10 | 11 | document.querySelectorAll("[id^='/'] a").forEach(l => { 12 | const lbl = l.querySelector("label, span, div") || l; 13 | lbl.classList.remove("text-blue-600", "font-bold"); 14 | }); 15 | 16 | label.classList.add("text-blue-600", "font-bold"); 17 | 18 | // Center the active item in the scroll area 19 | activeItem.scrollIntoView({ block: "center" }); 20 | } 21 | } 22 | } 23 | 24 | // Run on page load after a short delay 25 | setTimeout(highlightActiveSidebarLink, 50); 26 | 27 | // Run on browser history navigation (back/forward) 28 | window.addEventListener("popstate", () => { 29 | setTimeout(highlightActiveSidebarLink, 50); 30 | }); 31 | 32 | // Run after clicking any sidebar link (client-side navigation) 33 | document.querySelectorAll("a[href^='/']").forEach(link => { 34 | link.addEventListener("click", () => { 35 | setTimeout(highlightActiveSidebarLink, 800); 36 | }); 37 | }); 38 | """ 39 | -------------------------------------------------------------------------------- /buridan_ui/templates/sidemenu/style.py: -------------------------------------------------------------------------------- 1 | from dataclasses import dataclass, field 2 | 3 | import reflex as rx 4 | 5 | 6 | @dataclass 7 | class SideMenuStyle: 8 | base: dict[str, str] = field( 9 | default_factory=lambda: { 10 | "top": "0", 11 | "left": "0", 12 | "bottom": "0", 13 | "width": "330px", 14 | "height": "100vh", 15 | "overflow": "auto", 16 | "position": "sticky", 17 | "padding": "80px 1em 80px 1.5em", 18 | "scrollbar_width": "none", 19 | "background": rx.color("gray", 2), 20 | "display": ["none" if i <= 3 else "flex" for i in range(6)], 21 | "mask": "linear-gradient(to bottom, hsl(0, 0%, 0%, 1) 92%, hsl(0, 0%, 0%, 0) 100%)", 22 | "border_right": f"1px solid {rx.color('gray', 4)}", 23 | }, 24 | ) 25 | 26 | content: dict[str, str] = field( 27 | default_factory=lambda: { 28 | "width": "100%", 29 | "position": "relative", 30 | "spacing": "5", 31 | }, 32 | ) 33 | 34 | 35 | SideMenuStyle: SideMenuStyle = SideMenuStyle() 36 | -------------------------------------------------------------------------------- /buridan_ui/ui/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/ui/__init__.py -------------------------------------------------------------------------------- /buridan_ui/ui/atoms/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/ui/atoms/__init__.py -------------------------------------------------------------------------------- /buridan_ui/ui/atoms/buttons.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def button_with_icon(icon: str, **kwargs): 5 | return rx.box( 6 | rx.icon( 7 | tag=icon, 8 | size=13, 9 | color=rx.color("slate", 11), 10 | _hover={"color": rx.color("slate", 12)}, 11 | ), 12 | _hover={"background": rx.color("gray", 3)}, 13 | border=f"1px solid {rx.color('gray', 5)}", 14 | class_name="cursor-pointer rounded-lg py-1 px-2 flex items-center justify-center", 15 | **kwargs, 16 | ) 17 | 18 | 19 | def button_with_link(icon: str, url: str): 20 | return rx.box( 21 | rx.link( 22 | rx.icon( 23 | tag=icon, 24 | size=13, 25 | ), 26 | href=url, 27 | is_external=True, 28 | text_cdecoration="none", 29 | color=rx.color("slate", 11), 30 | _hover={"color": rx.color("slate", 12)}, 31 | ), 32 | _hover={"background": rx.color("gray", 3)}, 33 | border=f"1px solid {rx.color('gray', 5)}", 34 | class_name="cursor-pointer rounded-lg py-1 px-2 flex items-center justify-center", 35 | ) 36 | 37 | 38 | def theme_button(): 39 | return rx.el.button( 40 | rx.color_mode.icon( 41 | light_component=rx.el.div( 42 | rx.icon( 43 | "moon", 44 | size=13, 45 | color=rx.color("slate", 11), 46 | ), 47 | rx.el.p("Light", class_name="text-sm"), 48 | class_name="flex flex-row items-center gap-x-2", 49 | ), 50 | dark_component=rx.icon( 51 | "sun", 52 | size=14, 53 | color=rx.color("slate", 11), 54 | ), 55 | ), 56 | on_click=rx.toggle_color_mode, 57 | _hover={"background": rx.color("gray", 3)}, 58 | border=f"1px solid {rx.color('gray', 5)}", 59 | class_name="cursor-pointer rounded-lg py-1 px-2 flex items-center justify-center", 60 | ) 61 | -------------------------------------------------------------------------------- /buridan_ui/ui/config.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/ui/config.py -------------------------------------------------------------------------------- /buridan_ui/ui/molecules/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/ui/molecules/__init__.py -------------------------------------------------------------------------------- /buridan_ui/ui/organisms/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/ui/organisms/__init__.py -------------------------------------------------------------------------------- /buridan_ui/ui/organisms/grid.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def responsive_grid( 5 | *children: rx.Component, 6 | lg: int = 1, 7 | md: int = 1, 8 | sm: int = 1, 9 | gap: int = 14, 10 | padding: int = 4, 11 | ) -> rx.Component: 12 | # Generate Tailwind classes for each breakpoint 13 | breakpoint_classes = ( 14 | f"sm:grid-cols-{sm} " # Small screens 15 | f"md:grid-cols-{md} " # Medium screens 16 | f"lg:grid-cols-{lg} " # Large screens 17 | ) 18 | 19 | return rx.grid( 20 | *children, 21 | class_name=f"grid grid-cols-1 {breakpoint_classes} gap-{gap} p-{padding} size-full", 22 | ) 23 | -------------------------------------------------------------------------------- /buridan_ui/wrappers/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/wrappers/__init__.py -------------------------------------------------------------------------------- /buridan_ui/wrappers/base/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/wrappers/base/__init__.py -------------------------------------------------------------------------------- /buridan_ui/wrappers/base/utils/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/wrappers/base/utils/__init__.py -------------------------------------------------------------------------------- /buridan_ui/wrappers/base/utils/meta.py: -------------------------------------------------------------------------------- 1 | import os 2 | import platform 3 | from datetime import datetime, timedelta 4 | 5 | 6 | def get_file_times(file_path): 7 | """Get directory meta data""" 8 | 9 | try: 10 | dir_stat = os.stat(file_path) 11 | if platform.system() == "Windows": 12 | creation_time = dir_stat.st_ctime 13 | else: 14 | try: 15 | creation_time = dir_stat.st_birthtime 16 | except AttributeError: 17 | creation_time = dir_stat.st_ctime # fallback 18 | except Exception: 19 | creation_time = None 20 | 21 | # Scan files for latest modified time 22 | try: 23 | files = [ 24 | os.path.join(file_path, f) 25 | for f in os.listdir(file_path) 26 | if os.path.isfile(os.path.join(file_path, f)) 27 | ] 28 | 29 | latest_mtime = max(os.stat(f).st_mtime for f in files) if files else None 30 | file_count = len(files) 31 | except Exception: 32 | latest_mtime = None 33 | file_count = 0 34 | 35 | # Format results 36 | creation_str = ( 37 | datetime.fromtimestamp(creation_time).strftime("%b %d, %Y") 38 | if isinstance(creation_time, (float, int)) 39 | else "Not available" 40 | ) 41 | modified_str = ( 42 | datetime.fromtimestamp(latest_mtime).strftime("%b %d, %Y") 43 | if isinstance(latest_mtime, (float, int)) 44 | else "Not available" 45 | ) 46 | 47 | return [creation_str, modified_str, file_count] 48 | 49 | 50 | def get_time_ago(past_time, current_time=None): 51 | """Convert a past datetime to a human-readable 'time ago' string""" 52 | if current_time is None: 53 | current_time = datetime.now() 54 | 55 | time_diff = current_time - past_time 56 | 57 | # Less than a minute 58 | if time_diff < timedelta(minutes=1): 59 | return "Updated just now" 60 | 61 | # Less than an hour 62 | if time_diff < timedelta(hours=1): 63 | minutes = time_diff.seconds // 60 64 | return f"Updated {minutes} minute{'s' if minutes != 1 else ''} ago" 65 | 66 | # Less than a day 67 | if time_diff < timedelta(days=1): 68 | hours = time_diff.seconds // 3600 69 | return f"Updated {hours} hour{'s' if hours != 1 else ''} ago" 70 | 71 | # Less than a month 72 | if time_diff < timedelta(days=30): 73 | days = time_diff.days 74 | return f"Updated {days} day{'s' if days != 1 else ''} ago" 75 | 76 | # Less than a year 77 | if time_diff < timedelta(days=365): 78 | months = time_diff.days // 30 79 | return f"Updated {months} month{'s' if months != 1 else ''} ago" 80 | 81 | # More than a year 82 | years = time_diff.days // 365 83 | return f"Updated {years} year{'s' if years != 1 else ''} ago" 84 | -------------------------------------------------------------------------------- /buridan_ui/wrappers/base/utils/routes.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def capitalize_words(segment: str) -> str: 5 | return " ".join(word.lower() for word in segment.replace("-", " ").split()) 6 | 7 | 8 | def base_content_path_ui(route: str) -> rx.hstack: 9 | segments = route.strip("/").split("/") 10 | path_names = [ 11 | item for segment in segments[:-1] for item in [capitalize_words(segment), "›"] 12 | ] + [capitalize_words(segments[-1])] 13 | 14 | return rx.hstack( 15 | rx.el.label( 16 | "ui", class_name="text-sm font-medium", color=rx.color("slate", 11) 17 | ), 18 | rx.el.label("›", class_name="text-sm font-medium", color=rx.color("slate", 11)), 19 | *[ 20 | ( 21 | rx.el.label( 22 | name, class_name="text-sm font-medium", color=rx.color("slate", 11) 23 | ) 24 | if index != len(path_names) - 1 25 | else rx.el.label( 26 | name, 27 | class_name="text-sm font-medium", 28 | ) 29 | ) 30 | for index, name in enumerate(path_names) 31 | ], 32 | spacing="1", 33 | ) 34 | -------------------------------------------------------------------------------- /buridan_ui/wrappers/component/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/buridan_ui/wrappers/component/__init__.py -------------------------------------------------------------------------------- /cleanup.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | # Usage: 3 | # ./cleanup.sh /PREFIX-NAME 4 | 5 | PREFIX=$1 6 | 7 | if [ -z "$PREFIX" ]; then 8 | echo "Usage: $0 " 9 | exit 1 10 | fi 11 | 12 | echo "Deleting local branches starting with '$PREFIX'..." 13 | 14 | for branch in $(git branch | grep "$PREFIX"); do 15 | branch_clean=$(echo "$branch" | sed 's/\*//g' | xargs) 16 | if [[ "$branch_clean" != "main" && "$branch_clean" != "master" ]]; then 17 | git branch -D "$branch_clean" 18 | fi 19 | done 20 | 21 | echo "Clearing all stashes..." 22 | git stash clear 23 | 24 | echo "Cleanup complete." 25 | -------------------------------------------------------------------------------- /pyproject.toml: -------------------------------------------------------------------------------- 1 | [project] 2 | name = "buridan-ui" 3 | version = "0.6.5" 4 | description = "Buridan UI – a Reflex-based UI component library" 5 | authors = [{ name = "Ahmad Hakim", email = "ahmad@reflex.dev" }] 6 | readme = "README.md" 7 | requires-python = ">=3.10" 8 | dependencies = [ 9 | "reflex>=0.7.12", 10 | "pre-commit>=4.2.0", 11 | "black>=25.1.0", 12 | "pytest>=8.3.5", 13 | ] 14 | -------------------------------------------------------------------------------- /pyrightconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "venvPath": ".", 3 | "venv": ".venv", 4 | "pythonVersion": "3.13" 5 | } 6 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.11 2 | pre-commit>=4.2.0 3 | -------------------------------------------------------------------------------- /rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | tailwind_config = { 4 | "plugins": ["@tailwindcss/typography"], 5 | "theme": { 6 | "extend": { 7 | "colors": { 8 | "background": "var(--background)", 9 | "foreground": "var(--foreground)", 10 | "border": "var(--border)", 11 | "pattern-ui": "var(--pattern-ui)", 12 | "pattern-lab": "var(--pattern-lab)", 13 | }, 14 | } 15 | }, 16 | } 17 | 18 | config = rx.Config( 19 | telemetry=False, 20 | app_name="buridan_ui", 21 | tailwind=tailwind_config, 22 | show_built_with_reflex=False, 23 | ) 24 | -------------------------------------------------------------------------------- /tests/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buridan-ui/ui/ca4f4e68f89432cb5e680c6accc474b291b87408/tests/__init__.py --------------------------------------------------------------------------------