Design System · Mantine
Mantine arsenal
Every component re-exported by yastrub-design, pixel-perfect on our tokens.
Title · font-display
Title 1
Title 2
Title 3
Title 4 · italic
Text
Default body
Secondary · sm
Micro · xs uppercase
Semibold gold
Button
ActionIcon · CloseButton
Badge
Filled
Light
Outline
Default
Success
Info
Danger
Loader · Skeleton · Progress · Rating
Avatar · ThemeIcon
LD
A
Tooltip
Notification · notifications
Static notification
With our tokens applied.
TextInput · Textarea
focus: gold ring
Required
NumberInput · Select · NativeSelect
Checkbox · Radio · Switch · Chip
SegmentedControl · Slider · Input · Fieldset
Modal · Drawer · Overlay · Transition
Tabs · Accordion · Stepper · Timeline
Panel content
Accordion
Stepper
Timeline
Order received
12 Aug
Stone setting
In progress
Ready
—
Card · Paper · List · Group · Stack
Aurora Ring
New
Paper
withBorder + shadow-gold
- Certified stones
- Zero MOQ
- Checked item
G1
G2
S1
S2
Grid · SimpleGrid · Center · Container · Space · Divider
Col 1
Col 2
Col 3
Col 4
S1
S2
S3
S4
C
Container
ScrollArea
Carousel
Menu · Popover · Dialog · Breadcrumbs
Code · Kbd · Mark · Highlight · Spoiler
npm i yastrub-design⌘KMark gold highlight inside text.
Certified diamond stones only.
Long content that gets collapsed by default — perfect for dense product notes and specifications on mobile.
Indicator · Pagination
4
Table
| Piece | Metal | Status |
|---|---|---|
| Aurora Ring | 18K white | Ready |
| Dawn Cuff | 18K gold | Setting |
| Lumière Bangle | Platinum | QA |
Alert · MultiSelect · TagsInput · Autocomplete
Gold 18K
PasswordInput · FileInput · ColorInput
Calendar (dates)
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
CodeHighlight
Dropzone
Drop files here
PDF, image or CAD up to 10MB
Charts (Recharts)
CopyButton · Spotlight · NavigationProgress
Form (useForm) · validation
RichTextEditor (tiptap)