fcontreras2-ui
Showcase de todos los componentes disponibles en la librería
Typography — Text
Headings
H1 — The quick brown fox
H2 — The quick brown fox
H3 — The quick brown fox
H4 — The quick brown fox
H5 — The quick brown fox
H6 — The quick brown fox
Body variants
body
body-sm
captionoverlinecodeColors
default
muted
primary
success
warning
danger
Weights
light
normal
medium
semibold
bold
Button
Variants
Sizes
States
Input
Default
Sizes
States
This field is required
We'll never share your email
Textarea
Default
Error
Bio is too short
Select
Default
Multi-select
Error
Please select a role
Checkbox
Sizes
States
Required
Switch
Sizes
States
Required
Radio & RadioGroup
Vertical (default)
Horizontal
DatePicker
Default
Label & FormHelperText
Label variants
FormHelperText variants
Helper text (default)
Helper text (error)
Helper text (success)
Helper text (warning)
Card
Shadow sizes
Shadow none
Card description text
Card body content.
Shadow sm
Card description text
Card body content.
Shadow md
Card description text
Card body content.
Shadow lg
Card description text
Card body content.
With footer
With footer
A card with a footer action
Some content inside the card.
Alert
Default
This is a default alert message.
Success
This is a success alert message.
Warning
This is a warning alert message.
Danger
This is a danger alert message.
Info
This is a info alert message.
Badge
Variants
Sizes
BadgeDot
Variants
Pulse
Sizes
Avatar
Sizes
With image
Status
Shape
Spinner
Sizes
Skeleton
Text
Circular
Rectangular
Divider
Horizontal
Progress
Variants
Sizes
Tabs
Variant: line
Overview content panel.
Variant: pill
Overview content panel.
Variant: enclosed
Overview content panel.
Breadcrumb
Default
Dropdown
Default
Align right
Popover
Default
Tooltip
Placements
Modal
Default
Table
Default
| Name | Role | Status |
|---|---|---|
| Alice Johnson | Engineer | Active |
| Bob Smith | Designer | Inactive |
| Carol White | PM | Active |
Loading state
| Name | Role | Status |
|---|---|---|
Pagination
Default
Sizes
Toast
Trigger toasts