# Design

Socra — Multiply Your Judgment

Public component and design references from the catalog used by Socra products. Each entry retains its published status and limits.

## Start here

- [Design overview](https://socra.design/index.md): Explore the design system.
- [Design Principles](https://socra.design/principles.md): The decision system behind every Socra interface.
- [Theme](https://socra.design/theme.md): The shared visual language from @socra/theme and @socra/ui-web-theme.
- [Components](https://socra.design/components.md): The complete shadcn component index for Socra web products.
- [Icons](https://socra.design/icons.md): Socra-owned icons for every web product.
- [Charts](https://socra.design/charts.md): Chart components for quantitative display.
- [Navigation](https://socra.design/navigation.md): Components that move users through product structure.
- [Layout](https://socra.design/layout.md): Primitives that arrange screens, panes, rhythm, and media grids.
- [Date / Time](https://socra.design/date-time.md): Date and time selection components.
- [Landing](https://socra.design/landing.md): The landing-page family every product marketing page composes.
- [Composed Components](https://socra.design/composed-components.md): Higher-level compositions products can use without rebuilding common workflows.

## References

- [Principles](https://socra.design/principles.md): The few rules that decide every Socra interface.
- [Design Language](https://socra.design/principles/design-language.md): The normative shape, color, glass, elevation, typography, spacing, and content rules.
- [Motion](https://socra.design/principles/motion.md): The normative spatial and interruptible behavior for every transition.
- [Typography](https://socra.design/theme/typography.md): Typography in the UI system.
- [Colors & Effects](https://socra.design/theme/colors-effects.md): Touch the palette, depth, and glass. The theme is a surface you play with.
- [Accordion](https://socra.design/components/accordion.md): The shared Accordion component.
- [Alert](https://socra.design/components/alert.md): The shared Alert component.
- [Alert Dialog](https://socra.design/components/alert-dialog.md): The shared Alert Dialog component.
- [Animating Number](https://socra.design/components/animating-number.md): The shared Animating Number component.
- [Aspect Ratio](https://socra.design/components/aspect-ratio.md): The shared Aspect Ratio component.
- [Attachment](https://socra.design/components/attachment.md): The shared Attachment component.
- [Avatar](https://socra.design/components/avatar.md): The shared Avatar component.
- [Badge](https://socra.design/components/badge.md): The shared Badge component.
- [Backdrop](https://socra.design/components/backdrop.md): The shared Backdrop component.
- [Chip](https://socra.design/components/chip.md): The shared Chip component.
- [Divider](https://socra.design/components/divider.md): The shared Divider component.
- [Breadcrumb](https://socra.design/components/breadcrumb.md): The shared Breadcrumb component.
- [Bubble](https://socra.design/components/bubble.md): The shared Bubble component.
- [Button](https://socra.design/components/button.md): The shared Button component.
- [Button Group](https://socra.design/components/button-group.md): The shared Button Group component.
- [Calendar](https://socra.design/components/calendar.md): The shared Calendar component.
- [Card](https://socra.design/components/card.md): The shared Card component.
- [Carousel](https://socra.design/components/carousel.md): The shared Carousel component.
- [Celebration](https://socra.design/components/celebration.md): The shared Celebration component.
- [Checkbox](https://socra.design/components/checkbox.md): The shared Checkbox component.
- [Collapsible](https://socra.design/components/collapsible.md): The shared Collapsible component.
- [Combobox](https://socra.design/components/combobox.md): The shared Combobox component.
- [Command](https://socra.design/components/command.md): The shared Command component.
- [Context Menu](https://socra.design/components/context-menu.md): The shared Context Menu component.
- [Copy Id](https://socra.design/components/copy-id.md): The shared Copy Id component.
- [Data Table](https://socra.design/components/data-table.md): The shared Data Table component.
- [Date Picker](https://socra.design/components/date-picker.md): The shared Date Picker component.
- [Dialog](https://socra.design/components/dialog.md): The shared Dialog component.
- [Direction](https://socra.design/components/direction.md): The shared Direction component.
- [Drawer](https://socra.design/components/drawer.md): The shared Drawer component.
- [Dropdown Menu](https://socra.design/components/dropdown-menu.md): The shared Dropdown Menu component.
- [Empty](https://socra.design/components/empty.md): The shared Empty component.
- [Field](https://socra.design/components/field.md): The shared Field component.
- [Fullscreen Modal](https://socra.design/components/fullscreen-modal.md): The shared Fullscreen Modal component.
- [Graph](https://socra.design/components/graph.md): The shared Graph component.
- [Hover Card](https://socra.design/components/hover-card.md): The shared Hover Card component.
- [Icon Button](https://socra.design/components/icon-button.md): The shared Icon Button component.
- [Input](https://socra.design/components/input.md): The shared Input component.
- [Input Group](https://socra.design/components/input-group.md): The shared Input Group component.
- [Input OTP](https://socra.design/components/input-otp.md): The shared Input OTP component.
- [Inline Error](https://socra.design/components/inline-error.md): The shared Inline Error component.
- [Item](https://socra.design/components/item.md): The shared Item component.
- [Kbd](https://socra.design/components/kbd.md): The shared Kbd component.
- [Label](https://socra.design/components/label.md): The shared Label component.
- [List Status](https://socra.design/components/list-status.md): The shared List Status component.
- [Marker](https://socra.design/components/marker.md): The shared Marker component.
- [Menubar](https://socra.design/components/menubar.md): The shared Menubar component.
- [Message](https://socra.design/components/message.md): The shared Message component.
- [Native Select](https://socra.design/components/native-select.md): The shared Native Select component.
- [Navigation Menu](https://socra.design/components/navigation-menu.md): The shared Navigation Menu component.
- [Pagination](https://socra.design/components/pagination.md): The shared Pagination component.
- [Popover](https://socra.design/components/popover.md): The shared Popover component.
- [Progress](https://socra.design/components/progress.md): The shared Progress component.
- [Questionnaire](https://socra.design/components/questionnaire.md): The shared Questionnaire component.
- [Radio Group](https://socra.design/components/radio-group.md): The shared Radio Group component.
- [Rating](https://socra.design/components/rating.md): The shared Rating component.
- [Resizable](https://socra.design/components/resizable.md): The shared Resizable component.
- [Scroll Area](https://socra.design/components/scroll-area.md): The shared Scroll Area component.
- [Search](https://socra.design/components/search.md): The shared Search component.
- [Select](https://socra.design/components/select.md): The shared Select component.
- [Sheet](https://socra.design/components/sheet.md): The shared Sheet component.
- [Skeleton](https://socra.design/components/skeleton.md): The shared Skeleton component.
- [Slider](https://socra.design/components/slider.md): The shared Slider component.
- [Spinner](https://socra.design/components/spinner.md): The shared Spinner component.
- [Switch](https://socra.design/components/switch.md): The shared Switch component.
- [Table](https://socra.design/components/table.md): The shared Table component.
- [Tabs](https://socra.design/components/tabs.md): The shared Tabs component.
- [Textarea](https://socra.design/components/textarea.md): The shared Textarea component.
- [Timeline](https://socra.design/components/timeline.md): The shared Timeline component.
- [Toast](https://socra.design/components/toast.md): The shared Toast component.
- [Toggle](https://socra.design/components/toggle.md): The shared Toggle component.
- [Toggle Group](https://socra.design/components/toggle-group.md): The shared Toggle Group component.
- [Tooltip](https://socra.design/components/tooltip.md): The shared Tooltip component.
- [Icons](https://socra.design/icons/icons.md): Icons in the UI system.
- [Chart](https://socra.design/charts/chart.md): The official shadcn Base Chart namespace (ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle) from @socra/web-ui over Recharts v3.
- [Charts Family](https://socra.design/charts/charts-family.md): The charts.* namespace family — TimeSeries, TimeScatter, StatTile, StatRow, Legend, ToneDot, StackedBar — quantitative display on semantic tones and closed scales; the rendering engine is a module secret.
- [Graph Family](https://socra.design/charts/graph-family.md): The graph.* namespace family — Scene renders a DAG on a full-canvas dendritic river with mount gate, canvas-unavailable fallback, motion-preference honoring, and theme-role color resolution; the rendering engine is a module secret.
- [Elements](https://socra.design/charts/elements.md): Elements in the UI system.
- [Bars](https://socra.design/charts/bars.md): Bars in the UI system.
- [Lines](https://socra.design/charts/lines.md): Lines in the UI system.
- [Pie](https://socra.design/charts/pie.md): Pie in the UI system.
- [Scatter](https://socra.design/charts/scatter.md): Scatter in the UI system.
- [Sparkline](https://socra.design/charts/sparkline.md): Sparkline in the UI system.
- [Gauge](https://socra.design/charts/gauge.md): Gauge in the UI system.
- [Radar](https://socra.design/charts/radar.md): Radar in the UI system.
- [Heatmap](https://socra.design/charts/heatmap.md): Heatmap in the UI system.
- [Funnel](https://socra.design/charts/funnel.md): Funnel in the UI system.
- [Bottom Navigation](https://socra.design/navigation/bottom-navigation.md): Bottom Navigation in the UI system.
- [Link](https://socra.design/navigation/link.md): Link in the UI system.
- [Speed Dial](https://socra.design/navigation/speed-dial.md): Speed Dial in the UI system.
- [Stepper](https://socra.design/navigation/stepper.md): Stepper in the UI system.
- [Layout Family](https://socra.design/layout/layout-family.md): The direct intent-based layout family — Center, Column, Page, and Row — structure says what it is, never how many pixels.
- [Primitives](https://socra.design/layout/primitives.md): Browser-owned actions, feedback, and surfaces composed with direct @socra/ui-web-layout structure and @socra/ui-web-text semantics.
- [Header Glass](https://socra.design/layout/header-glass.md): A semantic translucent header surface for content that scrolls underneath.
- [Container](https://socra.design/layout/container.md): Container in the UI system.
- [Spacing](https://socra.design/layout/spacing.md): Spacing in the UI system.
- [Stack](https://socra.design/layout/stack.md): Stack in the UI system.
- [Image List](https://socra.design/layout/image-list.md): Image List in the UI system.
- [Time Picker](https://socra.design/date-time/time-picker.md): Time Picker in the UI system.
- [Date Time Picker](https://socra.design/date-time/date-time-picker.md): Date Time Picker in the UI system.
- [Date Range Picker](https://socra.design/date-time/date-range-picker.md): Date Range Picker in the UI system.
- [Time Range Picker](https://socra.design/date-time/time-range-picker.md): Time Range Picker in the UI system.
- [Site Header](https://socra.design/landing/site-header.md): Site Header in the UI system.
- [Personal Portfolio](https://socra.design/landing/personal-portfolio.md): Personal Portfolio in the UI system.
- [Hero](https://socra.design/landing/hero.md): Hero in the UI system.
- [Band](https://socra.design/landing/band.md): Band in the UI system.
- [Feature Card](https://socra.design/landing/feature-card.md): Feature Card in the UI system.
- [Feature Tabs](https://socra.design/landing/feature-tabs.md): Feature Tabs in the UI system.
- [Landing Carousel](https://socra.design/landing/landing-carousel.md): Carousel in the UI system.
- [FAQ](https://socra.design/landing/faq.md): FAQ in the UI system.
- [Footer](https://socra.design/landing/footer.md): Footer in the UI system.
- [Link Preview](https://socra.design/landing/visuals/link-preview.md): Link Preview in the UI system.
- [CLI Terminal](https://socra.design/landing/visuals/cli-terminal.md): CLI Terminal in the UI system.
- [Module Card](https://socra.design/landing/visuals/module-card.md): Module Card in the UI system.
- [Inbox Mock](https://socra.design/landing/visuals/inbox-mock.md): Inbox Mock in the UI system.
- [Knowledge Flow](https://socra.design/landing/visuals/knowledge-flow.md): Knowledge Flow in the UI system.
- [Tenant Card](https://socra.design/landing/visuals/tenant-card.md): Tenant Card in the UI system.
- [Post Collage](https://socra.design/landing/visuals/post-collage.md): Post Collage in the UI system.
- [Banner Typewriter](https://socra.design/landing/visuals/banner-typewriter.md): Banner Typewriter in the UI system.
- [App Bar](https://socra.design/composed-components/app-bar.md): App Bar in the UI system.
- [App Shells](https://socra.design/composed-components/app-shells.md): App Shells in the UI system.
- [Chat Input](https://socra.design/composed-components/composer-input.md): The shared Chat Input component.
- [Conversation](https://socra.design/composed-components/conversation.md): A complete conversation with message actions, reactions, replies, and composing.
- [Creation Dialogs](https://socra.design/composed-components/creation-dialogs.md): Creation Dialogs in the UI system.
- [Details Panels](https://socra.design/composed-components/details-panels.md): Details Panels in the UI system.
- [Headers](https://socra.design/composed-components/headers.md): Headers in the UI system.
- [Inbox](https://socra.design/composed-components/inbox.md): The shared Inbox component.
- [Product Frame](https://socra.design/composed-components/product-frame.md): The shared Product Frame component.
- [Product List](https://socra.design/composed-components/product-list.md): The shared Product List component.
- [Product Panes](https://socra.design/composed-components/product-panes.md): Product Panes in the UI system.
- [Sidebar](https://socra.design/composed-components/sidebar.md): The shared Sidebar component.
- [Tree View](https://socra.design/composed-components/tree-view.md): Tree View in the UI system.