shadcn/ui Components
Accordion
Alert
Alert Dialog
Avatar
Badge
Breadcrumb
Button
Button Group
Calendar
Card
Carousel
Chart
Checkbox
Collapsible
Combobox
Command
Context Menu
Data Table
Date Picker
Dialog
Drawer
Dropdown Menu
Empty
Field
Form
Hover Card
Input
Input Group
Input OTP
Item
Kbd
Label
Menubar
Navigation Menu
Pagination
Popover
Progress
Radio Group
Resizable
Scroll-area
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Spinner
Switch
Table
Tabs
Textarea
Toast
Toggle
Toggle Group
Tooltip
Pro Marketing Components
Figma UI component
Figma Field component
A Field component for Figma, used to combine labels, input controls, and help text into a single accessible form element. It ensures consistent spacing, alignment, and information hierarchy across different types of inputs.
Usability tip
Always pair inputs with clear labels and concise helper text to guide users. Avoid relying on placeholder text alone, as it disappears once users start typing and can lead to confusion.
Usage
Ideal for creating consistent form layouts using Inputs, Selects, Textareas, Checkboxes, Radio Groups, Sliders, or Switches. Use Fields to maintain accessibility and uniform spacing across your form designs.
shadcn/ui Components are available in our Base Figma UI Kit.
Stay in the know
Keep updated on all things happening with Shadcraft.
We respect your privacy
Stay in the know
Keep updated on all things happening with Shadcraft.
We respect your privacy
Stay in the know
Keep updated on all things happening with Shadcraft.
We respect your privacy