Components library
Components library
A collection of components I use across the products I build. Constructed using Shadcn primitives.
Button
Icon
xs
sm
md
lg
xl
2xl
3xl
4xl
5xl
6xl
color
icon button
Input
Labeled
Editable
Labeled
Default editable
Textarea
Labeled
One time password input
Toast
Select
Labeled
Combobox
Labeled
Multi-select
Multi-select
Labeled
Labeled
Slider
Labeled
Date Picker
Labeled
Time Picker
Labeled
Date Time Picker
Date label
Time label
Date Range Picker
Start label
End label
Date Time Range Picker
Start date
End end
From
To
Menu bar
Nav bar
Tabs
We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.
We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.
Accordion
Dropdown Menu
Hover card
Hover card trigger
Popover
Card
Basic
Header
Content
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph text
This is some
inline code textLink text
Checkbox
Radio button
Switch
Toggle
Tooltip
This is a tooltip
Skeleton
Progress bar
Modals
Sheets
Spinner
xs
sm
md
lg
xl
2xl
color
With label
Stat
Revenue
This is a description
$
232k
/mo
10%
With string value
Alert
Charts
Bar chart
Options
xAxis: true
yAxis: true
yAxisMin: 'auto'
yAxisMax: 'auto'
grid: true
tooltips: true
legend: true
stacked: false
dataLabels: false
legendPosition: 'bottom'
Line chart
Options
xAxis: true
yAxis: true
yAxisMin: 'auto'
yAxisMax: 'auto'
grid: true
tooltips: true
legend: true
dataPoints: true
dataLabels: false
legendPosition: 'bottom'
Pie chart
Options
tooltips: true
legend: true
dataLabels: false
innerRadius: 0
legendPosition: 'bottom'
Pie chart (donut)
Scatter chart
Options
xAxis: true
yAxis: true
xAxisMin: 'auto'
xAxisMax: 'auto'
yAxisMin: 'auto'
yAxisMax: 'auto'
grid: true
tooltips: true
legend: true
dataLabels: false
legendPosition: 'bottom'
Scatter chart (bubble)
Data grid
Status | Email | Amount | Description | Date | Category | |||
|---|---|---|---|---|---|---|---|---|
1 | pending | m@example.com | 100 | Initial deposit for project setup | 2024-01-15 | Deposits | ||
2 | processing | example@gmail.com | 125 | Monthly subscription fee | 2024-01-20 | Subscriptions | ||
3 | pending | m@example.com | 100 | Service maintenance charge | 2024-01-22 | Services | ||
4 | processing | example@gmail.com | 125 | Quarterly review payment | 2024-01-25 | Reviews | ||
5 | pending | m@example.com | 100 | Hardware replacement costs | 2024-02-01 | Hardware | ||
6 | processing | example@gmail.com | 125 | Software license renewal | 2024-02-05 | Software | ||
7 | pending | m@example.com | 100 | Consulting fee for Q1 | 2024-02-10 | Consulting | ||
8 | processing | example@gmail.com | 125 | Training workshop expenses | 2024-02-15 | Training | ||
9 | pending | m@example.com | 100 | Marketing campaign budget | 2024-02-20 | Marketing | ||
10 | processing | example@gmail.com | 125 | Office supplies restock | 2024-02-25 | Supplies |
10 rows