# Dashkit
Production-ready UI components for Dash applications with modern dashboard styling. All components are configurable and can be used across different projects.
## Project Structure
```
dashkit/
├── src/
│ ├── dashkit/ # Reusable components package
│ │ ├── __init__.py
│ │ ├── layout.py # Main layout component
│ │ ├── sidebar.py # Configurable sidebar
│ │ ├── header.py # Configurable header
│ │ ├── table.py # Dashkit-style tables
│ │ ├── buttons.py # Button components
│ │ ├── logo.py # Logo components
│ │ ├── navigation.py # Navigation components
│ │ └── dashkit_table/ # Advanced table components
│ └── assets/
│ ├── style.css # Compiled styles
│ └── input.css # Tailwind source
├── run.py # Quick demo runner
└── pyproject.toml # Dependencies
```
## Installation
```bash
pip install dash-dashkit
# Also ensure these dependencies are available (they install automatically):
# dashkit_table, dashkit_shadcn, dashkit_kiboui
```
## Quick Start
### Minimal app
```python
from dash import Dash, html
import dashkit
app = Dash(__name__)
dashkit.setup_app(app)
rows = [{"name":"Alice","score":10},{"name":"Bob","score":20}]
cols = [{"data":"name","title":"Name"},{"data":"score","title":"Score"}]
app.layout = dashkit.create_layout(
content=html.Div([
html.H3("Example"),
dashkit.Table(id="t", data=rows, columns=cols, height=240),
])
)
if __name__ == "__main__":
app.run(debug=True)
```
- Install core: `pip install dash-dashkit`
- With table: `pip install dash-dashkit[table]`
- With everything: `pip install dash-dashkit[all]`
### Using Components in Your Project
```python
from dashkit import create_layout, setup_app, Table
app = Dash(__name__)
# Configure app with dashkit styling (handles CSS and theme injection)
setup_app(app)
# Configure sidebar
sidebar_config = {
"brand_name": "Your App",
"brand_initial": "Y",
"nav_items": [
{"icon": "fas fa-home", "label": "Dashboard"},
],
"sections": [
{
"title": "Records",
"items": [
{"type": "nav_item", "icon": "fas fa-users", "label": "Users"}
]
}
]
}
# Configure header
header_config = {
"page_title": "Dashboard",
"page_icon": "📊",
"actions": [
{"type": "primary", "label": "New Item", "icon": "fas fa-plus"}
]
}
# Create your content
table = Table(id="my-table", data=your_data, columns=your_columns)
# Build the layout
app.layout = create_layout(
content=table,
sidebar_config=sidebar_config,
header_config=header_config
)
```
## Available Components
### Layout Components
- `create_layout()` - Main application layout
- `create_sidebar()` - Configurable sidebar with navigation
- `create_header()` - Two-tier header with search and actions
### Table Components
- `Table()` - Modern table using Handsontable
- `TableWithStats()` - Table with count header
### UI Components
- `PrimaryButton()` - Primary action buttons
- `SecondaryButton()` - Secondary action buttons
## Features
- ✅ Fully configurable components
- ✅ Modern dashboard design system
- ✅ TypeScript support for tables
- ✅ Modern Handsontable v16.0.1 integration
- ✅ Responsive layout
- ✅ Font Awesome icons
- ✅ Inter font typography
- ✅ Clean, linted code (ruff + basedpyright)
## Development
### Available Tasks
This project uses taskipy for common development tasks:
```bash
# Complete setup (install npm deps, build table component, install Python package)
uv run task setup
# Build only the table component
uv run task build-table
# Install only the table component
uv run task install-table
# Run linting and formatting
uv run task lint
# Run type checking
uv run task typecheck
# Run both linting and type checking
uv run task check
# Start the development server
uv run task dev
```
### Manual Development Commands
```bash
# Run linting
ruff check .
ruff format .
# Run type checking
basedpyright src
# Build CSS (if modified)
npx tailwindcss -i src/assets/input.css -o src/assets/style.css --watch
# Manual table component build
cd src/dashkit_table
npm install
npm run build
uv pip install -e .
```
## Releasing (manual tags)
Releases are driven by tags. Publishing runs in CI and a smoke test validates PyPI install.
Prerequisites:
- GitHub Actions secret: `PYPI_API_TOKEN` (PyPI API token with upload permission)
Subpackages
- dashkit_table
1. Bump version in `src/dashkit_table/pyproject.toml`
2. Commit and push (if ignored, force add): `git add -f src/dashkit_table/pyproject.toml && git commit -m "release(table): X.Y.Z" && git push`
3. Tag and push: `git tag dashkit_table-vX.Y.Z && git push origin dashkit_table-vX.Y.Z`
- dashkit_kiboui
1. Bump version in `src/dashkit_kiboui/pyproject.toml`
2. Commit and push
3. Tag and push: `git tag dashkit_kiboui-vX.Y.Z && git push origin dashkit_kiboui-vX.Y.Z`
Main package (dash-dashkit)
- Bump version in `pyproject.toml` (update subpackage minimums as needed)
- Commit and push
- Tag and push: `git tag dash-dashkit-vX.Y.Z && git push origin dashkit-vX.Y.Z`
- Legacy form `vX.Y.Z` is also supported
CI workflows
- Publish: builds the package for the matching tag and uploads to PyPI
- Smoke: installs the just-published version in a clean venv and imports/instantiates components
- Manual fallback: both workflows support `workflow_dispatch` with `tag_name` if you need to re-run
Notes
- If `src/dashkit_table` is ignored in `.gitignore`, use `git add -f` or remove the ignore entry
- Tag patterns must match exactly as above (component-vX.Y.Z)
## Configuration Examples
See `src/dashkit_demo/app.py` for complete configuration examples including:
- Sidebar navigation structure
- Header actions and filters
- Table data formatting
- Component styling options
Raw data
{
"_id": null,
"home_page": null,
"name": "dash-dashkit",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.10",
"maintainer_email": null,
"keywords": "charts, components, dash, dashboard, handsontable, plotly, tailwind, ui",
"author": "Dashkit Team",
"author_email": null,
"download_url": "https://files.pythonhosted.org/packages/65/23/4634f864a847c0f5454a5b037150126d3d109421a2d728173e9d92092b59/dash_dashkit-1.2.5.tar.gz",
"platform": null,
"description": "# Dashkit\n\nProduction-ready UI components for Dash applications with modern dashboard styling. All components are configurable and can be used across different projects.\n\n## Project Structure\n\n```\ndashkit/\n\u251c\u2500\u2500 src/\n\u2502 \u251c\u2500\u2500 dashkit/ # Reusable components package\n\u2502 \u2502 \u251c\u2500\u2500 __init__.py\n\u2502 \u2502 \u251c\u2500\u2500 layout.py # Main layout component\n\u2502 \u2502 \u251c\u2500\u2500 sidebar.py # Configurable sidebar\n\u2502 \u2502 \u251c\u2500\u2500 header.py # Configurable header\n\u2502 \u2502 \u251c\u2500\u2500 table.py # Dashkit-style tables\n\u2502 \u2502 \u251c\u2500\u2500 buttons.py # Button components\n\u2502 \u2502 \u251c\u2500\u2500 logo.py # Logo components\n\u2502 \u2502 \u251c\u2500\u2500 navigation.py # Navigation components\n\u2502 \u2502 \u2514\u2500\u2500 dashkit_table/ # Advanced table components\n\u2502 \u2514\u2500\u2500 assets/\n\u2502 \u251c\u2500\u2500 style.css # Compiled styles\n\u2502 \u2514\u2500\u2500 input.css # Tailwind source\n\u251c\u2500\u2500 run.py # Quick demo runner\n\u2514\u2500\u2500 pyproject.toml # Dependencies\n```\n\n## Installation\n\n```bash\npip install dash-dashkit\n# Also ensure these dependencies are available (they install automatically):\n# dashkit_table, dashkit_shadcn, dashkit_kiboui\n```\n\n## Quick Start\n\n### Minimal app\n\n```python\nfrom dash import Dash, html\nimport dashkit\n\napp = Dash(__name__)\ndashkit.setup_app(app)\n\nrows = [{\"name\":\"Alice\",\"score\":10},{\"name\":\"Bob\",\"score\":20}]\ncols = [{\"data\":\"name\",\"title\":\"Name\"},{\"data\":\"score\",\"title\":\"Score\"}]\n\napp.layout = dashkit.create_layout(\n content=html.Div([\n html.H3(\"Example\"),\n dashkit.Table(id=\"t\", data=rows, columns=cols, height=240),\n ])\n)\n\nif __name__ == \"__main__\":\n app.run(debug=True)\n```\n\n- Install core: `pip install dash-dashkit`\n- With table: `pip install dash-dashkit[table]`\n- With everything: `pip install dash-dashkit[all]`\n\n### Using Components in Your Project\n\n```python\nfrom dashkit import create_layout, setup_app, Table\n\napp = Dash(__name__)\n\n# Configure app with dashkit styling (handles CSS and theme injection)\nsetup_app(app)\n\n# Configure sidebar\nsidebar_config = {\n \"brand_name\": \"Your App\",\n \"brand_initial\": \"Y\",\n \"nav_items\": [\n {\"icon\": \"fas fa-home\", \"label\": \"Dashboard\"},\n ],\n \"sections\": [\n {\n \"title\": \"Records\",\n \"items\": [\n {\"type\": \"nav_item\", \"icon\": \"fas fa-users\", \"label\": \"Users\"}\n ]\n }\n ]\n}\n\n# Configure header\nheader_config = {\n \"page_title\": \"Dashboard\",\n \"page_icon\": \"\ud83d\udcca\",\n \"actions\": [\n {\"type\": \"primary\", \"label\": \"New Item\", \"icon\": \"fas fa-plus\"}\n ]\n}\n\n# Create your content\ntable = Table(id=\"my-table\", data=your_data, columns=your_columns)\n\n# Build the layout\napp.layout = create_layout(\n content=table,\n sidebar_config=sidebar_config,\n header_config=header_config\n)\n```\n\n## Available Components\n\n### Layout Components\n\n- `create_layout()` - Main application layout\n- `create_sidebar()` - Configurable sidebar with navigation\n- `create_header()` - Two-tier header with search and actions\n\n### Table Components\n\n- `Table()` - Modern table using Handsontable\n- `TableWithStats()` - Table with count header\n\n### UI Components\n\n- `PrimaryButton()` - Primary action buttons\n- `SecondaryButton()` - Secondary action buttons\n\n## Features\n\n- \u2705 Fully configurable components\n- \u2705 Modern dashboard design system\n- \u2705 TypeScript support for tables\n- \u2705 Modern Handsontable v16.0.1 integration\n- \u2705 Responsive layout\n- \u2705 Font Awesome icons\n- \u2705 Inter font typography\n- \u2705 Clean, linted code (ruff + basedpyright)\n\n## Development\n\n### Available Tasks\n\nThis project uses taskipy for common development tasks:\n\n```bash\n# Complete setup (install npm deps, build table component, install Python package)\nuv run task setup\n\n# Build only the table component\nuv run task build-table\n\n# Install only the table component\nuv run task install-table\n\n# Run linting and formatting\nuv run task lint\n\n# Run type checking\nuv run task typecheck\n\n# Run both linting and type checking\nuv run task check\n\n# Start the development server\nuv run task dev\n```\n\n### Manual Development Commands\n\n```bash\n# Run linting\nruff check .\nruff format .\n\n# Run type checking\nbasedpyright src\n\n# Build CSS (if modified)\nnpx tailwindcss -i src/assets/input.css -o src/assets/style.css --watch\n\n# Manual table component build\ncd src/dashkit_table\nnpm install\nnpm run build\nuv pip install -e .\n```\n\n## Releasing (manual tags)\n\nReleases are driven by tags. Publishing runs in CI and a smoke test validates PyPI install.\n\nPrerequisites:\n\n- GitHub Actions secret: `PYPI_API_TOKEN` (PyPI API token with upload permission)\n\nSubpackages\n\n- dashkit_table\n 1. Bump version in `src/dashkit_table/pyproject.toml`\n 2. Commit and push (if ignored, force add): `git add -f src/dashkit_table/pyproject.toml && git commit -m \"release(table): X.Y.Z\" && git push`\n 3. Tag and push: `git tag dashkit_table-vX.Y.Z && git push origin dashkit_table-vX.Y.Z`\n- dashkit_kiboui\n 1. Bump version in `src/dashkit_kiboui/pyproject.toml`\n 2. Commit and push\n 3. Tag and push: `git tag dashkit_kiboui-vX.Y.Z && git push origin dashkit_kiboui-vX.Y.Z`\n\nMain package (dash-dashkit)\n\n- Bump version in `pyproject.toml` (update subpackage minimums as needed)\n- Commit and push\n- Tag and push: `git tag dash-dashkit-vX.Y.Z && git push origin dashkit-vX.Y.Z`\n - Legacy form `vX.Y.Z` is also supported\n\nCI workflows\n\n- Publish: builds the package for the matching tag and uploads to PyPI\n- Smoke: installs the just-published version in a clean venv and imports/instantiates components\n- Manual fallback: both workflows support `workflow_dispatch` with `tag_name` if you need to re-run\n\nNotes\n\n- If `src/dashkit_table` is ignored in `.gitignore`, use `git add -f` or remove the ignore entry\n- Tag patterns must match exactly as above (component-vX.Y.Z)\n\n## Configuration Examples\n\nSee `src/dashkit_demo/app.py` for complete configuration examples including:\n\n- Sidebar navigation structure\n- Header actions and filters\n- Table data formatting\n- Component styling options\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Modern dashboard components for Dash applications",
"version": "1.2.5",
"project_urls": {
"Homepage": "https://pypi.org/project/dash-dashkit/",
"Issues": "https://github.com/iamgp/dash_dashkit/issues",
"Source": "https://github.com/iamgp/dash_dashkit"
},
"split_keywords": [
"charts",
" components",
" dash",
" dashboard",
" handsontable",
" plotly",
" tailwind",
" ui"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "7e7693f7d26c3b30ca1059d6b87f9ac865349877e6abcd060e119640a0c106bc",
"md5": "995f9ae1f9c4810ad6aa62fb23550ad2",
"sha256": "4c90b6a4a9dcecaa7403cd19ea1e0c75f5c7d1a688c3f308f9a37708869d2773"
},
"downloads": -1,
"filename": "dash_dashkit-1.2.5-py3-none-any.whl",
"has_sig": false,
"md5_digest": "995f9ae1f9c4810ad6aa62fb23550ad2",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.10",
"size": 37678,
"upload_time": "2025-08-22T21:48:51",
"upload_time_iso_8601": "2025-08-22T21:48:51.481522Z",
"url": "https://files.pythonhosted.org/packages/7e/76/93f7d26c3b30ca1059d6b87f9ac865349877e6abcd060e119640a0c106bc/dash_dashkit-1.2.5-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "65234634f864a847c0f5454a5b037150126d3d109421a2d728173e9d92092b59",
"md5": "0b610fd9421d630bd005f0379d657fd7",
"sha256": "bc42aabda1aa2e89b1e45432ca74955d89f067d87df2a0c42951aa5998ef224e"
},
"downloads": -1,
"filename": "dash_dashkit-1.2.5.tar.gz",
"has_sig": false,
"md5_digest": "0b610fd9421d630bd005f0379d657fd7",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.10",
"size": 34130,
"upload_time": "2025-08-22T21:48:52",
"upload_time_iso_8601": "2025-08-22T21:48:52.722106Z",
"url": "https://files.pythonhosted.org/packages/65/23/4634f864a847c0f5454a5b037150126d3d109421a2d728173e9d92092b59/dash_dashkit-1.2.5.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-08-22 21:48:52",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "iamgp",
"github_project": "dash_dashkit",
"github_not_found": true,
"lcname": "dash-dashkit"
}
JSON
