Sprix logo
Sprix logo
Introducing Sprix

UI with a point of view.

Built by Jawe for the kind of interfaces he actually wants to ship: calm, sharp, and quietly expressive.

Start with the library See product-facing examples
Tech Stack

Svelte 5 for structure. Tailwind CSS 4 for style.

Sprix UI is composed in Svelte 5 and styled primarily with Tailwind CSS 4. The combination keeps components direct, makes iteration fast, and lets the design system stay consistent without feeling heavy.

The code stays close to the components, while the result remains calm, flat, and recognizably Sprix in both light and dark mode.

Code

Svelte + Sprix

+page.svelte svelte
import { Badge, Button, Card, Link } from '$lib/components'; <Card  title="A sharper default stack"  description="Svelte 5 shapes the components. Tailwind CSS 4 keeps the system fast to build and easy to tune.">  {#snippet action()}    <Badge role="primary" variant="modern">Tech Stack</Badge>  {/snippet}     <div class="flex flex-wrap items-center gap-3">      <Button>Browse components</Button>      <Button role="secondary" variant="outline">View showcase</Button>    </div>  </div>   {#snippet footer()}    <Link href="/components" rightIcon="arrow-right">Start with the library</Link>  {/snippet}</Card>

A sharper default stack

Svelte 5 shapes the components. Tailwind CSS 4 keeps the system fast to build and easy to tune.

Tech Stack
Start with the library

Product screens built with Sprix.

Payment, authentication, dashboard, and CMS flows composed from the same system.

View showcase
Sprix logo

Jawe Ordillano

jawe@sprix.dev

Checkout

Ready to charge

Sprix Billing

Card details

Secure checkout

Billing

Order summary

Sprix Pro annual $240
Tax $24
Total due $264
Encryption active Receipts enabled Invoice ready
Principles

Calm by default. Built for real product work.

Sprix keeps structure obvious, decoration restrained, and every screen steady in light and dark mode.

Browse components

Design posture

Quiet surfaces. Strong hierarchy.

Sprix relies on spacing, typography, and contrast before it reaches for decoration. The interface stays readable even when the screen gets busy.

Flat surfaces Clear borders Measured spacing

Surface

Flat layers and clean borders keep the interface quiet before content starts competing.

Rhythm

Spacing and typography create the scan path so dense screens still feel easy to read.

Theme

Shared tokens keep light and dark mode aligned from the first pass.

Composition

Start from the system.

Rebuild the screen from the existing components first, then add route-level wrappers only when the flow truly needs them.

Reuse primitives Keep APIs direct Scale across flows

Contrast

Let borders do the lifting.

Hierarchy comes from surfaces, spacing, and type before shadows or extra chrome enter the screen.

Low shadow Strong edges Clear states

Product

Prove it in real screens.

Billing, authentication, dashboards, and CMS flows are the standard for whether a component belongs.

Checkout Workspace Editor
Components

Ready to compose.

A tighter slice of the library: actions, forms, navigation, and feedback primitives already shaped for real screens.

Browse components
Start Building

Ship the next sharp screen with Sprix.

The components are ready. The tokens are set. The system already has enough point of view to make the next product surface feel fast, clean, and unmistakably yours.

Library

40+

Ready-to-compose primitives for real product screens.

Contact

help@sprix.dev

Questions, collaborations, or product work. The button is ready when you are.