Ongale workspace
Team workspace · Example content
A shared place for your projects, workspace settings, and team activity.
- Projects
- 12 active
- Members
- 8 people
THE EVERYDAY ESSENTIALS Component set · 01
Components
Familiar controls, built on our foundations.
Clear hierarchy. Useful feedback. Native behavior.
02
A destination, clearly describedLink
In context
Standard anchor behavior.
Manage your workspace settings from one place.
Neutral & critical
Color follows the meaning.
External reference
Announce the new browsing context.
Examples navigate to their destination. The deletion-policy link points here and performs no destructive action.
<Link href="/settings">Workspace settings</Link>
<Link href="https://example.com" target="_blank">Documentation</Link>03
Label, help, and recoveryFormField
A clear name helps your team find the right workspace.
Use an address your team can access.
Enter a complete email address, like [email protected].
Native selection with a consistently placed caret.
Rounded options with icons and a checkmark for the current choice.
Search with a visually hidden label
<Input id="workspace-name" label="Workspace name"
details="Visible to your team." required />Input composes FormField automatically. Standalone FormField supports other controls through an explicit ID and description contract.
04
Useful without enhancementInput
Text input · default size
Enter the subdomain between https:// and .example.com.
A decorative icon adds context.
Use the eye button to show or hide the password.
Read-only values remain selectable and copyable.
Your organization manages this value.
Native values, constraints, autocomplete, form submission, and input/change events are preserved. Prefixes and suffixes are decorative; describe their meaning in the label or help text.
05
A small settings workflowIn context
Workspace details
The essentials, in one place.
Try another instance
Workspace details
The essentials, in one place.
This preview simulates a save. Try empty fields, an invalid email, or a request failure. Values and focus survive request failure; repeated submissions are blocked while loading.
06
Adapted from Transitions.devMotion components
Accordion
Native disclosure. Smooth expansion.
Who can manage this workspace?
Workspace owners can manage settings in this example. Keep instructions beside the action they explain.
Where can I find export settings?
Open the workspace settings to review the example configuration.
View workspace settingsCan I keep more than one section open at a time?
Yes. Each section is an independent native disclosure, so you can compare its contents.
Tabs
One moving indicator. Stationary labels.
A place for the essentials
Use tabs to switch between related views. This is sample content.
Workspace settings
Arrow keys move between tabs. Home and End jump to the first and last available tab.
Popover
Anchored to its trigger. Dismiss with Escape.
Example actions only. No data changes.
Dialog
A native modal with deliberate focus and recovery.
Opening this dialog requires JavaScript.
Escape closes the dialog and returns focus.
Tooltip
Hover, focus, or dismiss. Help stays optional.
Tip: use a descriptive workspace name.Tab moves between controls. Escape dismisses this hint.
Skeleton · Skullet
Measured from the content. Shimmer, then reveal.
Loading workspace preview
Loading appearance preview. No data is requested.
Reusable components with native semantics, our tokens, and reduced motion. The examples do not send requests or change stored data.
07
Drop a file. Browse your library.Image picker
Choose an image
Drop a local file, or select an image from the library.
Opening this dialog requires JavaScript.
JPEG, PNG, WebP, GIF or AVIF. Up to 10 MB.
<ImagePicker id="cover" label="Image" name="coverImage"
images={mediaLibrary} value={selectedImage} />Sample library only. Added files stay in this browser session; nothing is uploaded. Connect your media source and upload handler through the component adapter.
09
Files, selection and sortingData table
A compact native table with filtering, page selection, bulk actions and loading/error examples.
Open the file-table preview10
Small control, clear selectionCheckbox
16px visual, larger click target. Space toggles the native input; mixed state belongs to the selection owner. Motion never delays the selected state.
11
Folders, conversations and repliesInbox
A three-pane mailbox with search, unread filtering, per-thread drafts and native scrolling.
Open the inbox previewLoading and empty states
Inbox
0 messagesWe couldn’t update your mailbox.
No messages here
Try another folder or search.
Select a message
Your conversations, all in one place.
Loading messages…
Inbox
0 messagesWe couldn’t update your mailbox.
No messages here
Try another folder or search.
Select a message
Your conversations, all in one place.
Inbox
0 messagesWe couldn’t update your mailbox.
No messages here
Try another folder or search.
Select a message
Your conversations, all in one place.
12
Queries, schema and relationshipsSQL editor & ERD
A local database workspace composed from our sidebar, motion tabs, fields and data table. CodeMirror handles editing; an isolated SQLite worker runs the sample queries.
Open the SQL & ERD preview