OSCLOSCL
Explore OSCL
The OSCL library

Small pieces. Big possibilities.

Thoughtful React components. Try them here, make them yours.

15 components

Go on. Give it a click.
Actions

Button

Clear actions, useful variants, and stable loading states.

A real label. A little extra context.

Forms

Input

A labeled field with connected descriptions and errors.

Forms

Textarea

More room for ideas, with accessible labels.

DraftReadyReviewNeeds a fix
Feedback

Badge

Small labels that give your interface a little context.

Forms

Checkbox

Simple, native choices with a generous clickable label.

You can change your mind anytime.

Forms

Switch

An immediate on or off choice, ready for a keyboard.

Your next project

A little room for your next idea. Composable from the first line.

Ready to build
Layout

Card

A quiet container. Header, content, and footer included.

A little overview of everything you are building.
Navigation

Tabs

One view at a time, with proper keyboard navigation.

Feedback

Dialog

A focused conversation with escape and focus restoration.

Feedback

Tooltip

A little extra context on hover or keyboard focus.

hello.tsx
import { Button } from "oscl-ui";

<Button>Build something</Button>
Developer

Code Block

Readable syntax, honest copy feedback, and safe source rendering.

Hello from OSCL
Actions

Copy Button

Copy exactly what you need, with success and failure feedback.

Fictional example. No real credentials.

Developer

API Key Field

Reveal, hide, and copy a key without losing context.

OperationalDegradedOutageUnknown
Feedback

Status Indicator

A status you can read, rather than a color you have to guess.

Room for something new

Your first project starts with an idea.

Feedback

Empty State

An empty view that tells you what you can do next.

Open components. Yours to build.