RandomCodeSpace design system
GitHub

Components · API reference

Component reference.

56 components, 2 hooks, 15 tokens, 78 interfaces. Each component has its own page with a live preview, the example code, the API table, and related types. Open any of them in the playground to tweak interactively.

$ npm install @ossrandom/design-system

Foundations

Start with the design tokens — colors, typography, spacing, radii, shadows, motion. Live values, theme-aware.

/docs/foundations/
Design tokens
15 token types

Theme

Foundation. Mount once near the root.

src/components/theme.tsx

component
ThemeProvider
4 props
hook
useTheme
—

Layout

Surfaces, spacing, app shell.

src/components/layout.tsx · src/components/page.tsx

component
Card
10 props
component
Space
7 props
component
ScrollDiv
9 props
component
Divider
3 props
component
Grid
3 props
component
PageHeader
8 props
component
AppShell
6 props

Buttons & actions

Anything you click to do something.

src/components/buttons.tsx

component
Button
11 props
component
IconButton
3 props
component
ButtonGroup
4 props

Forms & inputs

Text, selects, toggles, dates, files.

src/components/inputs.tsx · src/components/selects.tsx · src/components/form-controls.tsx

component
Input
14 props
component
NumberInput
7 props
component
PinInput
6 props
component
Textarea
4 props
component
Select<V extends string | number = string>
10 props
component
Combobox<V extends string | number = string> extends Omit<SelectProps<V>, "value" | "defaultValue" | "onChange">
6 props
component
Checkbox
7 props
component
RadioGroup<V extends string | number = string>
7 props
component
Switch
7 props
component
Slider
10 props
component
DatePicker
8 props
component
DateRangePicker
3 props
component
FileUpload
7 props
component
FormField
7 props

Data display

Tables, stats, badges, avatars, timeline.

src/components/data-display.tsx · src/components/badges.tsx

component
Badge
6 props
component
StatusDot
3 props
component
Table<T extends object>
3 props
component
Stat
5 props
component
Avatar
6 props
component
Timeline
2 props

Navigation

Tabs, menus, breadcrumb, pagination.

src/components/navigation.tsx

component
Tabs<K extends string = string>
6 props
component
Menu<K extends string = string>
5 props
component
Breadcrumb
3 props
component
Pagination
8 props
component
Steps
5 props

Feedback

Status, modals, toasts, tooltips.

src/components/feedback.tsx

component
Alert
7 props
component
Modal
9 props
component
Drawer
2 props
component
Progress
6 props
component
Skeleton
5 props
component
Spin
3 props
component
Tooltip
4 props
hook
toast
—
component
ToastRegion
0 props

Content

Code, markdown, terminal, chat, RTE.

src/components/code.tsx · src/components/chat.tsx

component
Chat
4 props
component
CodeBlock
8 props
component
Markdown
4 props
component
Terminal
7 props
component
RichTextEditor
8 props

Charts

Opt-in subpath — Chart, Sparkline, Donut, RadialGauge, UptimeBar, Treemap, ServiceMap.

src/charts/ · import from "@ossrandom/design-system/charts"

component
Chart
10 props
component
Sparkline
7 props
component
Donut
7 props
component
RadialGauge
6 props
component
UptimeBar
5 props
component
Treemap
6 props
component
ServiceMap
6 props