BetterUi Components
Previews
Collapse all
Better Ui
Action Messages
Default
All Variants
All Styles
Form Errors
Success Message
With Title
With Icon
Dismissible
Auto Dismiss
Combined Features
Multiple Messages
Empty Messages
Playground
Avatar
Default
All Variants
All Sizes
All Shapes
With Status
With Initials
Playground
Badge
Default
All Variants
All Styles
All Sizes
Dot Badges
Counter Badges
Playground
Breadcrumb
Breadcrumb
Default
All Separators
With Icons
Playground
Button
Default
All Variants
All Sizes
With Icons
Loading States
Form Integration
Interactive Demo
Playground
Auto-Loading Submit Button
As Links
Link States
External Links
Turbo Method Links
Link Playground
Card
Default
With Header
With Footer
With All Sections
Solid Style
Outline Style
Ghost Style (Transparent)
Soft Style
Bordered Style
Success Card
Danger Card
Info Card
Without Shadow
Extra Small Size
Small Size
Large Size
Extra Large Size
All Variants
All Styles
All Sizes
Full-Width Image
Table Container
No Padding
Selective Padding
Playground
Container
Default
All Sizes
Without Padding
Without Centering
Full Width
Playground
Dialog
Dialog
Default
All Sizes
With All Slots
No Close Button
Playground
Dialog Alert
Default (Info)
All Variants
Without Icon
Custom Button Label
Playground
Dialog Confirm
Default (Warning)
All Variants
Danger Confirm
Custom Labels
Playground
Divider
Default
All Styles
With Labels
Vertical
Playground
Drawer
Header
Default
With Navigation
With Actions
With Mobile Menu Button
Complete Header
Light Variant
Dark Variant
Primary Variant
Transparent Variant
Small Height
Large Height
Non-Sticky
Playground
Layout
Default
With Header Only
With Sidebar Only
Complete Layout
Right Sidebar
Dark Theme
Primary Theme
Dashboard Example
Playground
Nav Group
Default
Without Title
With Badges
Dark Variant
Primary Variant
With HTTP Method
Complete Sidebar Navigation
Playground
Nav Item
Default
With Icon
Active State
With Badge
With HTTP Method (Delete)
Dark Variant
Primary Variant
All Features
Playground
Sidebar
Default
With Header
With Footer
Complete Sidebar
Light Variant
Dark Variant
Primary Variant
Left Position
Right Position
Small Width (Icon Only)
Large Width
Playground
Dropdown
Dropdown
Default
All Sizes
With Icons
With Dividers and Headers
Placement Options
Disabled Items
Playground
Fa Icon
Default
All Styles
All Sizes
All Variants
Animations
Transformations
Playground
Forms
Checkbox
Default
Checked
With Hint
With Errors
Required Field
Disabled State
Readonly State
Label on Left
All Sizes
All Variants
Form Integration
Playground
Checkbox Group
Default
With Selection
Horizontal Layout
With Hint
With Errors
Required Field
Disabled State
All Variants
Orientations
Form Integration
Playground
Number Input
Default
With Value
With Min, Max, and Step
With Hint
With Errors
Required Field
Disabled State
Readonly State
Without Spinners
With Prefix Icon (Currency)
With Suffix Icon (Unit)
With Both Icons
All Sizes
Form Integration
Playground
Password Input
Default
With Value
With Hint
With Errors
Required Field
Disabled State
Readonly State
With Prefix Icon (Lock)
Complete Example
Confirm Password Example
All Sizes
Form Integration
Playground
Select
Default
With Value
With Hint
With Errors
Required
Disabled
Readonly
Clearable
With Prefix Icon
All Sizes
All States
Playground
Text Input
Default
With Value
With Hint
With Errors
Required Field
Disabled State
Readonly State
With Prefix Icon
With Suffix Icon
With Both Icons
All Input Types
Email Type
Telephone Type
Date Type
Time Type
All Sizes
Form Integration
Playground
Textarea
Default
With Value
With Hint
With Errors
Required Field
Disabled State
Readonly State
Custom Rows
With Character Limit
Resize None
Resize Horizontal
Resize Both
With Prefix Icon
With Suffix Icon
With Both Icons
All Sizes
All Resize Variants
Form Integration
Playground
Heading
Default
All Levels
With Subtitle (String)
With Subtitle (Slot)
With Actions
With Divider
All Variants
All Alignments
Complete Example
Playground
Link
Default
All Variants
All Styles
All Sizes
With Icons
Playground
Pagination
Pagination
Default
All Variants
All Styles
All Sizes
With Info
Edge Cases
Playground
Progress
Default
All Variants
All Sizes
With Labels
Animated
Playground
Spinner
Default
All Variants
All Sizes
With Label
Playground
Table
Table
Default
Bordered
Striped
Hoverable
All Variants
All Sizes
Collection Mode
Empty State
With Footer
Inside Card
Highlighted Rows
Sortable Headers
Row HTML Customization
Tabs
Tabs Container
Default (Underline)
Pills Style
Bordered Style
All Variants (Underline)
All Sizes
Alignments
Vertical Tabs (Left)
Vertical Tabs (Right)
With Icons and Badges
Disabled Tab
Turbo Mode Example
Playground
Tag
Default
All Variants
All Styles
Dismissible
As Links
Playground
Tooltip
Default
All Positions
Variants
Playground
No matching results.
BetterUi Components
Select a preview from the nav to get started.