nous-workshop Version 0.0.11
A open source monospace component library crafted for React interfaces built with variable fonts, React applications, and React websites that prioritize simplicity
⌃+TTheme
⌃+GGrid
⭢
Hire our studio to build your applications
⭢
View the SRCL source code
⭢
Try our hosting provider Vercel
▾ACTION BAR
The action bar is a container for primary and secondary actions styled with a monospace font. Positioned at the top or bottom of an interface, it organizes elements like menu options, navigation buttons, titles, or search fields.

EXAMPLE

⌘+1Example I
⌘+2Example II
⌘+3Example III
▾ACCORDION
Accordion components are vertically stacked, expandable panels designed for efficient use of space in monospace-driven layouts, often inspired by classic terminal interfaces. Each panel consists of a header and its corresponding content area, allowing users to toggle between a condensed summary and detailed information.

EXAMPLE

▾ACCORDION EXAMPLE
There are two visions of America a half century from now. One is of a society more divided between the haves and the have-nots, a country in which the rich live in gated communities, send their children to expensive schools, and have access to first-rate medical care. Meanwhile, the rest live in a world marked by insecurity, at best mediocre education, and in effect rationed health care―they hope and pray they don't get seriously sick. At the bottom are millions of young people alienated and without hope. I have seen that picture in many developing countries; economists have given it a name, a dual economy, two societies living side by side, but hardly knowing each other, hardly imagining what life is like for the other. Whether we will fall to the depths of some countries, where the gates grow higher and the societies split farther and farther apart, I do not know. It is, however, the nightmare towards which we are slowly marching.
▾ACTION BUTTON
Action buttons let users perform actions. They are used for task-based options within a workflow and work well in interfaces where buttons need to stay understated.

EXAMPLE

⌘+SSave

Loading
▾ACTION LIST
Action lists are a vertical list of interactive actions or options. It displays items in a single-column format with space for icons, descriptions, side information, and other visuals. The monospace font ensures clarity and consistency.

▾ALERT BANNER
Alert banners display important messages across the user interface. It communicates system-wide issues, errors, warnings, or informational updates. Typically placed at the top of a page, it includes a clear message and may provide an action for the user. Alert Banners can be dismissed after being read, helping users stay informed about significant changes or information.

EXAMPLE

When things reach the extreme, they alternate to the opposite.
▾AVATAR
Avatars identify users or entities in the interface. It can display an image, initials, or an icon, offering a visual connection to the user. Avatars appear in headers, comments, profiles, and messages. They provide quick recognition and add a personal touch to the digital experience.

EXAMPLE



Andy Alimbuyuguen
Webmaster
Jimmy Lee
Janitor
Anastasiya Uraleva
Webmaster
Elijah Seed Arita
Webmaster
Xiangan He
Webmaster
Chenyu Huang
Webmaster
▾BADGES
Badges communicate status, notification counts, or attribute labels. Typically circular or pill-shaped, they display a number or short text, often overlaid on an icon or element. Badges highlight updates, unread messages, or categorize items with status indicators. They provide critical information at a glance, improving navigation and user engagement.

EXAMPLE

Example
▾BAR LOADER
A long loader is a visual element that signals ongoing activity or progress, reassuring users that a task is being processed. Commonly used during actions like data fetching or file uploads, it provides feedback to reduce uncertainty.

EXAMPLE

▾BLOCK LOADER
A block loader is a visual indicator that signals ongoing activity or progress while occupying only a single character of space. It reassures users that a task is being processed or that activity is occurring.

EXAMPLE

⠁
⣾
▖
▁
▉
←
┤
◢
◰
◴
◐
�
▾BREADCRUMBS
Breadcrumbs display the current page or context within a website or application. They show the hierarchy and navigation path, helping users understand their location. Breadcrumbs allow users to navigate back through levels or categories and are especially useful for deeply nested pages.

▾BUTTON
Button components are essential interactive elements within SCL, facilitating actions like navigation, form submission, and command execution.

EXAMPLE



Disabled Button
▾CANVAS PLATFORMER
This canvas component provides a basic starting point for building a 2D platform game directly on a canvas element. It currently supports simple character jumping and rudimentary collision detection, making it easy to set up a foundational scene.

EXAMPLE

␣Jump
←Left
→Right
▾CARDS
Cards are containers for content and actions related to a specific topic. They group information, helping users browse related items or actions. Cards provide a preview of content, encouraging further interaction for more details. They can be used for purposes like displaying introductory content, instructions, or suggestions.

Left-A

Right-B

C

Hello friend!
▾CHECKBOX
Checkboxes represent a binary choice, letting users toggle options on or off. Each Checkbox operates independently, allowing multiple selections without affecting others. Checkboxes are ideal for forms, surveys, or scenarios requiring multi-selection, providing a simple way for user input.

EXAMPLE

The past, though a tutor, is not a thing to lament, but a wellspring of wisdom from which we draw without regret.
A measure of obsession doth sharpen the will, for the long path, though beset with trials, leadeth ever toward glories.
Kindness and gratitude must light our way in all dealings, regardless of circumstance.
Stand firm beside thy fellow for shared triumph is the sweetest of all.
Let us strive that design be not a mere ornament to the world, but a worthy service to humanity itself.
Artifacts built with care do grant webmasters the power to shape their own fates, and to serve those thou dost cherish is an honor beyond measure.
Intensity, as fire contained, burneth most brightly when turned toward aims; thus, let us spurn the call of mediocrity and cast aside the seductions of decay.
Mistakes are not curses, but treasures wrapped in adversity, offered to those wise enough to seize their lessons.
Expect naught, but receive all with gratitude, and find a place of trust wherein thou mayest dwell for a time.
From thy master learn what thou canst, and from all others likewise, for wisdom hath many guises.
To follow with discipline is good; to follow oneself with discipline is better.
Work with fervor and take joy where it may be found, for the making is as sweet as the outcome.
Be mindful that there are ever more ways than two, and seek not merely to follow the trade but to alter its course, bringing value wherever it is given thee to do so.
Whether rewarded or not, let us ply our craft for the love of it, for therein lies mastery.
Assume nothing, and let no person escape thy regard.
A fine process doth honor the task, but let the result be no less fine.
Keep faith with those who make promises, and shouldst thou be called to push others, push thyself the harder.
Thy health is thy treasure, and building a company shall be no graceful dance, but a contest of strife.
Take always the first step, for even in failure doth wisdom grow.
Seek ever to broaden thy knowledge of art, software, music, letters, and all things ancient and new, for these are the treasures of the mind.
Thy fate lieth ever in thine own hands, and the soul readeth not only the landscape, but the heart that beats beneath it.
Let thy voice be thine own, unborrowed and unbowed, and make it heard without fear.
Rejoice in the victories of thy fellow webmasters, for in bearing witness to their triumphs is joy in its truest form.
Grow accustomed to the weight of pressure, for in such a forge is the finest steel tempered.
Thus do we press onward—undaunted and unyielding—in pursuit of a better physical and digital world.
▾DATA TABLE
Data tables are for organizing large datasets into rows and columns for clear visibility and easy interpretation. It is used in scenarios like reporting systems, dashboards, and list views where data needs comparison, analysis, or manipulation. Features like sorting, filtering, pagination, and inline editing make data handling more efficient. The entire table width is limited to 64ch to fit the grid precisely.

EXAMPLE

NAMESYMBOLPRICEHOLDINGS
BatBAT$9.01400
BearBR$56.78200
CamelCML$55.6770
CheetahCHT$13.45150
CrabCRB$15.67250
DeerDER$29.99110
DolphinDLP$77.8950
EagleEGL$45.6790
FalconFLC$40.2285
FoxFOX$12.34100
FrogFRG$7.89400
GiraffeGRF$44.5680
HedgehogHDG$11.23200
HorseHRS$54.3270
KangarooKNG$15.67120
KoalaKLA$22.34150
LeopardLPR$14.56110
LemurLMR$11.12320
LionLION$67.8980
LynxLNX$16.78130
MouseMSE$5.12500
OctopusOCT$88.9040
OtterOTR$20.21180
OwlOWL$19.01160
PandaPND$78.9055
PeacockPCK$12.34100
PenguinPNG$33.4590
PorcupinePRC$17.89140
RabbitRBT$9.10350
RaccoonRCC$18.90150
SharkSHK$89.0150
SnakeSNK$10.11300
SquirrelSQL$10.12250
TigerTGR$34.56120
TurtleTRL$66.7860
WhaleWHL$123.4530
WolfWLF$23.45150
ZebraZBR$65.4360
▾LINK
Links are interactive elements that enable navigation within an application or to external resources, typically styled with underlining or distinct colors to indicate clickability.

▾LIST
Lists are flexible interface elements used to display a series of items in an organized way. They are often used to present data, menu options, or search results and can be ordered or unordered, with interactive elements like checkboxes or buttons.

EXAMPLE

  1. Year of the Four Emperors
  2. Flavian dynasty
  3. Nerva–Antonine dynasty
    1. Marcus Cocceius Nerva
    2. Marcus Ulpius Traianus
    3. Publius Aelius Hadrianus
    4. Titus Aelius Hadrianus Antoninus Pius
    5. Marcus Aurelius Antoninus
      1. Hellenistic philosophy
      2. Western philosophy
      3. Stoicism
  4. Year of the Five Emperors

  • Book of Changes (The I Ching)
  • The Analects
  • Taoism
  • Thirty-Six Stratagems
    • Deceive the heavens to cross the sea
    • Make a sound in the east, then strike in the west
    • Create something from nothing
  • The Art of War
  • Wuzi
  • Six Secret Teachings
▾MATRIX LOADER
A Matrix Loader (screen) is a visual element that simulates the iconic green, cascading code streams featured in the Matrix films. These screens often serve as dynamic backdrops, thematic treatments, or stylized representations of complex digital data. This version fits SRCL's theming and monospace font usage.

EXAMPLE

▾MODAL
Modals are dialog boxes or popups that overlay the main content, requiring user interaction. They are used to capture inputs, display information, or focus on specific tasks without leaving the current context, often accompanied by an overlay to maintain focus

EXAMPLE

Render Alert Modal A
Render Alert Modal B
▾SLIDER
Sliders are interactive UI elements that let users select a single value or range from a continuum. Designed as a horizontal track with a draggable handle, they are ideal for adjusting settings like volume, brightness, or color saturation.

EXAMPLE

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z

-- --- == === != !== =!= =:= =/= <= >= && &&& &= ++ +++ *** ;; !! ?? ??? ?: ?. ?= <: :< :> >: <:< <> <<< >>> << >> || -| _|_ |- ||- |= ||= ## ### #### #{ #[ ]# #( #? #_ #_( #: #! #= ^= <$> <$ $> <+> <+ +> <*> <* *> </ </> /> <!-- <#-- --> -> ->> <<- <- <=< =<< <<= <== <=> <==> ==> => =>> >=> >>= >>- >- -< -<< >-> <-< <-| <=| |=> |-> <-> <~~ <~ <~> ~~ ~~> ~> ~- -~ ~@ [||] |] [| |} {| [< >] |> <| ||> <|| |||> <||| <|> ... .. .= ..< .? :: ::: := ::= :? :?> // /// /* */ /= //= /== @_ __ ??? <:< ;;;

-- --- == === != !== =!= =:= =/= <= >= && &&& &= ++ +++ *** ;; !! ?? ??? ?: ?. ?= <: :< :> >: <:< <> <<< >>> << >> || -| _|_ |- ||- |= ||= ## ### #### #{ #[ ]# #( #? #_ #_( #: #! #= ^= <$> <$ $> <+> <+ +> <*> <* *> </ </> /> <!-- <#-- --> -> ->> <<- <- <=< =<< <<= <== <=> <==> ==> => =>> >=> >>= >>- >- -< -<< >-> <-< <-| <=| |=> |-> <-> <~~ <~ <~> ~~ ~~> ~> ~- -~ ~@ [||] |] [| |} {| [< >] |> <| ||> <|| |||> <||| <|> ... .. .= ..< .? :: ::: := ::= :? :?> // /// /* */ /= //= /== @_ __ ??? <:< ;;;

Á Ă Ắ Ặ Ằ Ẳ Ẵ Ǎ  Ấ Ậ Ầ Ẩ Ẫ Ä Ạ À Ả Ā Ą Å Ã Æ Ǽ Ć Č Ç Ĉ Ċ Ð Ď Đ É Ĕ Ě Ê Ế Ệ Ề Ể Ễ Ë Ė Ẹ È Ẻ Ē Ę Ɛ Ẽ Ǵ Ğ Ǧ Ĝ Ģ Ġ Ħ Ĥ Í Ĭ Î Ï İ Ị Ì Ỉ Ī Į Ĩ Ĵ Ķ Ĺ Ľ Ļ Ŀ Ł Ń Ň Ņ Ŋ Ñ Ó Ŏ Ô Ố Ộ Ồ Ổ Ỗ Ö Ọ Ò Ỏ Ơ Ớ Ợ Ờ Ở Ỡ Ő Ō Ǫ Ø Ǿ Õ Œ Þ Ŕ Ř Ŗ Ś Š Ş Ŝ Ș ẞ Ə Ŧ Ť Ţ Ț Ú Ŭ Û Ü Ụ Ù Ủ Ư Ứ Ự Ừ Ử Ữ Ű Ū Ų Ů Ũ Ẃ Ŵ Ẅ Ẁ Ý Ŷ Ÿ Ỵ Ỳ Ỷ Ȳ Ỹ Ź Ž Ż á ă â ä à ā ą å ã æ ǽ ć č ç ĉ ċ ð ď đ é ĕ ě ê ë ė è ē ę ə ğ ǧ ĝ ġ ħ ĥ i ı í ĭ î ï ì ī į ĩ j ȷ ĵ ĸ l ĺ ľ ŀ ł m n ń ʼn ň ŋ ñ ó ŏ ô ö ò ơ ő ō ø ǿ õ œ þ ŕ ř s ś š ş ŝ ß ſ ŧ ť ú ŭ û ü ù ư ű ū ģ ķ ļ ņ ŗ ţ ǫ ǵ ș ț ạ ả ấ ầ ẩ ẫ ậ ắ ằ ẳ ẵ ặ ẹ ẻ ẽ ế ề ể ễ ệ ỉ ị ọ ỏ ố ồ ổ ỗ ộ ớ ờ ở ỡ ợ ụ ủ ứ ừ ử ữ ự ỵ ỷ ỹ ų ů ũ ẃ ŵ ẅ ẁ ý ŷ ÿ ỳ z ź ž ż

0 0 1 2 3 4 5 6 7 8 9 ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉ ⁰ ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ½ ¼ ¾ ↋ ↊ ૪

. , : ; … ! ¡ ? ¿ · • * ⁅ ⁆ # ․ ‾ / ‿ ( ) { } [ ] ❰ ❮ ❱ ❯ ⌈ ⌊ ⌉ ⌋ ⦇ ⦈ - – — ‐ _ ‚ „ “ ” ‘ ’ « » ‹ › ‴ " ' ⟨ ⟪ ⟦ ⟩ ⟫ ⟧ · ;

Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ά Έ Ή Ί Ό Ύ Ώ Ϊ Ϋ Ϗ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ί ϊ ΐ ύ ϋ ΰ ό ώ ά έ ή ϗ ϕ ϖ

А Б В Г Ѓ Ґ Д Е Ё Ж З И Й К Ќ Л М Н О П Р С Т У Ў Ф Х Ч Ц Ш Щ Џ Ь Ъ Ы Љ Њ Ѕ Є Э І Ї Ј Ћ Ю Я Ђ Ғ Қ Ң Ү Ұ Ҷ Һ Ә Ө Ӝ Ӟ Ӥ Ӧ Ө Ӵ а б в г ѓ ґ д е ё ж з и й к ќ л м н о п р с т у ў ф х ч ц ш щ џ ь ъ ы љ њ ѕ є э і ї ј ћ ю я ђ ғ қ ң ү ұ ҷ һ ә ө ӝ ӟ ӥ ӧ ө ӵ

₿ ¢ ¤ $ ₫ € ƒ ₴ ₽ £ ₮ ¥ ≃ ∵ ≬ ⋈ ∙ ≔ ∁ ≅ ∐ ⎪ ⋎ ⋄ ∣ ∕ ∤ ∸ ⋐ ⋱ ∈ ∊ ⋮ ∎ ⁼ ≡ ≍ ∹ ∃ ∇ ≳ ∾ ⥊ ⟜ ⎩ ⎨ ⎧ ⋉ ⎢ ⎣ ⎡ ≲ ⋯ ∓ ≫ ≪ ⊸ ⊎ ⨀ ⨅ ⨆ ⊼ ⋂ ⋃ ≇ ⊈ ⊉ ⊽ ⊴ ≉ ∌ ∉ ≭ ≯ ≱ ≢ ≮ ≰ ⋢ ⊄ ⊅ +− × ÷ = ≠ > < ≥ ≤ ± ≈ ¬ ~ ^ ∞ ∅ ∧ ∨ ∩ ∪ ∫ ∆ ∏ ∑ √ ∂ µ ∥ ⎜ ⎝ ⎛ ⎟ ⎠ ⎞ % ‰ ﹢ ⁺ ≺ ≼ ∷ ≟ ∶ ⊆ ⊇ ⤖ ⎭ ⎬ ⎫ ⋊ ⎥ ⎦ ⎤ ⊢ ≗ ∘ ∼ ⊓ ⊔ ⊡ ⊟ ⊞ ⊠ ⊏ ⊑ ⊐ ⊒ ⋆ ≣ ⊂ ≻ ∋ ⅀ ⊃ ⊤ ⊣ ∄ ∴ ≋ ∀ ⋰ ⊥ ⊻ ⊛ ⊝ ⊜ ⊘ ⊖ ⊗ ⊙ ⊕ ↑ ↗ → ↘ ↓ ↙ ← ↖ ↔ ↕ ↝ ↭↞ ↠ ↢ ↣ ↥ ↦ ↧ ⇥↩ ↪ ↾ ⇉ ⇑ ⇒ ⇓ ⇐ ⇔ ⇛ ⇧ ⇨ ⌄ ⌤ ➔ ➜ ➝ ➞ ⟵ ⟶ ⟷ ● ○ ◯ ◔ ◕ ◶ ◌ ◉ ◎ ◦ ◆ ◇ ◈ ◊ ■ □ ▪▫ ◧ ◨ ◩ ◪ ◫ ▲ ▶ ▼ ◀ △ ▷ ▽ ◁ ► ◄ ▻ ◅ ▴ ▸ ▾ ◂ ▵ ▹ ▿ ◃ ⌶ ⍺ ⍶ ⍀ ⍉ ⍥ ⌾ ⍟ ⌽ ⍜ ⍪ ⍢ ⍒ ⍋ ⍙ ⍫ ⍚ ⍱ ⍦ ⍎ ⍊ ⍖ ⍷ ⍩ ⍳ ⍸ ⍤ ⍛ ⍧ ⍅ ⍵ ⍹ ⎕ ⍂ ⌼ ⍠ ⍔ ⍍ ⌺ ⌹ ⍗ ⍌ ⌸ ⍄ ⌻ ⍇ ⍃ ⍯ ⍰ ⍈ ⍁ ⍐ ⍓ ⍞ ⍘ ⍴ ⍆ ⍮ ⌿ ⌷ ⍣ ⍭ ⍨ ⍲ ⍝ ⍡ ⍕ ⍑ ⍏ ⍬ ⚇ ⚠ ✓ ✕ ✗ ✶ @ & ¶ § © ® ™ ° ′ ″ | ¦ † ℓ ‡ № ℮ ␣ ⎋ ⌃ ⌞ ⌟ ⌝ ⌜ ⎊ ⎉ ⌂ ⇪ ⌫ ⌦ ⌨ ⌥ ⇟ ⇞ ⌘ ⏎ ⏻ ⏼ ⭘ ⏽ ⏾ ⌅ � ˳ ˷

𝔸 𝔹 ℂ 𝔻 𝔼 𝔽 𝔾 ℍ 𝕀 𝕁 𝕂 𝕃 𝕄 ℕ 𝕆 ℙ ℚ ℝ 𝕊 𝕋 𝕌 𝕍 𝕎 𝕏 𝕐 ℤ 𝕒 𝕓 𝕔 𝕕 𝕖 𝕗 𝕘 𝕙 𝕚 𝕛 𝕜 𝕝 𝕞 𝕟 𝕠 𝕡 𝕢 𝕣 𝕤 𝕥 𝕦 𝕧 𝕨 𝕩 𝕪

▁ ▂ ▃ ▄ ▅ ▆ ▇ █ ▀ ▔ ▏ ▎ ▍ ▌ ▋ ▊ ▉ ▐ ▕ ▖ ▗ ▘ ▙ ▚ ▛ ▜ ▝ ▞ ▟ ░ ▒ ▓

┌ └ ┐ ┘ ┼ ┬ ┴ ├ ┤ ─ │ ╡ ╢ ╖ ╕ ╣ ║ ╗ ╝ ╜ ╛ ╞ ╟ ╚ ╔ ╩ ╦ ╠ ═ ╬ ╧ ╨ ╤ ╥ ╙ ╘ ╒ ╓ ╫ ╪ ━ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┍ ┎ ┏ ┑ ┒ ┓ ┕ ┖ ┗ ┙ ┚ ┛ ┝ ┞ ┟ ┠ ┡ ┢ ┣ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┭ ┮ ┯ ┰ ┱ ┲ ┳ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┽ ┾ ┿ ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏ ╭ ╮ ╯ ╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿

␆ ␈ ␇ ␘ ␍ ␐ ␡ ␔ ␑ ␓ ␒ ␙ ␃ ␄ ␗ ␅ ␛ ␜ ␌ ␝ ␉ ␊ ␕ ␤ ␀ ␞ ␏ ␎ ␠ ␁ ␂ ␚ ␖ ␟ ␋

⭢
Hire our studio to build your applications
⭢
View the SRCL source code
⭢
Try our hosting provider Vercel