Engineering
How we ship 10x faster than the agency averageHow we ship 10x faster than the agency average
We moved from quarterly releases to daily deploys. Here's what we changed.
Ahmad Muhyidin
6 min readContent blocks
Long-form reading components. Every sample below is exhaustive — each labeled row shows every type, variant, and size.
Callout
Documentation admonition. Every type, plus title-less and icon-less variants.
note
note
A note callout carries its own default icon and role.
info
info
A info callout carries its own default icon and role.
tip
tip
A tip callout carries its own default icon and role.
warning
warning
A warning callout carries its own default icon and role.
danger
danger
A danger callout carries its own default icon and role.
success
success
A success callout carries its own default icon and role.
important
important
A important callout carries its own default icon and role.
no title
Saved. Your changes are live.
no icon
Plain
Pass icon={null} to render without the leading icon.
<Callout type="tip" title="Tip">Use bunx @idinstudio/create-component.</Callout>Prose
Styled wrapper for markdown-rendered content. Every size and content width.
size: sm
Pragmatic products, shipped fast
We build MVPs, internal tools, and SaaS for founders who need production-grade software in weeks, not quarters.
- Full product design
- Frontend + backend engineering
size: md
Pragmatic products, shipped fast
We build MVPs, internal tools, and SaaS for founders who need production-grade software in weeks, not quarters.
- Full product design
- Frontend + backend engineering
size: lg
Pragmatic products, shipped fast
We build MVPs, internal tools, and SaaS for founders who need production-grade software in weeks, not quarters.
- Full product design
- Frontend + backend engineering
maxWidth: wide
"Engineers who design. Designers who ship. Rare in our industry."
Read more in the full services brief.
<Prose size="md" maxWidth="prose">…</Prose>QuoteBlock
Standalone blockquote with attribution. Every variant and size — seeded with Sundanese sample people.
variant: default
Idin Studio shipped our first paying product in four weeks. Rare in our industry.
Ahmad MuhyidinManajer Produk
variant: featured
Idin Studio shipped our first paying product in four weeks. Rare in our industry.
Ahmad MuhyidinManajer Produk
variant: inline
Idin Studio shipped our first paying product in four weeks. Rare in our industry.
size: md
We had a four-month backlog on our ops dashboard. They rebuilt the whole thing cleaner in three weeks.
Novi YantikaPerancang UI
size: lg
We had a four-month backlog on our ops dashboard. They rebuilt the whole thing cleaner in three weeks.
Novi YantikaPerancang UI
size: xl
We had a four-month backlog on our ops dashboard. They rebuilt the whole thing cleaner in three weeks.
Novi YantikaPerancang UI
<QuoteBlock variant="featured" size="xl" attribution={{ name, role }}>…</QuoteBlock>BlogPostCard
Index card for a blog post. Both orientations and both variants — seeded with Sundanese sample people.
vertical
Case study
Rebuilding an ops dashboard in three weeksRebuilding an ops dashboard in three weeks
From a four-month backlog to a shippable product.
Novi Yantika
9 min readhorizontal
Product
Why we hand you the repo on day oneWhy we hand you the repo on day one
No vendor lock, no hidden retainers. You own everything we ship.
Azlan Althaf
4 min read<BlogPostCard href="#" title="…" excerpt="…" author={{ name, initials }} date={new Date()} readTime={6} />ComparisonTable
Full pricing comparison grid with sectioned rows, a highlighted tier, and boolean / value cells.
| Feature | Free$0 | PopularPro$29/mo | Team$99/mo |
|---|---|---|---|
| Core | |||
| Projects | 3 | Unlimited | Unlimited |
| Team members | 1 | 10 | Unlimited |
| Community support | Yes | Yes | Yes |
| Advanced | |||
| SSO + SCIM | No | No | Yes |
| Custom SLA | No | No | Yes |
| Dedicated CSM | No | No | Yes |
<ComparisonTable tiers={tiers} sections={sections} stickyHeader />FeatureComparison
Lean us-vs-them matrix with a highlighted column and boolean cells.
| Feature | Idin Studio | Agency Alt 1 | Offshore Shop |
|---|---|---|---|
| Fixed-scope first sprint | Yes | No | No |
| Repo ownership on day 1 | Yes | No | Yes |
| Senior-only engineers | Yes | No | No |
| NDA within 1 hour | Yes | Yes | No |
| Full design + code | Yes | No | No |
<FeatureComparison columns={columns} features={features} />ChangelogEntry
Single version release block. Featured and standard, with categorised change lists.
featured
v1.0.0
Production-ready release
Added
- All primitive components promoted to stable.
- Full Figma Code Connect coverage.
Changed
- Default theme mode flipped from dark to light.
Fixed
- Focus restoration when closing a Sheet from within a Dialog.
standard
v0.9.0
Release candidate
Final polish before 1.0.
Deprecated
- The legacy dark-first token map.
Removed
- Unused Radix 1–12 scale aliases.
Security
- Hardened iframe sandbox defaults.
<ChangelogEntry version="1.0.0" date={new Date()} title="…" featured categories={[...]} />FAQDetail
Native <details>-based disclosure for FAQ pages. Open and closed defaults.
defaultOpen
How do I install @idinstudio/ui?
Run bun add @idinstudio/ui @idinstudio/tokens and import the styles at your root.
closed
Is it tree-shakeable?
Yes. Each component has its own entry point, e.g. @idinstudio/ui/primitives/button.
What's the licence?
MIT. You own everything we ship.
<FAQDetail question="…" answer="…" defaultOpen />TableOfContents
Sticky anchor navigation for docs pages. Every heading level renders at its own indent.
<TableOfContents title="On this page" items={items} defaultActiveId="install" />