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
Heading
Grid
ScrollArea
Splitter
Stepper
Display
Accordion
Alert
Avatar
Badge
Breadcrumb
Button
Card
Empty
Icon
IconButton
Image
Pager
Pagination
ProgressBar
ProgressCircle
Status
Tab
Table
Tag
Form
Checkbox
ColorInput
Combobox
DatePicker
Editable
Field
FileUpload
ListBox
NumberInput
Password
PasswordInput
PinInput
Radio
RadioCard
ReadonlyInput
Select
SelectInput
Switch
TagInput
TextAreaInput
TextInput
TimeSelect
Overlay
ActionBar
Dialog
Drawer
Hover
Menu
Popover
Toast
Tooltip
Charts
ChartArea
ChartBar
ChartBarList
ChartBarSegment
ChartDonut
ChartLine
ChartPie
ChartRadar
ChartScatter
Sparkline
View & Edit
Editor.Html
Editor.Markdown
ViewCode
ViewHtml
ViewMarkdown
ViewPdf
Utility
Collapsible
FileIcon
FormatByte
FormatDate
FormatNumber
Highlight
Invisible
Link
LinkOverlay
Portal
Placeholder
QrCode
RequiredIndicator
Separator
Skeleton
Spacer
Spinner
Stack
Hooks & Composables
New
useClipboard
New
useDisclosure
New
useSetup
New
useState
New
Tips & Tricks
Detect theme variant
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 →
