Skip to content
NayaOne Design System
Search
Ctrl
K
Cancel
Select theme
Dark
Light
Auto
Getting Started
Changelog
Brand Guidelines
Overview
Accessibility
Logo Guidelines
Color Palette
Typography
Imagery and Visual Style
Voice and Tone
Code Guidelines
General formatting
HTML and CSS
JavaScript and TypeScript
React and Vue
Typography
Color Palette
Icons
Layout
Container
New
Heading
New
Grid
New
ScrollArea
New
Splitter
New
Stepper
New
Display
Accordion
New
Alert
New
Avatar
New
Badge
New
Breadcrumb
New
Button
New
Card
New
Empty
New
Icon
New
IconButton
New
Image
New
Pager
New
Pagination
New
ProgressBar
New
ProgressCircle
New
Status
New
Tab
New
Table
New
Tag
New
Form
Checkbox
New
ColorInput
New
Combobox
New
Editable
New
Field
New
FileUpload
New
ListBox
New
NumberInput
New
Password
New
PasswordInput
New
PinInput
New
Radio
New
RadioCard
New
ReadonlyInput
New
Select
New
SelectInput
New
Switch
New
TagInput
New
TextAreaInput
New
TextInput
New
Overlay
ActionBar
New
Dialog
New
Drawer
New
Hover
New
Menu
New
Popover
New
Toast
New
Tooltip
New
Charts
ChartArea
New
ChartBar
New
ChartBarList
New
ChartBarSegment
New
ChartDonut
New
ChartLine
New
ChartPie
New
ChartRadar
New
ChartScatter
New
Sparkline
New
View & Edit
Editor.Html
New
Editor.Markdown
New
ViewCode
New
ViewHtml
New
ViewMarkdown
New
ViewPdf
New
Utility
Collapsible
New
FileIcon
New
FormatByte
New
FormatDate
New
FormatNumber
New
Highlight
New
Invisible
New
Link
New
LinkOverlay
New
Placeholder
New
QrCode
New
RequiredIndicator
New
Separator
New
Skeleton
New
Spacer
New
Spinner
New
Stack
New
Select theme
Dark
Light
Auto
Color palette
Customisable color palette
Section titled “Customisable color palette”
Schema
50
100
200
300
400
500
600
700
800
900
950
Primary
Secondary
Danger
Warning
Success
Tailwind color palette
Section titled “Tailwind color palette”
See Tailwind color palette documentation →