A Python library for building beautiful static websites using Python — no HTML/CSS required.

These details have been verified by PyPI

Project links

GitHub Statistics

Maintainers

swarup_72

These details have not been verified by PyPI

Project description

🐊 croc-ui

A Python library for building beautiful static websites using Python — no HTML/CSS required.

croc-ui lets you build complete, styled static websites entirely in Python. Write Python classes, get beautiful HTML. Run locally with a built-in dev server.

✨ Features

30+ UI Components — Cards, Navbars, Modals, Tabs, Tables, Accordions, Badges, Alerts, Forms, and more
Fluent Style Builder — Chain CSS properties with Style().color("red").font_size("16px")
Theme System — Built-in presets (default, dark, ocean, forest) or build your own
Zero Dependencies — Uses only Python's standard library
Dev Server — One-line local server with route registration, static file serving, and browser auto-open
Page Builder — Full HTML page with <head>, Google Fonts, icon libraries, and meta tags

🚀 Installation

pip install croc-ui

Or from source:

git clone https://github.com/swarup-kumar-sahoo/croc
cd croc
pip install -e .

⚡ Quick Start

from croc_ui import App, Page, Navbar, Container, H1, P, Button, Card, Theme

app = App()

@app.route("/")
def home():
    page = Page(
        title="My Website",
        theme=Theme("default"),
        fonts=["Inter"],
    )
    page.add(
        Navbar(brand="My Site", links=[("Home", "/"), ("About", "/about")], sticky=True),
        Container(
            H1("Welcome to My Site"),
            P("Built entirely in Python with croc-ui.", style="color: var(--croc-text-muted);"),
            Button("Get Started →", variant="primary"),
        ),
    )
    return page

@app.route("/about")
def about():
    page = Page(title="About")
    page.add(
        Container(
            H1("About"),
            Card(
                P("This site was built with croc-ui — Python-powered web UI."),
                title="About croc-ui",
            )
        )
    )
    return page

app.run(port=3000)

Run it:

python app.py

Opens at http://localhost:3000 🎉

📦 Component Reference

Layout

Component	Description
`Container`	Centered max-width wrapper
`Row`	Flexbox row
`Column`	Flex column with optional span
`Section`	`<section>` block
`Header` / `Footer`	Semantic header/footer
`Div`	Generic `<div>`

Typography

Component	Description
`H1`–`H6`	Headings
`P`	Paragraph
`Span` / `Text`	Inline text
`Code` / `Pre`	Code blocks
`Blockquote`	Quoted text
`Label`	Form label with `for_` attribute

Forms

Component	Description
`Form`	`<form>` with action/method
`Input`	Text, email, password, number, etc.
`Button`	8 variants, 3 sizes
`Textarea`	Multi-line text input
`Select` + `Option`	Dropdown
`Checkbox` / `Radio`	Boolean inputs
`FileInput`	File upload
`Range`	Slider

Navigation

Component	Description
`Navbar`	Responsive top nav with brand + links
`Sidebar`	Vertical nav panel
`Breadcrumb`	Path breadcrumbs
`Tabs`	Tabbed content panels
`Pagination`	Page navigation

UI Components

Component	Description
`Card`	Content card with header/footer
`Badge`	Inline status badge
`Alert`	Dismissible alert message
`Modal`	Overlay dialog
`Tooltip`	Hover tooltip
`Progress`	Progress bar
`Spinner`	Loading spinner
`Accordion`	Collapsible sections
`Table`	Striped/hover data table
`List`	Ordered/unordered list
`Tag`	Removable filter tag
`Divider`	Horizontal rule with optional label
`Avatar`	Image or initials avatar

Media

Component	Description
`Img`	Image with lazy loading
`Video` / `Audio`	Media elements
`Icon`	Font Awesome / Bootstrap / Material icon
`SVG` / `Path`	SVG elements

🎨 Styling

Inline styles (dict or string)

H1("Hello", style={"color": "red", "font_size": "2rem"})
H1("Hello", style="color: red; font-size: 2rem")

Fluent Style builder

from croc_ui import Style

s = Style().color("red").font_size("2rem").padding("1rem").background_color("#f0f0f0")
H1("Hello", style=s)

CSS classes

Div("content", classes="my-class another-class")
Div("content", classes=["my-class", "another-class"])

Extra CSS on the Page

page = Page(extra_css="""
  .hero { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
  .hero h1 { color: white; }
""")

🎭 Themes

from croc_ui import Theme

# Built-in presets: "default", "dark", "ocean", "forest"
theme = Theme("dark")

# Override individual tokens
theme = Theme(
    preset="default",
    primary="#ff6b35",
    font_family="'Playfair Display', serif",
    border_radius="12px",
    shadow="0 4px 20px rgba(0,0,0,0.15)",
)

page = Page(theme=theme)

🌐 App & Routing

from croc_ui import App, Page

app = App(static_dir="./static")  # optional static file directory

# Decorator style
@app.route("/")
def home():
    return Page(title="Home")

# Programmatic
app.add_route("/about", about_page_fn)
app.add_page("/contact", contact_page_instance)

# Run
app.run(
    host="127.0.0.1",  # default
    port=3000,          # default
    open_browser=True,  # auto-open browser
)

📄 Saving Static HTML

page = Page(title="My Page")
page.add(H1("Hello!"))
page.save("index.html")      # saves rendered HTML to file
print(page.render())         # get HTML string

📁 Project Structure

croc-ui/
├── croc_ui/
│   ├── __init__.py         # Public API exports
│   ├── app.py              # Dev server (App class)
│   ├── page.py             # Page builder
│   ├── base.py             # Element base classes
│   ├── components/
│   │   ├── layout.py       # Container, Row, Column, etc.
│   │   ├── typography.py   # H1-H6, P, Code, etc.
│   │   ├── forms.py        # Input, Button, Select, etc.
│   │   ├── media.py        # Img, Video, Icon, SVG
│   │   ├── navigation.py   # Navbar, Tabs, Pagination
│   │   └── ui.py           # Card, Alert, Modal, Table, etc.
│   └── styles/
│       ├── style.py        # Fluent Style builder
│       └── theme.py        # Theme system
└── examples/
    └── example_app.py      # Full showcase app

🤝 Contributing

Issues and PRs welcome at https://github.com/swarup-kumar-sahoo/croc

📝 License

MIT License — © Swarup Kumar Sahoo

Project details

These details have been verified by PyPI

Project links

GitHub Statistics

Maintainers

swarup_72

These details have not been verified by PyPI

Release history Release notifications | RSS feed

This version

1.0.3

Mar 5, 2026

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

croc_ui-1.0.3.tar.gz (27.1 kB view details)

Uploaded Mar 5, 2026 Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

The dropdown lists show the available interpreters, ABIs, and platforms. Enable javascript to be able to filter the list of wheel files.

croc_ui-1.0.3-py3-none-any.whl (28.7 kB view details)

Uploaded Mar 5, 2026 Python 3

File details

Details for the file croc_ui-1.0.3.tar.gz.

File metadata

Download URL: croc_ui-1.0.3.tar.gz
Upload date: Mar 5, 2026
Size: 27.1 kB
Tags: Source
Uploaded using Trusted Publishing? Yes
Uploaded via: twine/6.1.0 CPython/3.13.7

File hashes

Hashes for croc_ui-1.0.3.tar.gz
Algorithm	Hash digest
SHA256	`5def0a78bb92a89137b20472cbd10b75b28d092f5ff5bf8d3f257aaed4fcdfa2`
MD5	`c172909a7844df4bc4d3fa0b345b1597`
BLAKE2b-256	`46f7d5c38be9a66151d49057bae077276196b021656a47c92cae1b05214c724f`

See more details on using hashes here.

Provenance

The following attestation bundles were made for croc_ui-1.0.3.tar.gz:

Publisher: publish.yml on swarup-kumar-sahoo/croc

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

Statement:
- Statement type: https://in-toto.io/Statement/v1
- Predicate type: https://docs.pypi.org/attestations/publish/v1
- Subject name: croc_ui-1.0.3.tar.gz
- Subject digest: 5def0a78bb92a89137b20472cbd10b75b28d092f5ff5bf8d3f257aaed4fcdfa2
- Sigstore transparency entry: 1040988506
- Sigstore integration time: Mar 5, 2026
Source repository:
- Permalink: swarup-kumar-sahoo/croc@52dfe4c7089f4546e8c52003b71f92eea775c4a4
- Branch / Tag: refs/tags/v1.0.3
- Owner: https://github.com/swarup-kumar-sahoo
- Access: public
Publication detail:
- Token Issuer: https://token.actions.githubusercontent.com
- Runner Environment: github-hosted
- Publication workflow: publish.yml@52dfe4c7089f4546e8c52003b71f92eea775c4a4
- Trigger Event: release

File details

Details for the file croc_ui-1.0.3-py3-none-any.whl.

File metadata

Download URL: croc_ui-1.0.3-py3-none-any.whl
Upload date: Mar 5, 2026
Size: 28.7 kB
Tags: Python 3
Uploaded using Trusted Publishing? Yes
Uploaded via: twine/6.1.0 CPython/3.13.7

File hashes

Hashes for croc_ui-1.0.3-py3-none-any.whl
Algorithm	Hash digest
SHA256	`d63ce90054133a3304e578ef08515d201fe2152354924460a8b7e75a7b942b4d`
MD5	`2eff6dd98e8b5414b7c87f8f628a1542`
BLAKE2b-256	`dcc7a8783224c175995ad9d689a390ee30a1250468dd29601795fe7f67bb2d71`

See more details on using hashes here.

Provenance

The following attestation bundles were made for croc_ui-1.0.3-py3-none-any.whl:

Publisher: publish.yml on swarup-kumar-sahoo/croc

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

Statement:
- Statement type: https://in-toto.io/Statement/v1
- Predicate type: https://docs.pypi.org/attestations/publish/v1
- Subject name: croc_ui-1.0.3-py3-none-any.whl
- Subject digest: d63ce90054133a3304e578ef08515d201fe2152354924460a8b7e75a7b942b4d
- Sigstore transparency entry: 1040988575
- Sigstore integration time: Mar 5, 2026
Source repository:
- Permalink: swarup-kumar-sahoo/croc@52dfe4c7089f4546e8c52003b71f92eea775c4a4
- Branch / Tag: refs/tags/v1.0.3
- Owner: https://github.com/swarup-kumar-sahoo
- Access: public
Publication detail:
- Token Issuer: https://token.actions.githubusercontent.com
- Runner Environment: github-hosted
- Publication workflow: publish.yml@52dfe4c7089f4546e8c52003b71f92eea775c4a4
- Trigger Event: release

croc-ui 1.0.3

Navigation

Verified details

Project links

GitHub Statistics

Maintainers

Unverified details

Meta

Classifiers

Project description

🐊 croc-ui

✨ Features

🚀 Installation

⚡ Quick Start

📦 Component Reference

Layout

Typography

Forms

Navigation

UI Components

Media

🎨 Styling

Inline styles (dict or string)

Fluent Style builder

CSS classes

Extra CSS on the Page

🎭 Themes

🌐 App & Routing

📄 Saving Static HTML

📁 Project Structure

🤝 Contributing

📝 License

Project details

Verified details

Project links

GitHub Statistics

Maintainers

Unverified details

Meta

Classifiers

Release history Release notifications | RSS feed

Download files

Source Distribution

Built Distribution

File details

File metadata

File hashes

Provenance

File details

File metadata

File hashes

Provenance