Download the PHP package cisse/ui-bundle without Composer
On this page you can find all versions of the php package cisse/ui-bundle. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Table of contents
Download cisse/ui-bundle
More information about cisse/ui-bundle
Files in cisse/ui-bundle
Download cisse/ui-bundle
More information about cisse/ui-bundle
Files in cisse/ui-bundle
Vendor cisse
Package ui-bundle
Short Description A Symfony UI bundle containing reusable anonymous Twig components styled with TailwindCSS
License MIT
Homepage https://symfony.com
Package ui-bundle
Short Description A Symfony UI bundle containing reusable anonymous Twig components styled with TailwindCSS
License MIT
Homepage https://symfony.com
FAQ
After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.
Example:
Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories.
In this case some credentials are needed to access such packages.
Please use the auth.json textarea to insert credentials, if a package is coming from a private repository.
You can look here for more information.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?
Informations about the package ui-bundle
Symfony UI Bundle
🎨 A modern Symfony UI bundle with 70+ reusable Twig components styled with TailwindCSS. Build beautiful, consistent interfaces faster with pre-built form controls, navigation, tables, and more.
✨ Features
- 🧩 70+ Components - Forms, tables, navigation, tabs, modals, cards, and more
- 🎨 TailwindCSS Styled - Modern, responsive design out of the box
- 🔧 Fully Customizable - Override styles and extend components easily
- ⚡ Smart Class Merging - Intelligent TailwindCSS class deduplication
- 🌙 Dark Mode Ready - Built-in dark theme support
- 📱 Mobile First - Responsive components for all devices
- 🔒 Type Safe - Full IDE support and autocompletion
🚀 Quick Start
1. Install the Bundle
2. Register the Bundle (if not using Flex)
Add to your config/bundles.php:
3. Install Dependencies
4. Configure Your CSS (Required)
Create your main CSS file with the required setup:
📋 Requirements
- PHP 8.1+
- Symfony 6.1+ or 7.0+
- Twig 3.0+
- TailwindCSS (via symfonycasts/tailwind-bundle)
🧩 Component Library
📝 Form Components
| Component | Description |
|---|---|
<twig:Ui:input> |
Smart input with automatic type detection |
<twig:Ui:input:text> <twig:Ui:input:textarea> |
Text inputs and textareas |
<twig:Ui:input:checkbox> <twig:Ui:input:date> |
Checkboxes and date pickers |
<twig:Ui:input:email> <twig:Ui:input:url> |
Email and URL inputs with validation |
<twig:Ui:input:phone> <twig:Ui:input:money> |
Phone and money inputs |
<twig:Ui:input:number> <twig:Ui:input:quantity> |
Number and quantity inputs |
<twig:Ui:input:otp> |
One-time password input |
<twig:Ui:input:search> |
Search input with icon |
<twig:Ui:label> |
Form labels with proper styling |
<twig:Ui:select> |
Styled select dropdowns |
<twig:Ui:combobox> |
Searchable select with autocomplete |
<twig:Ui:switch> |
Toggle switches |
<twig:Ui:slider> <twig:Ui:range-slider> |
Slider and range slider inputs |
<twig:Ui:rating> |
Star rating input |
<twig:Ui:color-picker> |
Color selection input |
<twig:Ui:icon-picker> |
Icon selection input |
<twig:Ui:file-upload> |
File upload with drag and drop |
<twig:Ui:tags-input> |
Tags/chips input |
<twig:Ui:form> |
Form container with validation |
<twig:Ui:form-section> |
Form section with header and content |
<twig:Ui:form-actions> |
Form action buttons container |
<twig:Ui:input-group> <twig:Ui:input-wrapper> |
Input grouping and wrapping |
<twig:Ui:input-addon> |
Input addons (prefix/suffix) |
🎨 UI Components
| Component | Description |
|---|---|
<twig:Ui:button> |
Buttons with multiple variants (primary, secondary, error) |
<twig:Ui:button-group> |
Group related buttons together with shared styling |
<twig:Ui:badge> |
Status badges with colors, sizes, and variants |
<twig:Ui:alert> |
Alert notifications with icons and dismiss functionality |
<twig:Ui:card> |
Card layouts with header, content, and footer sections |
<twig:Ui:collapsible-card> |
Cards with expandable/collapsible content |
<twig:Ui:modal> |
Modal dialogs with backdrop |
<twig:Ui:confirm-dialog> |
Confirmation dialogs for destructive actions |
<twig:Ui:slide-over> |
Slide-out panels for details |
<twig:Ui:dropdown> |
Dropdown menus with positioning options |
<twig:Ui:popover> |
Contextual popovers with rich content |
<twig:Ui:tooltip> |
Contextual tooltips |
<twig:Ui:divider> |
Visual content separators |
<twig:Ui:avatar> |
User avatars with images or initials |
<twig:Ui:kbd> |
Keyboard key display for shortcuts |
<twig:Ui:code-block> |
Code display with optional copy button |
<twig:Ui:command-palette> |
Quick navigation and actions palette (⌘K) |
🧭 Navigation
| Component | Description |
|---|---|
<twig:Ui:menu> <twig:Ui:menu:item> |
Navigation menus with sub-menus |
<twig:Ui:tabs> <twig:Ui:tabs:item> |
Tabbed navigation with keyboard support |
<twig:Ui:filter-tabs> |
Filter tabs for list filtering |
<twig:Ui:breadcrumb> |
Breadcrumb navigation |
<twig:Ui:pagination> |
Pagination controls |
<twig:Ui:stepper> |
Step-by-step progress indicator |
<twig:Ui:timeline> |
Vertical timeline for events |
📊 Tables & Data
| Component | Description |
|---|---|
<twig:Ui:table> <twig:Ui:data-table> |
Responsive tables with sorting |
<twig:Ui:table:selectable> |
Tables with row selection |
<twig:Ui:thead> <twig:Ui:tbody> <twig:Ui:tfoot> |
Table sections |
<twig:Ui:tr> <twig:Ui:th> <twig:Ui:td> |
Table rows and cells (tr supports expandable) |
<twig:Ui:datalist> |
Definition lists for key-value pairs |
<twig:Ui:responsive-list> |
Responsive list with desktop/mobile views |
<twig:Ui:mobile-list> |
Mobile-optimized list display |
<twig:Ui:stat> <twig:Ui:stat:item> |
Statistics display with trends |
<twig:Ui:boolean> |
Boolean value display with icons |
📈 Advanced Components
| Component | Description |
|---|---|
<twig:Ui:accordion> |
Collapsible content sections |
<twig:Ui:empty-state> |
Placeholder for empty data states |
<twig:Ui:skeleton> |
Loading placeholders (text, card, table, list) |
<twig:Ui:loading-spinner> |
Loading spinner indicator |
<twig:Ui:progress> |
Progress bars |
<twig:Ui:toast> |
Toast notifications |
<twig:Ui:notification-list> |
Notification list display |
<twig:Ui:dark-mode-toggle> |
Dark/light mode switcher |
<twig:Ui:container> |
Responsive container wrapper |
💡 Usage Examples
🔘 Buttons
🏷️ Badges
🚨 Alerts
JavaScript Integration:
🃏 Cards
📝 Forms
🧭 Tabs
JavaScript Controller Example:
Advanced Stimulus Integration:
📊 Data Tables
🔽 Expandable Rows
Create expandable table rows with the expandable prop on <twig:Ui:tr>. The expand button is automatically added as the first cell:
Expandable Row Props
| Prop | Type | Default | Description |
|---|---|---|---|
expandable |
boolean | false |
Enable expandable row mode |
colspan |
number | 1 |
Number of data columns (expand button column is added automatically) |
defaultExpanded |
boolean | false |
Start in expanded state |
expandedClass |
string | '' |
Additional classes for expanded row |
💻 Code Block
Display code or JSON with optional title and copy button:
Code Block Props
| Prop | Type | Default | Description |
|---|---|---|---|
title |
string | null |
Optional header title |
language |
string | 'json' |
Code language (for syntax highlighting) |
maxHeight |
string | '12rem' |
Maximum height with scroll |
copyable |
boolean | false |
Show copy to clipboard button |
⚙️ Configuration
The bundle can be configured in config/packages/ux_components.yaml:
🎨 TailwindCSS Setup (Critical)
⚠️ Required CSS Configuration
CRITICAL: Your main CSS file must include these required elements:
🔧 Smart Class Merging
All components include intelligent TailwindCSS class merging:
- Advanced merging with
gehrisandro/tailwind-merge-php(if installed) - Fallback deduplication for basic class conflicts
- Predictable overrides - later classes take precedence
🌙 Dark Mode Support
Built-in dark mode with CSS custom properties:
⚠️ Critical: The
@source "../../vendor/cisse/ui-bundle";directive is mandatory and must be included in your CSS file for the components to work properly.
Example:
🔧 Customization
Component Properties
All components accept standard HTML attributes plus component-specific props:
Extending Components
Override any component by creating templates in your application:
Theme Customization
Customize the entire design system by modifying CSS variables:
🚀 Development
Contributing
We welcome contributions! To get started:
-
Clone the repository
-
Install dependencies
-
Run tests
- Code standards
Project Structure
📄 License
This bundle is released under the MIT License. See the LICENSE file for details.
🔗 Useful Links
- 📖 Symfony UX Documentation
- 🎨 TailwindCSS Documentation
- 🔧 Twig Documentation
- 💬 GitHub Issues
- 🐛 Report a Bug
**Made with ❤️ for the Symfony community**
⭐ **Star this repo** if you find it useful!
All versions of ui-bundle with dependencies
PHP Build Version
Package Version
Requires
php Version
>=8.2
symfony/config Version ^7.3
symfony/dependency-injection Version ^7.3
symfony/framework-bundle Version ^7.3
symfony/http-kernel Version ^7.3
symfony/string Version ^7.3
symfony/twig-bundle Version ^7.3
symfony/ux-icons Version ^2.32
symfony/ux-twig-component Version ^2.32
tales-from-a-dev/twig-tailwind-extra Version ^1.0
twig/twig Version ^3.0
symfony/uid Version ^7.3
symfony/config Version ^7.3
symfony/dependency-injection Version ^7.3
symfony/framework-bundle Version ^7.3
symfony/http-kernel Version ^7.3
symfony/string Version ^7.3
symfony/twig-bundle Version ^7.3
symfony/ux-icons Version ^2.32
symfony/ux-twig-component Version ^2.32
tales-from-a-dev/twig-tailwind-extra Version ^1.0
twig/twig Version ^3.0
symfony/uid Version ^7.3
The package cisse/ui-bundle contains the following files
Loading the files please wait ...