Components · CodeCora UI playground

Jump to a section

State matrix

Every state a control can be in, in the theme and density chosen above. Hover and focus need your pointer and keyboard: hover a control, or press Tab to see the focus ring each theme draws.

Control	Default	Disabled	Loading	Invalid
Button				–
Danger button				–
Icon button			–	–
Input			–	Email Error: Enter name@example.com.
Select	Region	Region (locked)	–	Region Error: Choose a region.
Textarea	A note	Locked	–	Notes Too long … Error: Keep notes under 200 characters.
Checkbox	Receipt	Receipt (locked)	–	Accept terms
Switch	Alerts	Alerts (locked)	–	–
Combobox	Region	Region (locked)	–	Region Error: Choose a region.
Slider	Retention	Retention (locked)	–	–
Badge	Neutral Accent Success Warning Danger

Props

<Button variant="primary|secondary|ghost|danger" icon={Icon} loading loadingLabel="Saving" href disabled />
<IconButton icon={Icon} label="Required, names the action" variant disabled />
<Field label description error required>
  {#snippet children(control)}<Input {...control} bind:value />{/snippet}
</Field>
<Select items={[{ value, label, disabled? }]} bind:value />
<Badge tone="neutral|accent|success|warning|danger" />
<Checkbox label checked indeterminate invalid disabled onchange />
<Switch label checked disabled />
<RadioGroup label items={[{ value, label, description?, disabled? }]} bind:value />
<Combobox items bind:value label emptyText />   <!-- needs a label or a Field -->
<Slider label bind:value min max step format showValue />
<Table label="Required, names the table" />   <!-- tr[data-selected="true"] marks a row -->

Buttons

As a link

Show the code

svelte

<script>
  import { Button, IconButton, Tooltip } from '@codecora/ui';
  import { Copy, Plus } from '@codecora/icons/lucide';
</script>

<Button variant="primary" icon={Plus}>Create key</Button>
<Button variant="danger" loading={saving} loadingLabel="Revoking">Revoke</Button>
<Tooltip content="Copy key">
  {#snippet trigger({ props })}
    <IconButton {...props} icon={Copy} label="Copy key" />
  {/snippet}
</Tooltip>

Form fields

Key name

Shown in the audit log.

Region

Where the data lives.

Notes

Disabled field

Read only while the plan is paused.

Invalid state

An icon and a screen-reader "Error:" prefix back the red text, and the control gets a stronger border, so the state never depends on colour alone.

Error: Enter an address like name@example.com.

Region

Error: Choose a region to continue.

Notes

Error: Notes are limited to 200 characters.

Show the code

svelte

<script>
  import { Field, Input, Select } from '@codecora/ui';
  let name = $state('');
</script>

<Field label="Key name" description="Shown in the audit log." error={error} required>
  {#snippet children(control)}
    <Input {...control} bind:value={name} />
  {/snippet}
</Field>
<Field label="Region">
  {#snippet children(control)}
    <Select {...control} items={regions} bind:value={region} />
  {/snippet}
</Field>

Checkbox, Switch, RadioGroup

Checkbox

Send me a receipt

Emailed after each payment.

All keys

Unchecked

Disabled

Disabled and checked

I accept the terms

Accept the terms to continue.

Switch

Email alerts

At most one a day.

Off

Disabled

Disabled and on

RadioGroup

Daily

A summary every morning.

Weekly

Mondays, 09:00.

Never

List

Grid

Show the code

svelte

<script>
  import { Checkbox, RadioGroup, Switch } from '@codecora/ui';
</script>

<Checkbox label="All keys" bind:checked={all} bind:indeterminate={mixed} />
<Switch label="Email alerts" description="At most one a day." bind:checked={alerts} />
<RadioGroup label="Digest" items={digests} bind:value={digest} />

Combobox, Slider, FieldGroup

Region

Type to filter.

Region (invalid)

Error: Choose a region to continue.

Retention 30 days

Digest

How often we email you.

Daily

Weekly

Show the code

svelte

<script>
  import { Combobox, Field, Slider } from '@codecora/ui';
</script>

<Field label="Region">
  {#snippet children(control)}
    <Combobox {...control} items={regions} bind:value={region} />
  {/snippet}
</Field>
<Slider label="Retention" bind:value={days} min={7} max={90} showValue
  format={(v) => `${v} days`} />

Dialog, ConfirmDialog, Sheet, Toast

Show the code

svelte

<script>
  import { ConfirmDialog, Toaster, toast } from '@codecora/ui';
  let open = $state(false);
</script>

<ConfirmDialog
  bind:open
  title="Revoke ci-deploy?"
  description="Anything using this key stops working immediately."
  confirmLabel="Revoke key"
  confirmText="ci-deploy"
  tone="danger"
  onconfirm={() => toast.success('Key revoked')}
/>
<Toaster />

Breadcrumb, Accordion, ToggleGroup, Pagination, Popover, Menu

Billing

Invoices are emailed on the first of the month.

Security

Danger zone

or press Ctrl K

Page 3 of 24

Show the code

svelte

<script>
  import { Breadcrumb, Pagination, ToggleGroup } from '@codecora/ui';
</script>

<Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'ci-deploy' }]} />
<ToggleGroup label="View" bind:value={view}
  items={[{ value: 'list', label: 'List' }, { value: 'grid', label: 'Grid' }]} />
<Pagination count={240} perPage={10} bind:page />

Tabs and Table

Keys in a tab
Name	Scope	Status	Calls (30 d)
ci-deploy	read, write	Active	12,840
dashboard	read	Active	3,112
old-importer	read, write	Revoked	0
staging-bot	read	Expiring	411

Show the code

svelte

<script>
  import { Tabs } from '@codecora/ui';
</script>

<Tabs label="Key views" items={[{ value: 'keys', label: 'Keys' }, { value: 'usage', label: 'Usage' }]}>
  {#snippet panel(value)}
    {value === 'keys' ? 'Keys table' : 'Usage chart'}
  {/snippet}
</Tabs>

DataTable

API keys
Select all rows on this page		Scope
Select ci-deploy	ci-deploy	read, write	Active	12,840
Select dashboard	dashboard	read	Active	3,112
Select old-importer	old-importer	read, write	Revoked	0
Select staging-bot	staging-bot	read	Expiring	411
Select billing-sync	billing-sync	read	Active	930

Show the code

svelte

<script>
  import { DataTable } from '@codecora/ui';
  const columns = [
    { key: 'name', label: 'Name', sortable: true },
    { key: 'calls', label: 'Calls (30 d)', sortable: true, numeric: true },
  ];
</script>

<DataTable label="API keys" {columns} {rows} rowKey={(row) => row.id}
  selectable bind:selected bind:page pageSize={5} />

Card, Alert, Avatar, Progress and friends

Memory plan

12,480 of 50,000 memories stored. Resets on the 1st.

Memories 25%

New

Search now matches tags.

Key saved.

Quota

80% of the monthly limit is used.

Could not sync

Check your connection and retry.

A neutral note without a title.

Press Ctrl K to search, Esc to close.

bash

bun add https://github.com/codecoradev/codecora-ui/releases/download/v0.7.0/codecora-ui-0.6.0.tgz

Show the code

svelte

<script>
  import { Alert, Avatar, Progress } from '@codecora/ui';
</script>

<Alert tone="warning" title="Quota">80% of the monthly limit is used.</Alert>
<Progress label="Memories" value={12480} max={50000} showValue />
<Avatar name="Ada Lovelace" />

Badge, Skeleton, EmptyState

Neutral Accent Success Warning Danger

No keys yet

Create an API key to connect a tool to your memory.

Show the code

svelte

<script>
  import { Badge, Button, EmptyState } from '@codecora/ui';
  import { Inbox } from '@codecora/icons/lucide';
</script>

<Badge tone="success">Active</Badge>
<EmptyState icon={Inbox} title="No keys yet" description="Create an API key to connect a tool.">
  {#snippet action()}<Button variant="primary">Create key</Button>{/snippet}
</EmptyState>