Skip to components
wlkr/ui

Interfaces,
reduced.

Useful components.
Thoughtful defaults.
Source you own.

Explore the collection

GitHub star

A small invitation to the source. Rolling digits, a green star, and one well-timed burst.

WLKR original

Example data, not live GitHub stars. Hover or focus the link to replay.

pnpm dlx shadcn@latest add @wlkr/github-star

Copy command

One command. One click. Clear feedback when it works, a useful fallback when it doesn’t.

WLKR original
pnpm dlx shadcn@latest add @wlkr/copy-command
pnpm dlx shadcn@latest add @wlkr/copy-command

Async action

An action that follows through. Pending, success, and a second chance when something goes wrong.

WLKR original
pnpm dlx shadcn@latest add @wlkr/async-action

Filter list

Find the thing you came for. A small, accessible search for lists that don’t need a whole search engine.

WLKR original

3 results

  • Brand Studio

    The source of truth for a considered identity.

  • WeatherGoblin

    A little character in your daily forecast.

  • PatriBible

    Scripture, thoughtfully within reach.

pnpm dlx shadcn@latest add @wlkr/filter-list

Pixel object

Give a shape a little life. Project a point cloud or a simple mask into a quiet field of pixels.

WLKR original
Object is still.
pnpm dlx shadcn@latest add @wlkr/pixel-object

WLKR loader

A familiar mark, in motion. Two quiet loading rhythms built from WLKR’s original six cells.

WLKR original
pnpm dlx shadcn@latest add @wlkr/wlkr-loader

Page intro

A clear beginning. Final text holds its place while a quiet binary field resolves into the title.

WLKR original

Less. Better.

A clear starting point. Nothing to move out of the way.
pnpm dlx shadcn@latest add @wlkr/page-intro

Index row

An index with a little movement. Three digits roll on hover or focus, then settle where they belong.

WLKR original
007 Brand StudioConsidered tools for a clear identity.In progress042 WeatherGoblinIn development
pnpm dlx shadcn@latest add @wlkr/index-row

Text link

A link that stays a link. Add an optional preview when a little context helps someone choose.

WLKR original

Take a look around WLKR Labs, or bring a component home.

pnpm dlx shadcn@latest add @wlkr/text-link

Theme toggle

Light or dark, with one quiet control. System preferences lead until you choose otherwise.

WLKR original
pnpm dlx shadcn@latest add @wlkr/theme-toggle

Typography

The same type, scale, and spacing you see here. Opt-in styles for a shared visual language.

WLKR original

Aa.

Geist. One scale. Room to breathe.

Opt-in styles, with the same exact gallery values.

pnpm dlx shadcn@latest add @wlkr/typography

Import the stylesheet from the path printed by the CLI (usually src/styles/wlkr-typography.css). The font stays owned by your app.

Primitives

Good foundations, straight from shadcn/ui. We use the originals, with WLKR’s shared design tokens.

shadcn/ui
pnpm dlx shadcn@latest add button input switch

Installed directly from shadcn/ui. Upstream source is unchanged.

Foundations

A common language for what comes next. Semantic color, considered type, and space to think.

WLKR system
Canvas
Ink
Quiet
WLKR green

Meaning before appearance.

Canvas, foreground, muted, and accent describe a purpose. Their values change with the light. Green marks a useful moment; it never has to carry the message alone.

One typeface. Room to breathe.

Geist. A compact scale. Tight display typography and comfortable reading lengths. Focus stays visible. Motion follows interaction and respects reduced-motion preferences.

pnpm dlx shadcn@latest add @wlkr/theme

Make it yours.

Copy the source into your project with the shadcn CLI. Keep what you need. Change what you like. No component runtime to subscribe to.

1. Start with shadcn

pnpm dlx shadcn@latest init

Use an existing React, TypeScript, and Tailwind project. Already configured? Continue below.

2. Add the namespace

Merge this entry into the registries field of your project’s components.json.

components.jsonjson
{
  "registries": {
    "@wlkr": "https://ui.wlkrlabs.com/r/{name}.json"
  }
}

3. Bring a component home

pnpm dlx shadcn@latest add @wlkr/copy-command

Originals install to components/wlkr. Their stock primitives come directly from shadcn. The optional theme adds light and dark color tokens.

Using it with Astro

The website uses Astro. Adopt these components with the official @astrojs/react integration and compatible Tailwind/shadcn setup. Import these React components into an Astro page with a client:load directive for interactive islands. Review generated source and token conflicts in the website checkout before publishing.

Source on GitHub. Built with shadcn/ui, Radix, Lucide, and Geist. Based on the official registry starter. WLKR originals are MIT licensed.