CodedDesign

Components

Cartoon controls grouped the way you reach for them. Open a card to jump into the live demo.

General

4
Primary
Button
Speed Dial
Icon
Aa
Typography

Layout

6
Divider
Stack
Grid
Resizable
Nunito
Fredoka
paper cream
ink purple
Scroll Area
16:9
Aspect Ratio

Data Entry

14

Updates

Checkbox

On

Switch

Standard

Radio
Slider
NameAda
Input
Pro
Select
Accra
Combobox
Oct 15
Date Picker
4812
Input OTP
https://north.studio
Input Group
Rate
Bold
Toggle
brief.pdfPDF · 1.4 MB
Upload
[email protected]Sign in
Form

Data Display

18
AL
Avatar
Inbox3
Badge
Live
Tag
Live
Status
Calendar
Workspace12 membersPro
Card
Slide
Carousel
TokensTheme
Collapse
DimensionsWidth 1440 · Height 900
Popover
Shown on hoverHover
Tooltip

Ada Lovelace

Designer · North studio
Hover Card
NameOwnerBillingAda
Table
AL

Ada Lovelace

List
<Button />
Code Block
New
Sticker
Buttons dip.
Speech
Nothing matches
Empty

release-candidate

Timeline

Feedback

9
Workspace saved
Alert
Published
Message bar
Drawer
Archive workspace?Archive
Modal
Changes saved
Toast
Progress
Spin
Skeleton
Buttons dip.Keep that.
Chat

Other

9
⌘K
Command
DuplicateRenameArchive
Context Menu
Show notes
Collapsible
EditShare
Button Group
مرحبا
Direction
Where do tokens live?How do I theme?
FAQ
What next?

Delegation

Questionnaire

Searched

pnpm build

Trace
⌘S
Shortcut

Live demos

Button

Icon

Typography

Heading

Title

Body copy for explanations and longer reading.

Description sits under a title as supporting text.

Detail label

A single bulleted point.

Inline code and a StyleX link.

Avatar, tag, and status

ALKSLiveReviewFailedLivePendingError

Stack

Stack lays blocks down the page.

Inlinesits beside

Selection

Delivery

Inputs

Shown next to comments.

Use a full address, like [email protected].

Tabs

Profile, password, and sessions.

Feedback

Published

The change is live for every workspace.
⌘K

Stickers and speech

NewSoftSquishSaved
Press a button and it dips. Hover a sticker and it sits up straight.
Pink is for the cheerful notes.

Badge, rating, and pages

31299+
How does this feel?

Loading

Chart labels

SentDeliveredFailed
Monday1,204
Apr

Accordion

Color, type, space, and shadow tokens are StyleX variables.

Alert

Workspace saved

Everyone in North studio can see this catalog now.

Alert Dialog

Aspect Ratio

16:9 preview frame

Attachment

brief.pdf

PDF · 1.4 MB

moodboard.png

Uploading · 64%

notes.zip

Upload failed. Try again.

Button Group

Calendar

October 2026

SuMoTuWeThFrSa

Code Block

tsx

import { Button } from "@kenselasie/codeddesign";

<Button variant="primary">Sign in</Button>

Collapsible

Combobox

Command

Context Menu

Right-click this paragraph for a menu.

Data Table

Billing exportAdaLive
Invite flowKenPending
Webhook retryNoorError

Date Picker

Ship date

Direction

This block is right-to-left. Arabic and Hebrew layouts use the same provider.

Drawer and Sheet

Hover Card

Input Group

https://.studio

Input OTP

Invite code

Item

Ada Lovelace

Designer · last seen today

Noor Hassan

Engineer · reviewing webhooks

Marker

Switched to release-candidate
Explored 4 files
Today

Message

C

CodedDesign

Buttons lift, then squish when you press them.
A

Ada

Keep that. Can we have forms too?
C

CodedDesign

Sign-in, invite, and profile are on the Forms page.

Popover

Questionnaire

What should we prototype next?

Choose a direction for the next catalog pass.

Resizable

Tokens, type, and color live on this side.

The preview pane stretches as you drag the handle.

Scroll Area

Nunito

Fredoka

paper cream

ink purple

peach snow

plush shadow

Toggle

Trace

Searched for minimumReleaseAge8 results
Running pnpm build
Run pnpm test