Learn best practices or jumpstart your next design project with the FULL set of inputs from the UI Prep Design System. Inputs use best practices from Material Design, Bootstrap, and Figma. Learn more about how they are optimized for easy use and maintainability.
✅ Variants
✅ Base Components
✅ Auto Layout
✅ Saved Styles
✅ Quick Start Guide
✅ Input Playground
What's included?
Input types:
• Text (Single-line)
• Text (Multi-line)
• Text + Right Icon
• Text + Left Icon
• Text + Double Icon
• Multi-Input (with Chips)
Input states:
• Default
• Hover
• Focused
• Filled
• Disabled
• View only
• Feedback (Error, Warning, Success)
Quick Start Guide
• Steps on how to get started
• Helpful resources
Input Playground
• Exercise #1: Instances 101
• Exercise #2: Configure variants
• Exercise #3: Swapping instances
• Exercise #4: Update components
Watch a quick walkthrough of the full Design System
👉 Learn more at uiprep.com
---
Follow me on Twitter to say hi and learn about new updates and resources
Send an email to molly@quantidesign.io if you have any questions