Kitchen Sink
A collection of all the components available.
Accordion
Collapsible content panels
What is Basecoat UI?
Basecoat UI is a collection of reusable UI components built with htpy and Tailwind CSS.
How do I use it?
Simply import the components you need and use them in your templates.
Is it customizable?
Yes! All components accept class overrides and additional attributes.
Alert
Informational messages and notifications
Success! Your changes have been saved
Custom icon example
This is an alert with icon, description and no title.
This is a very long alert title that demonstrates how the component handles extended text content and potentially wraps across multiple lines
Success! Your changes have been saved
Warning: Check this out
Destructive: Action failed
Alert Dialog
Modal dialogs for important actions
Avatar
User profile pictures and placeholders
CN
Badge
Status indicators and labels
Breadcrumb
Navigation hierarchy indicators
Button
Interactive buttons with various styles and states
Card
Content containers with headers and padding
Meeting Notes
Transcript from the meeting with the client.
Client requested dashboard redesign with focus on mobile responsiveness.
- New analytics widgets for daily/weekly metrics
- Simplified navigation menu
- Dark mode support
- Timeline: 6 weeks
- Follow-up meeting scheduled for next Tuesday
Is this an image?
This is a card with an image.
This is a simple card containing only text to demonstrate content-only cards.
Login to your account
Enter your details below to login to your account
Checkbox
Boolean input controls
By clicking this checkbox, you agree to the terms and conditions.
Combobox
Searchable dropdown selections
Dialog
Modal dialogs for user interactions
Demo Modal
This is a modal dialog with custom content.
You can put any content here, including forms, images, or other components.
Dropdown Menu
Contextual menus and actions
Form
Structured form layouts and validation
Input
Text input fields with labels
Label
Form field labels and descriptions
Pagination
Navigation for multi-page content
Popover
Floating content overlays
Dimensions
Set the dimensions for the layer.
Radio Group
Single selection from multiple options
Select
Dropdown selection menus
Skeleton
Loading state placeholders
Basic Skeletons
Media rows
Complex Skeletons
Slider
Range input controls
Switch
Toggle switches for boolean values
Table
Data display in tabular format
| Name | Status | Role | |
|---|---|---|---|
| John Doe | john@example.com | Active | Admin |
| Jane Smith | jane@example.com | Pending | User |
| Bob Johnson | bob@example.com | Inactive | User |
Tabs
Organized content panels
Account
Make changes to your account here. Click save when you're done.
Password
Change your password here. After saving, you'll be logged out.
Textarea
Multi-line text input fields
Toast
Non-intrusive notifications
Tooltip
Contextual help and information