Skip to content
mielui
0.4.0 What's new

Svelte components you can own

Mielui is 78 components for Svelte 5 and Tailwind v4. They read one set of design tokens, so a theme restyles all of them. Pick one below and watch.

Browse components Read the docs

Default The Mielui default. White plates on a grey stage, drawn in one ink.

Notifications

Choose what reaches your inbox.

Alert volume 64%
Notify me about

Invite to project

Teammates get an email with a link.

Access
AMSRKC
SunMonTueWedThuFriSat
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7

Pick a prompt or write your own.

Visits this week, sample data

348

Sample visits per day
dayVisits
Mon24
Tue42
Wed36
Thu58
Fri48
Sat76
Sun64

Release 0.4

7 of 10 tasks done

Shipped
In review
Blocked
Edit Default in Theme Studio

From a button to a coding agent

78 components in 11 groups, plus actions for motion. Native controls keep their browser behavior.

Browse the catalog

Composition

Made of parts you can rearrange

Larger components are named subparts. Omit one, reorder them, or pass a class to any of them. What you write is what renders.

How components are built

Header, content, and footer are parts. Leave the footer out and the card closes on its content.

<Card.Root>
  <Card.Header>
    <Card.Title>Release checklist</Card.Title>
    <Card.Description>2 of 3 done</Card.Description>
  </Card.Header>
  <Card.Content>
    <Checkbox checked label="Review the notes" />
    <Checkbox checked label="Test the keyboard" />
    <Checkbox label="Tag the release" />
  </Card.Content>
  <Card.Footer>
    <Button>Publish</Button>
  </Card.Footer>
</Card.Root>

Release checklist

2 of 3 done

Live demos

Whole screens, still working

Each screen is put together from components in the docs. Pick another thread, send a follow-up, or change the issue's labels.

AI components

Rate-limit the public API

Add per-key rate limits to the public API. 100 requests a minute, and return a proper 429 when a client goes over.

Every request passes through authenticate, so the limiter sits right after it and keys on the API key. It uses a sliding window in Redis, so a client cannot burst across a minute boundary.

src/app.ts +3 −1
Unchanged line 9: .use(authenticate)
Added line 10: .use(rateLimit({ limit: 100, window: "1m" }))
Removed line 10: .route("/v1", routes);
Added line 11: .route("/v1", routes)
Added line 12: .onError(rateLimitErrors);

Each API key now gets 100 requests per minute. Over the limit, the API returns 429 and tells the client when to retry.

pnpm test api passes, including 4 new limiter tests.

Start with one command

Free and MIT licensed. Svelte 5.56 or newer, Tailwind CSS v4.

  1. 1 Add the package 
    pnpm add @mielui/svelte
  2. 2 Import the stylesheet in your app.css 
    @import '@mielui/svelte/ui.css';
  3. 3 Use a component 
    <script>
  import { Button } from '@mielui/svelte';
</script>

<Button>Get started</Button>